MOS5.5-Dataviz

Interactive Data Visualization (ECL MOS 5.5)

Romain Vuillemot, LIRIS, École Centrale de Lyon/Département Math-Info, Website, Twitter.

Contact or questions: romain.vuillemot@ec-lyon.fr

Reading

Interactive Data Visualization for the Web
by Scott Murray

Other books

Grading

Submissions

All homeworks/assignements/reports are due the day before the class at 23.59pm Lyon Time (GMT+1). Using this form.

Lecture 1 - Introduction to Data Visualization

Friday 10/01/2020 13:30-15:30

Tutorial 1 - Tableau Software

Friday 10/01/2020 15:45-17:45

Tableau Tutorial

  1. The goal is to have a first experience with Tableau and build standard charts using a simple dataset.
  2. Download and install Tableau Public (Free) on your machine.
  3. Altenartive for Linux users is the Online version of Tableau
  4. Other(simple) alternative to Tableau: Polestar

Problem 1: Iris flowers visualization

  1. Download the iris.csv and load it in Tableau; convert data types (if needed)
  2. Plot a scatterplot with X:sepal_length, Y:sepal_width, color:species and a trend line
  3. Save as a tab and save the workbook

Problem 2: Elections map

  1. Download the us-elections-history.csv and load it in Tableau; convert data types (if needed)
  2. Plot a grid plot with Year as columns, State as rows and State Winner as color/marks.
  3. Save as a tab
  4. Plot a geo-map with colors winning party in 2012 Latitude (generated) et Longitude (generated), with State as shapes and color ATTR([State Winner])
  5. Save as a tab and save the workbook
  6. Tips: make sure you parse the dataset correctly (FR version of Tableau automatically splits comas)

Problem 3: Stock markets visualizations

  1. Download the stocks.csv and load it in Tableau; convert data types (if needed)
  2. Plot a multiple line chart over time, for all stocks in a different color, grouped by company
  3. Plot a grouped bar chart (companies as categories, grouped by year or by companies)
  4. Your own chart!
  5. Save as a tab and save the workbook

Problem 4: Global Superstore Dataset

  1. Download the Global-Superstore-Orders-2016.xlsx and load it in Tableau; join datasets (if needed)
  2. Find an interesting story / selection with this dataset
  3. Create a Dashboard and explain your story/finding
  4. BONUS: Add storytelling (Tableau Feature)
  5. BONUS: Join other datasets (e.g. People, ..)

📅 For next class (17/01/2020)

✍ Assignments

📖 Readings and preparation

Tutorial 2 (1/2) - Building visualizations with D3.js

Friday 17/01/2020 13:30-15:30

<img src="img/chart-margin.png" height=50> 

var margin = {top: 20, right: 10, bottom: 20, left: 10};

var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

Assignment: draw a red rectangle (like the gray one above) in the center of the page (using margin, width and height).

SOLUTION

Bar chart SVG

<img src="img/bar-chart.png" height=50>

Assignment: build a bar chart with a random dataset

SOLUTION

Line chart SVG

<img src="img/line-chart-path.png" width=400>

Assignment: build a line chart using a simple JSON temporal dataset add circles for each time point.

[{"id" : 1, "name": "A", "value": 10, "date": "2016-01"}, {"id" : 2, "name": "B", "value": 30, "date": "2016-02"}, {"id" : 3, "name": "C", "value": 20, "date": "2016-03"} ]

SOLUTION

Scatterplot SVG

<img src="img/scatterplot.png" width=400>

Assignment: build a scatterplot using the Iris dataset and load the chart using a function that takes the chart visual mapping and dimensions as input parameters.

SOLUTION

Tutorial 2 (2/2) - Building visualizations with D3.js

Friday 17/01/2020 15:45-17:45

Axis | SVG

<img src="img/chart-axis.png" width=400> 

var xAxis = d3.axisBottom()
    .scale(x);

var yAxis = d3.axisLeft()
    .scale(y);

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)

Interaction

Legends

Multiple views

Assignment: build a coordinated scatterplot matrix using the Iris dataset.

Submit the blockbuilder link to submit here at the end of the class (17h45)

📅 For next class (24/01/2020)

Lecture 3 - Advanced D3.js and Layouts

Friday 24/01/2020 13:30-15:30

Tutorial 3: More D3.js grouping and layouts

Friday 24/01/2020 15:45-17:45

{symbol: "MSFT", date: Sat Jan 01 2000 00:00:00 GMT+0100 (CET), price: 39.81}
{symbol: "MSFT", date: Tue Feb 01 2000 00:00:00 GMT+0100 (CET), price: 36.35}
{symbol: "MSFT", date: Wed Mar 01 2000 00:00:00 GMT+0100 (CET), price: 43.22}

