Romain Vuillemot, LIRS/MI École Centrale de Lyon, Site Web, Twitter.

Contact or questions: [email protected]

Interactive Data Visualization for the Web by Scott Murray

• 30% Final exam
• 60% Final projects
• 10% Homeworks/Submitted assignments (pass/fail policy)
• 10% Bonus (class participation, best homeworks/assignments)

Friday 12/01/2018 13:30-15:30

• Overview: Class organization, learning paths (slides)
• Basics of Data Visualization: Perception, cognition, Visual mapping, Standard charts (slides)
• Authoring visualizations: Libraries, Tools, Tableau Software (slides)

Friday 12/01/2018 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. (Simple) alternative to Tableau: Polestar

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

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

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

Bonus

• For each previous dataset, provide an alternative visualization.
• Find a more complex stock dataset with OHLC attributes (Open, High, Low, Close) and visualize intra-day variations
• Find more time points and companies and re-produce the previous charts; adapt accordingly.
• Use other markets data (e.g. BitCoin)
• Use other tools, e.g. Vega Lite to visualize the above or your dataset

📅 For next class (19/01)

• Submit your Tableau workbook in this document,
• Reading: Chapter 1. Introduction , Chapter 2. Introducing D3 and Chapter 3. Technology Fundamentals
• Create a GitHub account and learn how to use it (bottom of the page)
• Pick a chart type in this document, and find online:
  • Historical examples, recent and/or most famous ones for your category
  • Comments: what you like or not in it (design critic like in class), possible visual variations, different names, different look and feel, tools used to create it, .. Minimul 10 charts with detailed analysis, but you are welcome to add more examples.
  • Document your sources; always give credits (e.g. link to orginal image, article and authors)
  • Create a github page and write your summary as a Readme.md document, put images in a /img/ folder. Add classic elements in your summary such as your name, etc.. and also the chart type you picked.
  • Add the link to your summary in this document before Thursday 18/01/2018 12h00 Lyon Time

Friday 19/01/2018 13:30-15:30

• Introduction to projects (slides)
• Feedback/discussion from homework #1
• Advanced data visualization concepts: Animation, Interaction, Multiple Views (slides)
• D3.js: Principles, Codes, Web Development (slides)

Friday 19/01/2018 16:15-18:15

We will use Block Builder http://blockbuilder.org/ (requires a GitHub account to save code, but no local install)

• Let's build a bar chart using SVG only (without D3)

• Let's build a bar chart with D3 without data binding

• Let's build a bar chart with D3 using data binding

• Let's build an interactive bar chart

• Let's build an interactive bar chart using a dataset

• Let's build an interactive line chart using a dataset

• Class example of combining rects and circles and interaction

📅 For next class (26/01)

• Build a scatterplot using the iris.csv dataset and Block Builder (submission form) using a different symbol for each species; and a regression line. Submit before Friday 26/01/2018 13h59 Lyon Time (solution)
• BONUS: build a scatterplot matrix
• BONUS: add a histogram in the matrix diagonal showing distribution for each dimension
• BONUS: add interaction: brushing on scatterplot, selection on histogram (or brushing too)
• Reading: Chapter 4. Setup, Chapter 5. Data, Chapter 6. Drawing with Data, Chapter 7. Scales.
• Project teams, datasets and projects descriptions proposal in this document
  • Project ID (e.g. TennisVis) + link to GitHub repository (using this ID)
  • Project full name, project description and members names
  • Data you plan to use, does it exist, if not how you collect it?
  • 3-5 questions you want to answer using your project
  • Wait for validation by instructor before any coding

Friday 26/01/2018 13:30-15:30

• Advanced D3.js: complex layouts, coordinated chart, animated transitions (slides)

• Sketching, Rapid Prototyping, Development cycles (slides) and using the Five Design Sheet methodology

Friday 26/01/2018 16:15-18:15

• Class exercises:

  • Filter this line chart with click on legend (solution for scatterplot)
  • Build multiple, coordinated scatterplot using the iris.csv dataset (solutions)
  • Buildgrouped bar chart and a stacked bar chart using the stocks.csv market data; and add an animated transition between both.

• Projects proposal discussion (group by group) & validation by instructor

📅 For next class (02/02)

• Add another transition to the grouped/bar chart example. Choose which one you think is relevant (e.g. better staggering, a third chart, use of color/opacity, etc.). Submit it as block making sure it is a secrete block! (submission link) Submit before Friday 26/01/2018 13h59 Lyon Time (solution)

