Meta-graphs in D3.js

Authors

• GAGNAIRE Romain (JoeTheFkingFrypan, GAGNAIRE-Romain)
• AMELOT Nicolas (KoalaMoala)

Background

D3.js is a technology writen in JavaScript capable of transforming raw data into usable information in an almost infinite number of ways. The beauty of D3.js lies within its ability to create all kinds of graphical representation, from the basic pie-chart, to geomaping, there is not any real limit to what you can do with it, only your imagination.

What makes it particularly attractive (and good-looking) are animations. Static data is plain boring. It is much more interesting when you can actually play with the data, move through it as you see fit, change settings so it better suit your taste. This is one of the biggest pros of D3.js : pretty much everything can be animated (size of the elements, their color, their postition, etc).

As far as we're aware, there aren't many visualisations based on D3 in the theme of meta-graphs. Meta-graphs are like any other graph, except they are multi-layered : each node is a graph, containing at least a single node. The following example illustrates what is a one-layered meta-graph. There are 3 super-nodes (represented as colored squares), each of them containing a certain amount of children nodes. This example is very simple, but the concept can go further than this, as children nodes could have graphs themselves, creating a N-layered graph.

While some visualisations does already exist that fit the theme like Pack Hierarchy, Circle Packing or Improved Circle Packing, they could be enhanced by adding new features to better manipulate the data.

Aim of this project

• Discover, learn and experiment with D3.js, a technology we have never used before.
• Discover, learn and experiment with various technologies like NodeJS, ExpressJS, Jade, Stylus, Grunt, etc.
• Implement brand new features in the theme of meta-graphs.
• Build the largest and most comprehensive tool possible within the time limit of this project.

Technology used

• NodeJS using ExpressJS, the web application framework for its Model-View-Controller architecture
• D3.js v.3.5.17 to display graphs using vector graphics
• Jade, an effective template engine
• Stylus, an very intuive and simple CSS preprocessor
• External JavaScript libraries used: JQuery, JQueryUI, Bootstrap 3, FontAwesome

Core files

The main application logic is divided into 2 different files :

• Index.jade
• Graph.utils.js

Available datasets are located in public/json

How to run the application

1. Download and install NodeJS
2. Donwload the latest snapshot of our application
3. Extract the source code into the directory of your choosing (for example E:\Dev\Workspace\VA-Final-Project)
4. Open a command prompt (bash/shell on UNIX or cmd on Windows)
5. Navigate to the directory where you've extracted the sources (for example cd E:\Dev\Workspace\VA-Final-Project)
6. From that directory, run the command npm start
7. Open your web browser and load the page localhost:3000

Current state of features

• Basic graph representation (vectorial nodes & edges)
• Zoom
• Pan
• Drag
• Basic brush selection
• Getting rid of context-menu (right-click popup) on the visualization view
• Actually do something with selected nodes :)
• Node & edges highliting for neighbors on mouse-over
• Ability to dynamically change visualisation settings (edge strength, node radius, etc)
• Ability to change node/edge color
• Ability to load datasets using different formatting (Nodes can be identified by ID, name or index. Same goes for edges)
• Ability to load external dataset (uploading dataset or copy-pasting into import form)
• Ability to collapse & restore "groups" (super-node + children)
• Dynamic edge routing due to collapsing & restoring super-nodes in a non-tree layout

Screenshots

DISCLAIMER Please keep in mind the following animated pictures are GIFS recorded at 33 fps (frames per second) using a quantization image processing. While the resulting quality of the images is descent enough, some of them may contain some visual artifacts which do not represent what the actual render would be

For instance, both brush selection and zoom features are working just fine, the image just happen to have trailing pixels.

For a genuine and artifact-free experience, you might want to consider running the project on your computer by following the steps described in the section How to run the application

Main UI

Neighbor Highlighting on mouse-over

Brush selection

Zoom

Drag

Loading datasets

Toggle setting menu

Dynamic updates of simulation settings

Supernode collapse & expansion