ScatterPlot with D3.js

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

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 directory contains the dataset: a list of car models. The (tab-separated) columns give the model name, its consumption (mpg), its cylinder number (cylinders), its displacement, its horsepower, its weight, its acceleration, its year of release, and its region of origin.

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

The viz directory contains a visualisation template that produces an HTML numbered list of the car models, with their year of release and the region where they were produced (USA, Japan, ou Europe).

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 cars.tgz
x cars/data/
x cars/data/cars.tsv
x cars/vendor
[...]
x cars/viz/
x cars/viz/cars.html
% cd cars/
% 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 cars list, as the online version does.

Now, the goal of the practical work is to reproduce the visualization below. This visualization was not produced with D3.js, so the details may differ.

Scatterplot

First, build a ScatterPlot showing consumption (mpg) as a function of weight for each car displayed as a circle.

Using Bostock's margin convention, add an 800×600 px SVG element to the HTML page, and create two scales for the mpg and the weight (see this tutorial).
For each car, get D3 to add a SVG group with a translation corresponding to its weight and mpg, and a circle with radius 4 to each of those groups.
Finally, add axes to your graph.

This step should look like this:

Next, use a gradient of blue to encode the year (note that in the dataset, there are more cars than in the figure at the beginning and the years range from 1970 to 1981). To map the year onto shades of blue, use a sequential scale combined with a blue gradient.

Last, give each car a shape that depends on its origin.

To do so, you will again use a scale, this time mapping a nominal attribute (the origin) to the shape visual variable. To map discrete attributes, D3 provides the ordinal scale. You can set its domain using all the possible values of the attribute collected from the dataset using plain javascript:

var origin_domain = new Set(data.map(d => d.origin));

The range of the scale should consist in shapes. The d3-shape module provides support for symbols, a set of predefined shapes. See this example of a way to use symbols with ordinal scales to understand how to set the range of the scale with symbols. Use three symbols suitable for strocking, e.g. d3.symbolCircle, d3.symbolSquare2 and d3.symbolPlus.

Legend

Add a legend to the graph.

To build the legend, you can consider them as visualisations of small datasets. For exemple, you can build a list of the years found in the dataset and create a list of the origins like this (provided color and shapes are the scales you have defined to map the year and origin attributes onto visual variables):

var years = d3.range(...color.domain());
var origins = shapes.domain();

You can then apply the scales of the main visualisation to transform those values onto graphical elements suitable to build the legend.

last update: oct. 7, 2024