Client
Unilever
Brand data
The challenge was set of wanting to display connections through the dissemination of data across the web.
This could for instance be a single tweet, and follow how this spreads through networks as it is retweeted. The same for a YouTube video, and how that is shard through networks and embedded on blog posts.
Straight away it felt like a natural fit for a Reingold-Tilford tree. The production version of the site would require a vast amount of data mining and scraping, to gather the data that is needed - with that being an undertaking in itself - a mock data-source was quickly created that simply allowed for controlling the volume of connections and connecting some metadata to each node.
Tieing that output data with D3JS - the below nodal tree was shared as an initial option.
We want to map a million connections
With the expectation to map > 1 million connections, before continuing to work and look into the interaction and categorisation of connections, it quickly felt like a node-tree wasn't going to cover what was needed in a way that is legible.
Increasing our test data size to the low thousands began to make a tree that was not at all legible, with labels quickly overlaying on top of each other - adding color for categorisation along with interaction just wasn't going to work.
It became time to go 3D, giving a much greater surface area to divide the connections nodes across.
We want to map a million connections
The 'million' connections also continued to play on my mind, and using WebGL felt like the only way of getting the performance needed to display something like that. The output can be seen in
Although in need of much more polishing before going near to production, the prototype performed it's main function of visualising how large quantities of nodal connected data, spreads across a sphere when brought into visualisation. And how browser performance plays out when doing so.
It also allows for categorisation filtering, which gives a quick reference to the comparative volume of data in that category, along with filtering of a thread for an individual nodes from the footer. When using live data, each of these nodes when selected will give deeper information about the user associated with it.
My role
My role in this prototype covered all elements from putting together the rough interface structure, considerations and implementation of graph types, explorations into the D3JS implementation, writing the ThreeJS scene and the graphing class that handles creating the visualisation of the 3D version, and writing the back-end data generator that provides the data for it.