~ / teaching / InfoVis / practical works / Titanic's last journey
© 2016—2020 - Renaud Blanch
The goal of this practical work is to build a first visualisation using D3.js with data having more than 2 attributes.
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: the passenger list of last journey of the Titanic.
The (tab-separated) columns give the passengers class (pclass); wether they survived (survived); their names (name); their genre (sex); their age (age); and the payed fare (fare).
The vendor directory contains the D3.js version 6.2.0 code.
The viz directory contains a visualisation template that produces an HTML numbered list of the passengers name, followed by a cross is the person did not survived the wrecking.
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 titanic.tgz x titanic/data/ x titanic/data/titanic.tsv x titanic/vendor [...] x titanic/viz/ x titanic/viz/titanic.html % cd titanic/ % python3 -m http.server 8000 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 passenger list, as the online version does.
The visualisation will use the following visual mapping: the two quantitative attributes (age and fare) will use the x and y variables. The nominal attributes will use the following mappings: genre will use the shape (square for men, circle for women), opacity will encode wether the passenger survived or not. The final visualisation should look like that:
Using Bostock's margin convention, add an SVG element to the HTML page, and create two scales for the age and the fare (see the tutorial). For each passenger, get d3 to add a SVG group containing a circle with radius 2.8, and a translation corresponding to its age and fare. This step should look like this:
To visualize wether a passenger did survived, add two styles that will apply to SVG elements having the class dead or alive.
The first will be partially opaque, and the second almost transparent, but with an opaque stroke:
.dead { opacity: .25; }
.alive { opacity: 1.; fill-opacity:.01; stroke: black; }
Add a class attribute to each SVG element so that it will be styled according the survived attribute.
The visualisation should now look like that:
To encode passengers' genre, we will use the shape of the mark. First, using a filter add circles to the visualisation only for the female passengers. Then, keep only the male passengers and add an SVG square (width 5, x and y -2.5 so that it will be centered) for each of them. You will now get something like that:
Display the scatterplot axes, change the fare axe to use a log scale, add the passengers name on their mark (using the SVG title element). And that's all folks!
update: 22 oct. 2020