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.
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.
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.
If you would like to learn more about Weavee and D3.js please send me an email so that we can chat. [email protected]
Give Weavee a try!