The Masters Degree

Applications for Admissions

Academic Program

Masters Project

Class Notes

Other programs in applied maths & informatics

Information for Foreign Students

Restricted area


Information Visualization

2018 Notes

The slides and additional material are available at my InfoVis page.

2018 Schedule

5 oct.Lecture (RB): Introduction (1/4)
12 oct.Lecture (RB): Introduction (2/4) Visual perception; readings: Feature integration theory & Visual search
19 oct.Lecture (RB): Introduction (3/4) InfoVis pipeline; readings: InfoVis pipeline
26 oct.no lecture; assigment: steps #0 & #1 of the project (see below)
16 nov.Lecture (RB): Introduction (4/4) Visual variables; readings: InfoVis design space
23 nov.Lecture (RB) visual mapping (cont.); assigment: form groups (3-4 members) for the main project
30 nov.Lecture (RB) Interaction; project data set presentation
7 dec.Lecture (RB) Interaction (cont.)
14 dec.Lecture (RB): Networks definitions; readings: Comparison of the Readability of Graphs using Node-Link and Matrix-Based Representations
21 dec.Lecture (RB): Networks 2/2
11 jan.Lecture (RB): Trees
18 jan.no lecture
25 jan.project defense (to be confirmed)

Past exams

2015 exam 2016 exam 2017 exam


The project will count for 34% of the final mark.


Produce an interactive visualization that allows the exploration of the data set or that conveys interesting information about the dataset.


See the project page.


25 oct.complete step #0 (0%)
9 nov.complete step #1 (10%)
23 nov.form groups
30 nov.list hypothesis that can be tested using Open Food Facts
25 jan. (tentative)defense

step #0 get familar with d3.js

Read the d3.js overview.

Follow this d3.js tutorial.

Reproduce the original visualization of the Anscombe's quartet using d3.js.

An template project with the data is available at bitbucket. You can download an archive of the whole project. Unzip it, go into the directory, run a web server there, and start tweaking the viz/0-table.html file.

% ls -l
total 16
drwxr-xr-x   7 staff   238 18 oct 11:18 .
drwxr-xr-x  32 staff  1088 18 oct 11:18 ..
-rw-r--r--   1 staff   172 27 oct  2017 .hg_archival.txt
-rw-r--r--   1 staff   550 27 oct  2017 README.rst
drwxr-xr-x   5 staff   170 18 oct 11:18 data
drwxr-xr-x   3 staff   102 18 oct 11:18 vendor
drwxr-xr-x   3 staff   102 18 oct 11:18 viz
% python3 -m http.server
Serving HTTP on port 8000 ( ...

You can observe the result by pointing a browser to http://localhost:8000/viz/0-tables.html.

step #1 first visualisation with d3

Build a visualisation of the passengers of the Titanic last journey.


Q.How should the assignment be delivered?

Please send a zip/tgz (no rar) archive to mailto:blanch@imag.fr with a proper subject. No link to google drive/dropbox, etc.

Q. The data is not loading into my page

A. You have to run a web server, even for local development. To do so, you can use python:

python3 -m http.server

and then go to http://localhost:8000. You can also use node, see the d3.js documentation.

Q. How to handle multiple data sets

A. Read this introduction to data cleaning, manipulation, and wrangling in JavaScript with d3.js.

Edit - History - Print - Recent Changes - Search
Page last modified on January 11, 2019, at 10:18 AM