Skip to content

Latest commit

 

History

History
270 lines (182 loc) · 15.3 KB

README.md

File metadata and controls

270 lines (182 loc) · 15.3 KB

Interactive Data Visualization (Centrale Lyon Digital Lab)

Romain Vuillemot, LIRIS, École Centrale de Lyon/Département Math-Info, http://romain.vuillemot.net/, @romsson.

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

Reading

Interactive Data Visualization for the Web
by Scott Murray

Other books

More details/resources check out MOS 5.5 Interactive Data Visualization

Grading

  • Mini-project

Submissions

All homeworks/assignements/reports should be submitted using this document.

Lecture 1 - Introduction to Data Visualization

Monday 9 sept. 2019 morning

  • Overview: Class organization (slides)
  • Basics of Data Visualization: Perception, cognition, Visual mapping, Standard charts (slides)
  • Authoring visualizations: Libraries, Tools, Tableau Software (slides)
  • Standard chart + Time/Geo charts (slides)

Exercice 1 - Tableau Software

Monday 9 sept. 2019 morning

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

🏆 Extra

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

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, ..)

📖 Readings

Lecture 2 - Standard Charts and Introduction to D3.js

Monday 9 sept. 2019 morning/afternoon

  • Advanced data visualization concepts: Animation, Interaction, Multiple Views (slides)
  • D3.js: Principles, Codes, Web Development (slides)

Exercice 2: D3.js

Monday 9 sept. 2019 afternoon

🏆 Extra

📅 For next class (10/09): pick a dataset

  • Pick an interesting problem (e.g. what is the student progression in class over time? how climate changes over years? which soccer teams performs the best in Ligue 1?)
  • Find the corresponding dataset (or build it yourself) but should remain fairly small (~50 rows and 3 to 4 columns) with at least a few quantitative values
  • Find related questions to this problem that can be answered by visualizing your dataset
  • Add it to this document

Lecture 3 - Advanced D3.js and Design Methods

Tuesday 10 september 2019 morning

Discussion on datasets and questions

  • Sketching, Rapid Prototyping, Development cycles (slides)

  • Advanced layouts (slides)

  • Case studies (slides)

  • The Five Design Sheet methodology

  • Read principles of the Five design sheets methodology

  • Apply it to your project (paper and pen!) by sketching the organization of the page and the visualizations.

NOTE: you may need to perform a data analysis process of your project dataset (or expected dataset) using D3 or Tableau: load data from an external file (CSV, JSON), create a first chart characterising the distribution of the dataset (e.g. time series, bar chart, ), scatterplot. Add the link to your analysis in the class document.

Mini-Projet : Your own visualization

Wednesday 17 september 2019 morning

  • Complete building your visualization project
  • Add it in this document.
  • Feedback and presentation
  • 🎉

🏆 Extra

  1. Grouped bar chart chart using the stocks.csv dataset and d3.nest

BONUS: multiple foci and solution

Online resources

Tableau

D3.js

SVG

Git/GitHub

JavaScript

Data Visualization Classes

Blogs

Graphics/Journals

Color

Misc