Written by James Grant

D3.js framework.

Building the data structure This article assumes a general understanding of the D3.js framework.

Exploratory visualization enable a user to identify data within data, to find new features and infer new information. The sibling of this is an exploratory visualization. Visualizations which are focussed on a singular display, designed to enable communication of data in a way most beneficial to the end user.

Weavee is a unique platform and to create it I used D3.js to build the “Discovery Companion/Graph”. In my second D3.js post I aim to cover the data structure I used to build this unique tool.

Building something unique

It is important to understand how you want to construct your visualization before you start any code build (It will save time). For Weavee this was:

– A new type of graph design (the function of which could be explained in a simple sentence “the closer to you in the middle the higher the relevance”
– An idea of the full end user experience
– An understanding of the types of data structure to be placed on the graph

Following this exploration of the key components you need to decide on how to format the JSON your graph will be consuming. There are two main types of D3.js data structures to choose from, either force directed or hierarchical. Your choice of structure comes down to the complexity of the links between nodes and scalability. A hierarchical data structure will make it easier to create logical data pathways should expansion beyond a single level of nodes be needed, D3.js however does not make it easy to create a link between two child nodes attached to different parents, something necessary if you ever want to show an additional link between data for example.

I opted for a force directed nodes-links layout to ensure future scalability (I have a lot of ideas on the way I want to expand the graph functionality). The best way to do this is on the backend. Weavee uses Ruby on Rails. A suggestion is to take existing database links between “nodes” e.g. Users -> Jobs and link the data together by formatting it into a JSON object which D3js can consume.

“nodes”: [{
“name”: “James”,
“id”: 3
},{
“name”: “Robert”,
“id”: 18130
}]

“links”: [{
“id”:20,
“source”:3,
“target”:18130
}]

As more nodes become available you can add corresponding links. Doing this makes it easier to scale up and down the amount of nodes in each of the graphs, all that is required is consistent data on the back end. By generating the consumable JSON the next step will be to process and display it within the D3.js framework.

Within a force directed graph you have two arrays, one of nodes and the other edges. In order to make a D3 graph dynamic you must constantly keep the data that is assigned to these two arrays in the same logical order else the display will lose coherence. This is a challenge as it requires array searches to find the correct data to either update or remove objects, which in javascript is computationally expensive; ensure you keep your data updates to a minimum to limit the drain on the browser. Finally once you have updated your array you should recall force.start() to re-render your data to the page.

Once you have your structure setup the rest of visualization is about refinement of the design and user experience. As there is nothing similar to the Weavee Discovery Companion it came with it’s own set of challenges toward UX and UI design which I will cover in a future post.

Take note

I did encounter several challenges during the build of the Graph which are important. Mostly these arise in the areas of D3.js JavaScript efficiency. I would not recommend loading more than around 100 links and nodes together on the same graph as this can be taxing on the browser when each graph change requires re-rendering and physics calculations.

If you would like to learn more about Weavee and D3.js please send me an email so that we can chat. james+d3js@weavee.co.uk

Give Weavee a try!

Facebook Comments