(613) 818-2848

Interactive network maps and charts with D3.js

I am thrilled to be able to present fully interactive social network analysis mappings. This adds a new level of viewer engagement and ability to explore. The interactive forms shown here could also be used to illustrate an article or other presentation.

Additionally, full network mappings can be complex to the eye and it can be hard to see important patterns. Generally, this is solved by filtering and presenting partial views, which works very well. Interactivity, however, gives us another powerful way to cut through complexity by letting viewers themselves control some of the picture.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.