Assignment: Nest stocks by symbol and calculate aggregated values (max/min/sum) over price; parse dates.

Expected result:

0: {key: "MSFT", values: Array(123), maxPrice: 43.22, sumPrice: 3042.6}
1: {key: "AMZN", values: Array(123), maxPrice: 135.91, sumPrice: 5902.4}
2: {key: "IBM", values: Array(123), maxPrice: 130.32, sumPrice: 11225.13}

SOLUTION

Grouped bar chart |

<img src="img/grouped-bar-chart.png" width=400>

Assignment: build a grouped bar chart using the stocks.csv .

Start using random data

var n = 10, // number of samples
    m = 5; // number of series

var data = d3.range(m).map(function() { 
  return d3.range(n).map(Math.random); 
});

SOLUTION

Stacked bar chart

<img src="img/stacked-bar-chart.png" width=400>

Assignment: build a stacked bar chart using the stocks.csv .

0: {MSFT: 356.07999999999987, AMZN: 527.17, IBM: 1162.97, AAPL: 260.98, year: "2000"}
1: {MSFT: 304.17, AMZN: 140.87, IBM: 1163.6200000000001, AAPL: 122.11000000000003, year: "2001"}
2: {MSFT: 261.92, AMZN: 200.68, IBM: 901.4999999999999, AAPL: 112.89999999999998, year: "2002"}

SOLUTION

Animated transitions

Assignment (BONUS): build an animated transition between grouped bar chart and stacked bar chart.

<div>
  <label><input type="radio" name="mode" value="grouped" checked>Grouped</label>
  <label><input type="radio" name="mode" value="stacked">Stacked</label>
</div>

SOLUTION

📅 For next class (31/01/2020)

  1. Write a document for your project data cleaning and preparation: data source, data shaping, processing, etc. If you use external tools (e.g. Excel, DataWrangler, Tableau) add some details of the role and steps performed using those.

  2. Load a clean data sample using d3 and descriptive charts (histogram, scatterplot, ..) in a wepage showing the characteristics of the dataset: distribution, statistics, trends, etc. Add this link to your analysis in the class document (the page should be hosted on GitHub).

  3. Draw a mockup of your project using pen and paper and add this link to the class document (the page should be hosted on GitHub).

Lecture 4 - Advanced Layout, Data Cleaning and Case studies

Friday 31/01/2020 13:30-15:30

Tutorial 4: Geo-maps, design project setup

Friday 31/01/2020 15:45-17:45

Geo-Map | Example

<img src="img/geo-map.png" width=400>

Assignment: build a geo-map following those instructions.

SOLUTION

At the end of the tutorial:

📅 For next class (07/02/2020)

✍ Assignments

Lecture 5 - Graphs

Friday 07/02/2020 13:30-15:30

Node-Link Graph Example

<img src="img/node-link.png" height=100>

Assignment: starting with this Node link diagram that is based on force layout with different layouts: random, radial, line, line by category and encodings: color, size.

SOLUTION

Projects (1/3)

Friday 07/02/2020 15:45-17:45

Projects (2/3)

Friday 14/02/2020 13:30-15:30

Peer-review of other groups projects

Pre-Requirements:

Peer-review:

USE THIS FORM

Projects (3/3)

Friday 14/02/2020 15:45-17:45

You may also add the following header to your project:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>YOUR_TITLE</title>
    <meta name="description" content="Your Description">
    <meta name="author" content="Authors">
    <meta property="og:title" content="Your Title">
    <meta property="og:description" content="Your Description">
    <meta property="og:image" content="https://theo-jaunet.github.io/MemoryReduction/assets/thumbnail.png">
...
</head>

In the class document:

Projects: Final projects presentations & demos

Friday 21/03/2020 13:30-17:45

Each group has a 15min time slot (10min presentation, 5min questions) to present their project.

No slide: just show the visualization and tell a convincing story (e.g. don’t list features, etc.). Should address the following:

  1. Present context, dataset, data collection
  2. Describe key design decisions (visual mappings, interactions, animations, ..)
  3. Did the visualization help you find anything of interest in the dataset?
  4. Discuss technical challenges, limits, what you would have done with more time.

Add a README.md file in the repository organized as follows:

IMPORTANT – Regarding the dataset

As a general rule keep in mind the projects will be made public so anybody should be able to understand on their own and privacy of the datasets should be preserved.

Projects: Polish and final submission (autonomie)

Friday 28/02/2020 13:30-15:30

Projects: Polish and final submission (autonomie)

Friday 28/03/2020 15:45-17:45

Final project is due

Exam

Wednesday 11/02/2020

Online resources

Tableau Software

D3.js

SVG

Git/GitHub

JavaScript

Data Visualization Classes

Blogs

Books

Graphics/Journals

Color

Misc