~ / teaching / InfoVis / practical works / Interactive BubbleChart

Interactive BubbleChart with D3.js

© 2022— - Renaud Blanch

The goal of this practical work is to build a first interactive visualisation using D3.js with data having more than 2 attributes, using the position, color, and size visual variables.

You will build a clone of the BubbleChart used by GapMinder to show development indicators.

Setup

Get the archive that contains the dataset; the version of D3.js that you are going to use; and a visualisation template. Unzip it and get used to its content.

The data/gapminder directory contains an excerpt of the datasets that are made available by GapMinder (see the README.md for licence details):

• metadata for countries, and
• time series of some development indicators (life expectancy, gdp per person, etc.) for countries around the world. Each file has 3 (tab-separated) columns: geo, the country code; time, the year; and a last column that gives the indicator value.

The vendor directory contains the D3.js version 7.8.5 code.

The viz directory contains a visualisation template that produces an HTML numbered list of the top-20 countries, according to their GDP, for the year selected with a dropdown menu.

To test this template, you need to start a web server. The simplest way to go is using python in a terminal as shown below:

% tar xzvf gapminder.tgz
x gapminder/data/
[...]
x gapminder/vendor
[...]
x gapminder/viz/
x gapminder/viz/gapminder.html
% cd gapminder/
% python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 ...

You can then open in a new tab your local version of the visualisation that should display the country list, as the online version does.

Bubble Chart

The first step consists in creating the bubbles using a visual mapping that will project each item for a chosen year (e.g., 2019) onto a mark (circle):

• the population attribute (population_total) is mapped onto the size of the mark;
• the life attribute (life_expectancy_at_birth_with_projections) onto the vertical axis; and
the income attribute (income_per_person_gdppercapita_ppp_inflation_adjusted) onto the horizontal axis.

The sample visualisation (lines 17-50) shows how to load and merge data from multiple files. For each country, create a SVG group that has a translation as transform attribute and choose the translation according to data of the country. Then add a circle element to this group.

For the horizontal axis, given the distribution of the income data, a log scale is more appropriate than a simple linear mapping. For the size attribute, a square root scale is appropriate, because we want the population mapped onto the surface of the circles (rather than their radius).

In order to prevent occlusion of small circles by large circles, the data must be sorted according to the population attribute before creating the circles.

When this first step is completed, the visualisation should look like this:

The second step consists in adding some decorations:

• the labels of the axis;
• a grid made using D3 axis (you can remove the text elements that label the ticks and the path element produced by the axis, then tweak the tickSize); and
• a large text in the background to display the year of the data visualised (the text-anchor and dominant-baseline attribute of text elements allow to control their vertical and horizontal alignment; setting those property to 'middle' will allow to use the center of the canvas as position for the text and get it centered, whatever values you choose for the font-size and font-family attributes).
• the horizontal and vertical dashed lines that connect the currently hovered element to the axis, and the text labels that display the values of the element attributes.

To change the position and the values of those cursors when the user hovers a bubble, add a listener to the groups representing the countries that will get called upon 'mouseenter' events by D3's event handling mechanism.

The third step consists in setting attributes of bubbles that depend on countries details:

• load the country and world_4region datasets and build indexes from those datasets to allow lookups using iso4 code for the countries and the world_4region attribute for the regions;
• set the color of the bubbles according to the world regions countries are belonging. The country dataset allows to lookup the world_4region code from the iso4 attribute of the country. This region code can be used to retrieve a corresponding color in the world_4region dataset; and
• add a title element to the bubbles with the name of the country (that is available with a lookup of the name attribute in to the country dataset using the iso4 code of the countries.

The title element is handled by the browser to add a tooltip when hovering the SVG elements as shown on the capture below:

Interactions

The first interaction consists in adding a legend for the regions that users can click to alternatively show or hide the bubbles corresponding to the actioned item of the legend. To do so,

• first, create a legend using the technique seen for the penguins practical work;
• then, add the region to the class attribute of the bubbles so that they can be selected by region using the selectAll D3 function;
• the, add an event handler to the legend items to listen to the 'click' events and change the opacity of the relevant bubbles; and
• finally, change the legend items' cursor style from 'default' to 'pointer' so that users will get a hint that they are clickable.

On the capture below, Europe is deselected and the corresponding bubbles have their opacity set to .1:

The next interaction consists in adding an interactive slider to select the year displayed on the visualisation. One possibility for making a slider is to:

• build an ordered list of the years that are present in the dataset (this list should probably clamped to exclude future years present in the dataset with extrapolations for the values);
• create a linear scale that will map the domain of those years onto the range of pixels used for the slider (here the width of the chart);
• build an axis from that scale to display a track for the slider;
• create a SVG group with a circle, a vertical tick and a centered text element to be used as the thumb of the slider.

Once this is done, we need to handle the interaction. For that we can use D3's support for drag behavior to add a listener to the 'drag' event that will:

• compute the date that correspond to the e.x property of the event by using the invert method of the years' scale;
• round that date to the nearest year that is present in the dataset (d3.least may be handy for that);
• use that year to call a function set_year(year) that will:
  1. set the thumb's and the background label's texts to display the current year, and
  2. change the translation of the thumb using the years' scale to compute it from the year.

At this point, the slider should work, but the bubbles need to be updated to represent the data of the selected year. To do so, you should:

• put the bubbles creation inside a function set_data(year);
• replace the selection.enter().append('g') call used to create the bubbles by a selection.join('g') that will work to add new elements, but also to update existing bubbles according to the new data (be sure to give a key function as explained in the selection.data documentation, so that the same bubble is reused for each country);
• call the set_data(year) when the page is first loaded to create the bubbles; and
• call the set_data(year) from the set_year(year) function so the slider movements update the visualisation.

Animations

In this part you will add animations to the visualisation.

The first animation will step through the years and change accordingly the visualisation. To do so:

• first, create a button using a circle and some text on top of it (the following unicode string will do: ' ▶' for play and '❙❙' for pause);
• then, add a listener on that button for 'click' events that will launch or stop the animation and change the button label (you can use a boolean variable to track whether the animation is running or not).

The animation can be stepped through using the d3.interval function that repeatedly invokes a callback at specified interval (e.g., advance a year every 120ms). It can call a step_year() function that will find the next year to display (given the current year that you may need to store in a variable) and call set_year(year) accordingly.

Special attention should be payed to the stopping conditions for the animation: the user may click the play/pause button; the animation may reach the end of the year scale; or the user may grab the year slider's thumb to choose a year.

To make the animation smoother, use the selection.transition() mechanism to animate the bubbles radius and positions when they are updated for a new year. The duration of the animation may be different when the change comes from the animation, or from an interaction with the slider. Adding a duration parameter to the set_year and set_data functions could help with that.

The visualisation should now look something like that:

Bonus

Transform the region legend to add a map of the regions (see shape_lores_svg attribute of the regions dataset). The regions should be clickable to show/hide the corresponding bubbles.

Add a legend for the population. This legend should also display the population of the current country.

last update: dec. 8, 2022