Data Visualization Online @ WPI 2018
Update: Check out the 2020 version of this course here:
https://datavis.tech/datavis-2020/
I’m teaching an online Data Visualization course this Fall at Worcester Polytechnic Institute. Many students are remote and transfer credit from WPI to other universities. So, graduate students from any university are welcome and encouraged to enroll (CRN 12105 Course: CS 573 1960). The course starts August 23 and is capped at 50 students, so enroll now!
In this course, you’ll learn how to transform data into meaningful graphical forms with Data Visualization. We’ll be creating visualizations using exclusively D3.js and Web technologies. We will not be using any Python or R in the course. You will need to learn and use modern JavaScript, HTML, and CSS. If you know other programming languages this transition will probably be pretty smooth, as these topics will be covered early on in the course. However if you have no programming background at all, is it not recommended you join this course.
Here are some videos and links that give a feel for the course:
- Intro to VizHub (the online coding tool we’ll be using)
- All lecture videos from last year’s course
- All content from last year’s course
Course Content
The first part of the course will be about Static Visualizations. We’ll cover the fundamentals of both visualization design and D3.js. In order to get to work using D3.js, we’ll also cover Web development concepts in just enough detail to start using them, including JavaScript (ES6), CSS, and HTML.
A taxonomy of data types and attribute types will be presented from our excellent textbook Visualization Analysis and Design, with an orientation towards implementation of these concepts in D3.js. Visual Marks and Channels will also be covered, including how to best match attribute types to channels, rankings based on perception, and concepts particular to use of color. Each channel will be discussed alongside an introduction of the parts of D3.js required to utilize the channel. D3 Scales and Axes will be covered comprehensively.
A relatively comprehensive inventory of visualization idioms will be presented, including Bar Chart (and its variants, horizontal, stacked, grouped), Pie Chart, Rose (Coxcomb) Plot, Scatter Plot, Line Chart (single line, multiple lines), Area Chart, Stacked Area Chart, StreamGraph, Choropleth Map, Bubble Map, Pie Charts on a Map, Treemap, Icicle Plot, and Sunburst Plot. Lastly, the concept of Small Multiples will be introduced, which can be applied to any visualization idiom.
The second half of the course will be about Interactive Visualizations. Firstly, interactions within a single view will be covered, including Tooltips (with Voronoi Overlay in certain cases), Picking, Highlighting, Annotating, Changing Attributes, Pan & Zoom, Brushing, and integration with traditional user interface elements for changing visual encoding or interactive filtering.
The General Update Pattern of D3.js will be covered in depth, as this is required for dynamic visualizations. Also, encapsulation of visualizations as reusable modules. Dynamic and encapsulated variants of the visualization idioms presented in Part I will be presented.
Next, interaction patterns for multiple views will be covered, including Linked Highlighting, Crossfiltering, and Linked Navigation. Finally, considerations unique to the Web environment will be discussed, including features such as Deep Linking, Embedding, Responsiveness, and fetching data on demand.
Part I — Static Visualizations
- Why Visualize Data
- Input for Visualization: Data and Tasks
- Data Categories: Tables, Cubes, Networks, Trees, Geospatial
- Attribute Types: Categorical, Ordinal, Quantitative
- Special Cases: Time, Geography, Latitude, Longitude
- Loading and Parsing Data Tables with D3.js
- Fundamentals of Scalable Vector Graphics
- Marks: Points, Lines, and Areas with D3.js and SVG
- Channels: Position, Length, Size, Shape, Color
- Color: Hue, Saturation, Luminance
- Mapping attribute types to channels effectively
- D3 Scales: Continuous, Ordinal, Sequential and more
- D3 Geographic Projections
- Scatter Plot and Bubble Chart
- The Margin Convention
- Axes and Axis Labels
- Color and Size Legends
- Bar Chart, Stacked and Grouped
- Pie Chart and Coxcomb Plot
- Line Chart, Single and Multiple Lines
- Area Chart, Stacked Area Chart, and Streamgraph
- Geographic Data with D3.js
- Line Simplification for Reducing Data Size
- Choropleth Map
- Bubble Map
- Hexbinning
- Pie Charts on a Map
- Loading Hierarchical Data with D3.js
- Node-Link Tree Layouts
(tidy, cluster, horizontal, vertical and radial variants)
- Treemap
- Icicle Plot
- Sunburst Plot
- Small Multiples
Part II — Interactive Visualizations
- The General Update Pattern
- Animated Transitions
- Encapsulation of Reusable Dynamic Components
- Unidirectional Data Flow
- Philosophy: Everything Arbitrary is Configurable
- Standard Visualization Idioms
- Geographic Visualization Idioms
- Hierarchical Visualization Idioms
- Small Multiples
- Picking Marks by Hovering or Clicking
- Using a Voronoi Overlay
- Annotating on Hover with Tooltips
- Highlighting Picked Marks
- Pan & Zoom
- Brushing
- Responding to Resize
- Text Input (e.g. Edit Axis Labels)
- Color Picker (e.g. Edit Color Scale)
- Slider (e.g. Edit Radius)
- Dropdown Menus (e.g. Change Attributes, Filter)
- Displaying Multiple Views
- Linked Highlighting
- Crossfiltering
- Linked Navigation
- Responsiveness
- Embedding
- Deep Linking
- Using Data APIs
- Limitations of SVG
- SVG Alternatives: Canvas, WebGL, Tile Maps
In Summary
This course will illuminate both concepts in visualization design as well as the implementation details for these concepts. For academic and professional settings alike, this course can serve as a guide to the concepts, algorithms, and D3 APIs required to practice effective interactive Information Visualization. The course is relevant in general wherever data exploration, data-driven decision making, or data presentation is needed.
Admittedly, the content outline may be a bit ambitious for a 10 week online course. I’ll need to cover about 6 of those bullet points each week. However, I think it’s possible. I will strive to hit all the topics mentioned in at least some detail.
The plan is to deliver the lectures as public YouTube videos, and make the resulting code Open Source (MIT License). These videos will be screencasts of live-coding mixed with lecture-style presentations of slide decks, and maybe even some Whiteboard Jazz! The resulting implementations will be published on VizHub, and the student assignments/projects will involve forking and modifying those example implementations.
I’m really excited to launch the course this time around. If you’re a graduate student and can make it happen, enroll in the course!
