(613) 818-2848

Interactive network maps and charts with D3.js

Presenting your data to the world often involves, or should involve, your website. One way of presenting your data on a site is to use static images and slidedoc -style presentation methods. This is effective, as always, when the design is done well. An even better option is to provide interactive data displays to viewers of your site. With this in mind, I have recently added D3.js data visualization to my offerings. It allows infinitely customizable and interactive data visualizations that can be put up on a website or any other html page without the limitations and cost of proprietary software like Tableau and the like. A huge advantage of this, other than avoiding sometimes onerous software licensing costs, is that you can keep your data in-house; you don’t have to post your work on someone else’s public server first.  

In particular, I am thrilled to be able to present fully interactive social network analysis mappings. More often than not, a full network mapping is very complex to the eye and it is hard to see the important patterns. Generally, this is solved by filtering and presenting partial views, which works well. Interactivity, however, gives us another powerful way to cut through complexity.While viewer interactivity in the past has been difficult to achieve using network analysis software and extensions, this is now possible using D3.js visuals. Here is an example.

This network mapping was done with a several social network analysis software packages on data downloaded directly from Twitter. It is presented here using D3.js to replicate its structure.The image presented here is interactive: double-clicking on any node allows you to see that person’s immediate connections. I could have also included tooltips to display information on each node, or a number of other options. To my knowledge, this level of web page interactivity for social network mappings does not exist anywhere else.

The interactivity of D3.js supports the use of other visual devices that help to illustrate and encourage exploration of network data. The following charts illustrate the relationships between the top 20 contributors to the network shown above. Each incorporates an interactive “mouse over” feature to help the viewer explore and understand.

The next two charts present two ways to look at the strength of connection between members of this group. In the first of these, which is called an “arc diagram”, you can see the connections and strength of connection between individuals by passing your cursor over the nodes and arcs. When selecting arcs, the blue node is the message originator and the green the receiver.

A more familiar-looking way to see connections is with this “adjacency matrix”, again showing the strength of connection (as measured by numbers of tweets to or mentions of each other). Passing your cursor over the matrix highlights the row and column of each intersection for easier reading.

In this scatterplot, you can see that there is a positive relationship between in-degree, out-degree and between those and betweenness centrality (shown by node size).(1)

(1) These terms actually having meaning to those of us who are social network analysis geeks.


Finally, here is an example of an interactive means to display details of social media conversations in a table format along with summary information using, in this case, a bar chart.