CSE 5544: Introduction to Data Visualization

AU 2020 (online)

Instructor: Prof. Han-Wei Shen
Class: WF 11:10 AM - 12:30 PM via ZOOM
Office Hour: WF 1:00-2:00 PM via ZOOM

o   ZOOM link: Meeting ID: 93020188911

o   https://osu.zoom.us/j/93020188911?pwd=NEovYWlpNkI3aW9xcnpucFA3TE5WUT09

o   Passcode: 0789

Course Syllabus: pdf

TA: Ziwei Li (li.5326@osu.edu)
Office Hour:

 

Health and safety requirements: All students, faculty and staff are required to comply with and stay up to date on all university safety and health guidance (https://safeandhealthy.osu.edu), which includes following university mask policies and maintaining a safe physical distance at all times. Non-compliance will be warned first and disciplinary actions will be taken for repeated offenses.” (Updated: Aug. 14, 2020)

 

Is your goal to learn 3D graphics and GPU/shader programming?

Consider taking CSE 5542 instead.

Textbooks

Main Textbooks:

·  Visualization Analysis & Design, Tamara Munzner, CRC Press (VAD)

·  Visual Thinking for Design, Colin Ware, Elsevier (VTD>

·  Semiology of Graphics, Jacques Bertin, esri Press (SoG>

Reference books:

·  The Grammar of Graphics,Leland Wilkinson, Springer, 2nd edition (GoG)

·  Interactive Data Visualization for the Web: An Introduction to Designing with D3, Scott Murray, O’REILLY

 

Course Topics

• First thing first: How is this data visualization course different from other similar courses offered on campus?
• A simple answer: this is a computer science course so you will learn not just design principles and how to use some existing software...
• You will learn how to develop visualization software!!
• Software
• Python, Pandas, and Matplotlib
• javascript and D3
• ParaView and VTK
• If you want to learn OpenGL/WebGL, this is taught in CSE 5542, not here.
• Tableau
• Foundations of data visualization
• Visual perception
• Information analysis and visual variables
• Data and task abstraction
• Information visualization
• Tables, networks, and trees
• Interaction and manipulation
• Scientific visualization
• Scientific models
• Scalar field visualization
• Vector field visualization

How your grade is calculated

Assignment category	Points
5 Lab assignments	60
Class participation and/or quiz	10
Midterm project or paper	15
Final project	15
Total	100

 

 

---

Lecture Slides and Related Materials

1.     Overview (8/26 video)

2.     Human – How do we see the world? (8/28, 9/2-1, 9/2-2 videos)

3.     Introduction to Pandas

4.     Data (9/4, 9/9, 9/11 videos)

5.     Marks and Channels (9/11 video)

6.     Visual Variables (9/16,  9/18 9/23 video)

7.     Grammar of Graphics (9/23 video)

8.     Task Abstraction (9/25 video)

9.     Introduction to D3  (9/30 video)

---

Lecture Video Collection

8/26, 8/28, 9/2-1, 9/2-2, 9/4, 9/9, 9/11, 9/16, 9/18, 9/23, 9/25, 9/30,

---

Course schedule

Week Schedule	Topics
1	·       Course overview  and Introduction to Visualization ·       Visual queries and visual perception ·       Python data processing o   Language basics o   Python/Pandas
2	·       Visual perception continued ·       Python data plotting with Matplotlib ·       Lab1 assigned
3	·       Analysis of information ·       Javascript D3 - I o   HTML/CSS/SVG/D3 o   Manipulation of DOM
4	·       Data abstraction, visualization marks and channels ·       Javascript D3 - II o   D3 data reading and processing o   D3 rendering o   D3 axis, scale, and transformation  ·       Lab2 assigned
5	·       Task abstraction ·       Visualization of tables, networks, and trees ·       Javascript D3- III o   D3 layouts o   D3 interaction and transition
6	·       Manipulation of Visualization o   Change of Visualization o   Multi-facetted o   Reduce o   Embedding ·       Lab 3 assigned
7	·       Validation of Visualization ·       Multidimensional visualization ·       Javascript D3 - IV ·       D3 advanced features
8	·       Advanced topics in information visualization ·       Midterm  project/paper starts
9	·       Introduction to scientific data visualization o   Scientific data models o   Basic visualization techniques Visualization with ParaView
10	·       Scalar visualization techniques – Isosurface ·       Software Implementation or VTK Lab 4  assigned
11	·       Scalar data visualization techniques – Volume rendering ·       Software Implementation or VTK
12	·       Vector data visualization techniques o   streamlines and pathlines o   Vector field topology ·       Software Implementation or VTK ·       Form final project team and topics
13	·       Advanced topics in Scientific Visualization: information theory for visualization
14	·       Final project proposal presentations
15	·       Information theory for visualization (cont’d) ·       Final project presentation

 

---

Python and D3 Information

• Overview of python for data processing (download the ipython notebooks and run in your local system)
• Python ( ipython notebook )
• Pandas ( ipython notebook )
• Matplotlib ( ipython notebook )
• my python overview youtube video ;
• matplotlib overview youtube video
• Introduction to D3
• A complete list of sample code and slides can be found in this GitHub repo.
• A brief overview of D3 that I created a while ago
• A condensed slide set (for 80 mins presentation) that covers the most essential components of D3
• Introduction to HTML/CSS/SVG/D3 ( Examples in the slides)
• Manipulation of DOM ( Examples in the slides)
• D3 Data Binding and Loading ( Examples in the slides) ; csv reading example, javascript, circles.csv
• D3 Shapes ( Examples in the slides)
• D3 Scales ( Examples in the slides)
• D3 Axes ( Examples in the slides)
• D3 Layouts ( Examples in the slides)
• Hierarchical D3 Layouts ( Examples in the slides)
• D3 Interactions ( Examples in the slides)
• Force directed layout ( Examples in the slides)
• Geographical maps ( Examples in the slides)
• Transitions ( Examples in the slides)
• Mike Bostock's how D3 selections work
• Another good D3 site: D3 in depth
• A folder that contains some (very simple) sample D3 programs. Click on any *.html file to run
•  

·       D3: Tutorials and book

• D3 Tutorial
• D3 youtube tutorial
• D3 tutorial created by Wenbin He Link
•  

·       D3 example to test your browser

• Click on this ohio state link to test whether your web browser can run D3.
• Test if your local web server and D3 are properly set up:
• Run the command shell, go (i.e., cd) to a folder where you want to start a local web server. For example, a folder that you will put your D3 Code.
• Type in this command (I assume you already have python installed) : python -m SimpleHTTPServer 8888 in python 2.7 or python -m http.server 8888 in Python 3
• Run your browser and type in the address: http://localhost:8888 and you should see the local files and folders where you start your browser.
• Download this zip file, unzip it and put it in your folder where you start your browser.
• Go to the appropriate foler, find the file, svg_scatterplot.html, and click on it to run. You should see the same result as what you will see when you click on the ohio state link above.

OSU D3 Lecture Slides

• A brief overview of D3 that I created a while ago
• Introduction to HTML/CSS/SVG/D3
• Another good D3 site: D3 in depth
• A folder that contains some (very simple) sample D3 programs. Click on any *.html file to run

Lab and Project Assignments

 

 

IEEE SciVis design contest between 2004-2018

• 2018 Deep Water Asteroid Impacts
• 2017: Clouds and Atmospheric Processes
• 2016: Particular Ensembles
• 2015: Visualize the Universe
• 2014: Volcanic eruptions and their atmospheric aftermath
• 2013: Allen Developing Mouse Brain Atlas
• 2012: Computational material science
• 2011: Stability Visualization of Fluid Dynamics
• 2010: Advanced Visualization for Neurosurgical Planning
• 2009: Deferred to 2010
• 2008: Multifield 3D Scalar Data (Astrophysics turbulence simulation data)
• 2007: There was no contest in year 2007
• 2006: See What's Shaking (Earthquake simulation data)
• 2005: Rendering Revolution (DTI and Wind data)
• 2004: Visualization Fusion (Atmospheric data)
• First visualization design contest was held in year 2004

Useful Data Sources

• US Government's Open Data
• US Census Bureau
• Open Data Network
• A collection of small data sets
• FLOWINGDATA data sources
• Facebook Graph API
• New York Times Data Source API
• Google Public Data
• Youtube analytics API
• Lahman's baseball database (1871-2015)
• North Atlantic Population Project
• Minnesota Population Center
• UCI Machine Learning Repository
• Data Sets at Kaggle

Links to Interesting Visualization Articles

• Understand Immigrants from the banned nations
• 15 Data Visualizations That Will Blow Your Mind
• New York Times TheUpshot
• 30 places to get open data on the internet
• The Two Americas by New York Times
• Interesting Article: 39 studies of Human Perception in 30 mins.
• 2016 Data Visualization Checklist
• Some New York Time Articles contributed by FLOWINGDATA

Links to Interesting Visualization Examples

• What are the odds that you exist, today?
• 2016 Malofiej Winners - online
• Data Visualization Catalogue A great resource page that includes many visualization examples and the usage
• Multivariate Visualization
• Hans Rosling's 200 Countries, 200 Years, 4 Minutes - The Joy of Stats - BBC Four
• League of Legend
• Global Peace Index
• Heart Beat Before and After Marriage Proposal
• Visualization of Wimbledon 2013
• Visualization of World Cup all-time top scorers
• HistoMap - 4000 years of history in one map
• Land use for global population
• The flight of refugees around the globe
• Global biodiversity map
• F1 visualization
• 32 Maps that will teach you something new about the world.
• The world's languages, in 7 maps and charts.
• 40 more maps that explain the world.
• NCAA Football Fan Map.