(613) 818-2848

Interactive D3.js portfolio

D3.js supports all kinds of user interactivity. The point of course is to engage people in the data and the story it is telling, allowing them to focus on their particular interests and obtain more information and context.

Features to engage viewers

In this example, using the Twitter network presented earlier, I have incorporated a “drag and fix” feature. Try dragging the large central node to one side with your mouse and then moving others to another position, for instance, grouping those that are large (indicating that they have many contacts) or by colour, indicating that they are members of the same “community” (meaning that they are relatively more connected with each other). This could be very useful for identifying and understanding subgroups within the network, but it’s also just fun to play with.


Another example of a user-engaging data visual is an interactive map. Here are a couple of examples. This map is centered on North American, but it can be set for any part of the world. Try zooming in and out to change your focus on the map, and dragging it with your mouse when you need to re-center the image.


In this example, you can see how tooltips can provide more information in a mapping. The information could be anything from numbers of customers and clients, to funded organizations, to points of interest. In this example, you use your browser’s zoom to close in and out, and your cursor to activate the tooltip. I think I’ll call this “I’ve Been Everywhere, Man”.


Sankey diagrams are a good way of making potentially dry topics like project budgets and work flows into something more engaging and explorable.


Features to replace pages of text and give your data context

The interactivity of D3.js visuals connects contextual and in-depth information directly to visual data displays, as in this example, making possible highly engaging digital reports, and saving a lot of text, time and space. Moving your cursor over the chart labels displays text below the chart. Another way to do this would of course involve text boxes within the chart, as in the second example: again, the tooltip is activated by moving your cursor over the labels.


Features to help you focus on data of interest

Sometimes we want to “zoom in” on just part of our data. There are many ways to do this with interactive data visuals, of which this is an example. Try clicking on any “slice” of the pie chart. To reset the chart, just reload the page.

In this example, I have used highlighting and tooltips to make it possible to present a large number of series in a line chart. This is usually just something to try to avoid, but with this D3.js capability, such a chart can be informative and interesting. Moving your cursor over the lines will highlight and identify each country in turn.

The same technique still benefits a line chart with fewer series, and could provide a great deal of information using the tooltips.

This arc diagram helps to explain the relationships and feedback loops between elements of a system of causes and effects. This could be anything: and organization, relationships between characters in films, you name it.


Features to help you describe issues or tell a story

We’ve only covered a few of the possibilities to provide interaction and engagement for your readers. For now, let’s end with a lighthearted look at how you might use D3.js to tell a story – anything where there are unfolding and branching possibilities. Click on any filled circle to advance the story.

Moral: always invite the neighbours