• Each team submits their project design proposition (submission link)

  • Create a repository with projet ID
  • README.MD file that is a summary of the project
  • PROPOSAL.MD that is the project proposal that includes pictures img/ of the 5-design sheets
  • DATA.MD that contains the list of data sources, samples of datasets, data model, data pre-processing methods data/
  • index.html that is a hello world of your project
  • Add URL to the hello world in this document

• Reading: Chapter 8. Axes, Chapter 9. Updates, Transitions, and Motion , Chapter 10. Interactivity, Chapter 11. Layouts.

Friday 02/02/2018 13:30-15:30

• Feedback and solution from previous homework 3
• Complex data types, data structures (slides)
• Exercise: build a geo-map (credits)

Friday 02/02/2018 16:15-18:15

• Modern web development tools: local server, package managers (slides)
• Introduction to data cleaning tools and methods
• Feedback on projects, work on data cleaning and structure

📅 For next class (09/02)

• Submit the link to the GitHub repository you have created during the class and which contains your geo-map (submission link). Link should look like this one.
• Each project does a peer review of another groups' projects proposal (pick the one below you in this document) and write your review as a REVIEW.MD file in your project repository before Friday 09/02/2018 12h00 Lyon Time
• Each project write details on their dataset in their repository:
  • DATA.MD lists all the datasources and details (e.g. volume of the data, how the dataset was created, copyright, etc.)
  • PROCESSING.MD describes the cleaning and preparation process to clean and shape your date
  • create a index.html that loads in d3 (e.g. d3.csv, ..) a first dataset (or sample of the dataset or an exepected dataset you create yourself). This will push you to have a first

Friday 09/02/2018 13:30-15:30

• Brief intro to D3 and Canvas (example)

• Class exercises: fork this repository and focus on the sub-folder tp-node-links and the file index.html. The current version separates nodes in three random groups and highlight closest node to the mouse pointer. Add the following:

  • Group nodes by their group attribute (d.group).
  • Organize groups as a 2D grid (example) by adding a y scale.
  • Link nodes nodes using <line> element (example) by adding data to the graph.links array. Look at the links drawing function for the expected data structure.
  • Highlight links connected to the current node, and the target nodes.
  • Adjust the d3-force parameters (documentation) (example).
  • BONUS
    • Load The Miserable dataset instead of fake data
    • Group nodes by binning them using the d3.histogram() function

• Feedback on projets proposals & reviews

Friday 09/02/2018 16:15-18:15

• Work on projects

📅 For next class (16/02)

• Submit the link your graph (submission link)

• Keep working on the project

Friday 16/02/2018 13:30-15:30

• Work on projects

Friday 16/02/2018 16:15-18:15

• Work on projects

📅 For next class (02/03)

• URL of final project
• Project technical and design report

Friday 02/03/2018 13:30-15:30

Friday 02/03/2018 16:15-18:15

Tableau

• FAQ: How to learn Tableau
• Build standard charts with Tableau

D3.js

• Gallery of examples
• Code examples and references for the course "D3.js in Motion"
• Relearning D3.js
• D3 in depth
• Awesome D3
• http://vadim.ogievetsky.com/IntroD3/#1
• https://github.com/arnicas/d3-faq
• Changes in D3 4.0
• D3 V4 - What's new?
• Wide vs. Long Data in D3

SVG

• SVG2D3

Git/GitHub

• Git and GitHub (e.g. Try GitHub)
• https://agripongit.vincenttunru.com/
• https://onlywei.github.io/explain-git-with-d3/#freeplay
• https://learngitbranching.js.org/

JavaScript

• Mozilla Developers Network's Javascript reference
• Learn JavaScript (e.g. learnxinyminutes, learnjsdata)
• JSON (e.g. learnxinyminutes)
• Eloquent JavaScript
• (Notes on Douglas Crockford's Javascript the Good Parts 🚀 )[https://github.com/iteles/Javascript-the-Good-Parts-notes]

Data Visualization Classes

• http://dataviz.media.mit.edu/
• Visual Analytics Ecole Centrale Paris
• Dataviz resources http://www.cs.ubc.ca/group/infovis/resources.shtml
• https://curran.github.io/dataviz-course-archive/
• https://github.com/Ecohen4/data-viz
• https://github.com/arnicas/interactive-vis-course

Blogs

• http://www.thefunctionalart.com/
• http://eagereyes.org/
• http://visualisingdata.com/

Graphics/Journals

• http://www.bloomberg.com/visual-data/
• http://data.huffingtonpost.com/

Misc

• Command line tutorial
• https://egghead.io/lessons/debugging-with-dev-tools
• Design essay: Picturing the Great Migration