Data Visualization

• 2020 Autumn @ SZU, 14:15 - 16:40 Every Monday, Huizi Building C-311, Cojoined with GISWeb Programming (10:15 - 12:25 Every Thursday)

• 2019 Autumn @ SZU, Every Friday, Cojoined with GISWeb Programming

Course Learning Outcomes

After taking this course, I hope:

• Theoretically, (1) I will introduce the data (especially spatial data) visualization method and (2) demonstrate the power of visual analytics in data (especially spatial data) analysis. After taking this course, you will be able to (3) assess visual representations according to design and perceptual principles and (4) select appropriate visualization methods for a given combination of data type and intended analysis task.

• Practically, we will learn how to (1) use visualization toolkits (e.g., Tableau, Python) as well as (2) design and implement static and interactive visualizations.

Weekly Schedule Summary

• 📙 📙 Week 1: Introduction: The Value of Visualization 📙 📙

  • Brief: data, what and why visualization, goals of visualization research

  💜 Slides https://github.com/deardeer/VISCourse_2019/blob/master/slides/L1_introduction_vis.pdf

  • Exercise: Week 1 - Tableau Installation, Development environment installation

  💛 Tableau Installation https://github.com/deardeer/Data_Visualization_Course/blob/master/exercise/tableau_install.pdf

• 📙 📙 Week 2-1: Human Perception and Information Processing 📙 📙

  • Brief: visual channels (color, shape, texture, position, orientation, etc.), design variables

  💜 Slides https://github.com/deardeer/VISCourse_2019/blob/master/slides/L2_perception.pdf

  • Exercise: Week 2 - HTML, SVG Basics, Javascript Introduction: Draw a rectangle

  💛 Exercise Note https://github.com/deardeer/VISCourse_2019/blob/master/exercise/L1/L1_basic.md

  💛 Code https://github.com/deardeer/VISCourse_2019/tree/master/exercise/L1

  💛 Exercise Note & Code https://github.com/deardeer/VISCourse_2019/tree/master/exercise/L2-dataselection

  • Learning Materials: HTML, SVG Basics

  💛 SVG: https://www.runoob.com/svg/svg-inhtml.html

  💛 Javascript https://www.runoob.com/js/js-tutorial.html

  • Mini-Assignment (20%): Dear-Data project

• 📙 📙 Week 2-2: Data & Visual Encoding 📙 📙

  • Brief: data types (high dimensional, network, temporal, spatial, textual | numerical, ordinal, categorical), analysis tasks (e.g., filter, query, select, compare, etc.), visual analytics systems (tableau, Jigsaw, etc.)

  💜 Slides https://github.com/deardeer/VISCourse_2019/blob/master/slides/L3_visualencoding.pdf

  • Exercise: Week 3 - Driven by data: Draw rectangles

• Week 4: Data Representation: Classic Visualizations

  • Brief: scatterplot (high dimensional data), timelines (temporal), treemap (hierarchy), graph (network), map (spatial)

  Slides https://github.com/deardeer/VISCourse_2019/blob/master/slides/l4_chart.pdf

  • Assignment: Week 4 - Make It Interactive // Web Infrastructure, Web-based Visualization Programming [Good/Bad Visualization Review, 10%]

• Week 5: Facet Into Multiple Views: Manipulate Single/Multiple Views, Interactions

  • Brief: cooperation mechanism between multiple views, multiple-view systems

  Slides https://github.com/deardeer/VISCourse_2019/blob/master/slides/l5_exploratory.pdf

  • Assignment: Week 5 - Final project preview, form a team

• Week 6: Data Analysis Methods

  • Brief: data analysis method, including Reduction via Aggregation and Filtering

  • Assignment: Week 6 - Client-server framework set up, data analysis modules [Interactive Visualization Prototyping 20%]

  Exercise Note & Code https://github.com/deardeer/VISCourse_2019/tree/master/exercise/L3-webapp

  Exercise Note & Code https://github.com/deardeer/VISCourse_2019/tree/master/exercise/L4-axis

• Week 7: Cartographic Visualization: Spatial Data & Map

  • Brief: map, scaling, symbols, third dimensional representation (e.g., temporal)

  Slides https://github.com/deardeer/VISCourse_2019/blob/master/slides/l7_map.pdf

  • Assignment: Week 7 - Final project discussion

  Exercise Note & Code Echarts: https://www.echartsjs.com/en/index.html

  Exercise Note & Code Bootstrap: https://getbootstrap.com

• Week 8: Midterm: Project Interface Design Preview [20%]

  • Brief: visualization resources (data, toolkits), possible topics, form groups, discuss and propose final project
  • Assignment: Week 8 - Final project design presentation, and evaluation

• Week 9: Rules of Thumb

  • Brief: design effective visualization, lying in visualization
  • Assignment: Week 9 - Project Implementation Q & A

• Week 10: Temporal Visualization

  • Brief: temporal data, timeline visualization, animation

  Slides https://github.com/deardeer/VISCourse_2019/blob/master/slides/l8-time.pdf

  • Assignment: Week 10 - Project Implementation Q & A (Temporal Visualization)

• Week 11: Text Visualization

  • Brief: textual data, text visualization

  Slides https://github.com/deardeer/VISCourse_2019/blob/master/slides/l9_text.pdf

  • Assignment: Week 11 - Project Implementation Q & A (Text Visualization)

• Week 12: Network & Tree Visualization

  • Brief: structural dataset, networks, tree

  Slides https://github.com/deardeer/VISCourse_2019/blob/master/slides/l10_treegraph.pdf

  • Assignment: Week 12 - Project Implementation Q & A (Network/Tree Visualization)

• Week 13: High Dimensional Data Visualization

  • Brief: high dimensional data, parallel coordinates, scatterplot matrix

  Slides https://github.com/deardeer/VISCourse_2019/blob/master/slides/l11-highdimension.pdf

  • Assignment: Week 13 - Project Implementation Q & A (High Dimensional Visualization)

• Week 14: Animation

  • Brief: motion, and its usage
  • Assignment: Week 14 - Project Implementation Q & A (Animation)

• Week 15: Advanced Topics in Spatial Visualization & Interactions

  • Brief: state-of-art research in spatial visualization and interactions
  • Assignment: Week 15 - Project Implementation Q & A

• Week 16: Final Project Poster & Demo Session (I) [40%]

• Week 17: Final Project Poster & Demo Session (II)

Reference

This course is greatly inspired by following researchers. Thanks!

• Joel Lanir, Haifa University

2. Resource Reference:

• Visualization resources: https://courses.cs.washington.edu/courses/cse512/19sp/resources.html

Encouraged Reading:

• Mike Bostock's blog (D3's creator): https://bost.ocks.org/mike/

Tools to Explore

• Observable: notebook for visualization: https://observablehq.com/