Yes another Force Directed Graph

Yes another Force Directed Graph

Over 12 years ago I wrote my first force directed graph in Java - inspired by one of the early Java demos, it quickly became a popular in-house tool (once we wired it up to some interesting data that is).  So popular that it needed to support printing (with print preview), printing to a plotter (which required banding to bitmaps) as well as "multi page" printing - oh the joy.

The next request was a bit trickier - make it go faster and allow it to be hosted in a web page (and make sure the entire download was 512KB), so the second generation was rewritten in Win32 C++ and packaged in an ActiveX (after all IE was the only business browser and everyone used windows) - this ActiveX is actually still in use somewhere - I know as I have to digitally sign it every year (well I get nagged and luckily Ken still remembers how to sign it).

Meanwhile another inhouse tool was using an Adobe SVG viewer embedded in a Web Page to view hierarchical graphs - problem was Adobe was retiring it, therefore SVG in browsers was technically at its "end of life" (or so we thought at the time).  Further, there was a new kid in town "Chrome" and my boss liked it (because he was using Linux)...  So time for the Third Generation Graph Control, with the simple specs:

  • Should work in all browser (ActiveX + NPAPI)
  • Should work on all OS's (Mac, Linux + Windows)
  • Should work inside C++/C# apps (C# was still shiny and new to us)
  • Should support Force Directed + Hierarchical Graphs (and a subset of SVG).

(3rd generation hierarchical graph)

Fortunately open source software was also gaining popularity, and there was a bunch of projects that could assist:

  • Firebreath helped encapsulate ActiveX + NPAPI into a single interface.
  • AGG Provided a common (anti aliased!) canvas I could render to on all platforms - just needed some specific BitBLT for each OS.
  • DOT Provided several layout algorithms including a nice hierarchical one.
  • Boost provided some data structures for storing graphs and also some layout algorithms.

Squeezing them all into a single dll, ocx, so, dylib took a bit of work as did tying the business logic together, but in the end it worked!  You can also see it in action here (hosted in a C# app):

This Graph Control is also still in use and is available on GitHub as open source.

Roll on a few years and Chrome announces they will be dropping NPAPI support...  Luckily (for me) during the intervening years web browsers had done a complete 180 and now they all seemed to support SVG thanks to HTML5!  So it was time to learn another new language "JavaScript".  So borrowing from D3 (yeah for open source) I knocked together a new Graph Control, which can be see in action here.  After a few iterations it was ready for the Hierarchical replacement:

The problem now was that the business folks liked the idea of visualizations in web pages and since the force directed graph was developed "so quickly", they wanted more...  Which in turn gave birth to the HPCC Visualization Framework, still in its infancy it aims to provide a simple/consistent interface to both hand crafted and off the shelf visualizations:

If your interested you can see (and play with) our live test page, or take a look at some simple "hosting" examples on bl.ocks.

Still here?  You must be looking for the source code - also available on GitHub.

Ross Santos

Strategic Vice President: Information Technology Management | Growth Strategy | Product Development ⇨ Empowering Business Growth and Driving Innovation Through Technology Leadership

8y

Great work!

Like
Reply

To view or add a comment, sign in

Insights from the community

Others also viewed

Explore topics