Building Custom Data Visualizations
Learning Paths:
Topics:
Table of Contents
Introduction
Introduction
Shirley Wu introduces Building Custom Data Visualization workshop. Shirley talks about the three workshops she has created with Frontend Masters, and the order she recommends in taking those classes, as well as her thoughts while creating this course.
Exploratory and Expository
Shirley discusses the two significant categories of custom data visualizations: exploratory and expository. It's explained why we will be using expository examples today, but that they are easily transferrable to exploratory data visualizations.
Course Agenda
Shirley gives the roadmap for how the course is structured.
Data
Exploring the Dataset
Shirley goes through the steps that she takes when approaching a new dataset to turn into a data visualization. Observable Notebook is introduced, and a short instruction on how to use it is given.
Dataset Exercise
Shirley briefly goes over the different data types. To understand a dataset, students go through and writing down the data attributes and listing some data comparisons that may yield interesting results.
Dataset Solution, Part 1
Shirley works through the dataset by listing the data type for each of the useful data attributes, then listens to the audience's suggestions for worthwhile questions about the data to explore.
Dataset Solution, Part 2
Shirley records the potential questions from the previous section, and gathers more questions and hypotheses around that dataset that seem interesting.
Chart Types & Vega-Lite
To help figure out the best way to explore questions from the datasets, Shirley reviews common chart types that lend themselves well to the data types discussed earlier, and a tool called Vega-Lite that helps with graphing the data for exploration.
Chart Brainstorming Exercise
In this exercise, the audience is instructed to brainstorm and sketch possible chart types that will aid in answering questions they have about the data.
Chart Brainstorming Solution, Part 1
Shirley reviews the audience's brainstorming chart sketches that explore potential ideas to visualize the data.
Chart Brainstorming Solution, Part 2
While using a chart idea from the previous exercise, Shirley demonstrates the process of generating a scatterplot visualization in Vega-Lite.
Chart Brainstorming Solution, Part 3
Shirley leads a discussion about what are some interesting aspects of the chart that, through further exploration, may lead to interesting results.
Chart Brainstorming Solution, Part 4
Shirley reviews another student's brainstorming sketch and transforms the idea into a Vega-Lite line chart.
Using Modules in Observable
Shirley introduces how to require modules in Observable, and demonstrates how the module require debugger tool works for modules that are more difficult than others.
Using Heatmap
Shirley demonstrates how to generate heatmaps with Vega-Lite displaying the release date and genre of blockbuster movies.
Exploration Exercise
Shirley reviews the methods that she went through to explore the data that the audience had previously done, and the thought process throughout. The audience is asked to jot down a few points they though were interesting, and things they think are important to keep in mind when exploring datasets. Further advice is given when exploring a dataset.
Design
Data Exploration
Once a question or hypothesis is answered, or something interesting is found, Shirley suggests to build a story around that theme thinking through how to translate that story into visual encodings.
Marks & Channels
In this section, the design of the visualization is also introduced. Shirley explains what marks and channels are, how they differ, and then introduces the impacts of the various channels. Within this section, Tamara Munzer's Visualization Analysis and Design is referenced as the inspiration for many of Shirley's points.
Gestalt Laws of Grouping
Shirley covers the Gestalt principles of proximity, similarity, and exclosure that help explain how to utilize how the brain processes patterns for designing data visualizations.
Remix & Overlay
Shirley urges gaining inspiration from work that has done before rather than attempting to start from scratch.
Design Exercise
In this exercise, the audience is asked to brainstorm a complete data visualization idea, including a main message, marks, and channels.
Design Solution, Part 1
Shirley reviews sketches from students and discusses their messages they want to convey in their designs.
Design Solution, Part 2
Shirley introduces the graph that will be built throughout the rest of the class.
Code
Turning Designs into Code
Shirley explains the two parts to turning designs into code, which are drawing the geometric shapes, then translation from the data into their various channels.
D3 Shapes and Layouts
Shirley points out key portions of the D3 API that assist in data preparation, layout calculation, and user interactions. Applications of these concepts created by Shirley (and others) are demonstrated to help the audience understand the process of understanding in what way the data is best represented before approaching the D3 library for a solution.
Code Exercise
The premise of this exercise is to code a D3 chart based on sketch by Shirley using the movie dataset.
Code Solution, Part 1
After explaining the distribution of the data, and introducing D3 Areas as the main method to form the visualization, Shirley live codes the chart solution.
Code Solution, Part 2
Continuing with the previous coding solution, Shirley refines her chart by adding curves and a color scheme.
The Finishing Touches
Readability
Shirley stresses the importance of readability in data visualizations. Shirley references several D3 Libraries created by Susie Lu that aid in readability by providing context in the way of axes and annotations.
Readability Exercise & Solution
In this exercise, Shirley demonstrates how to use the libraries mentioned in the previous video to add axes, and annotations to the movie visualization chart for improved readability.
Adding Aesthetics
Shirley offers other ways to add aesthetics into charts with patterns, gradients, textures, SVG filters, and others. The work of Nadieh Bremer is introduced to help give context to the importance of these aspects.
Adding Aesthetics Exercise & Solution, Part 1
In this exercise, Shirley uses the Gestalt laws to strategically add texture using the textures.js library to the movie data visualization.
Adding Aesthetics Exercise & Solution, Part 2
After adding textures to the chart, Shirley instructs on how to add drop shadows to the movie titles.
Interactions
Shirley introduces interactions through D3. Simple interactions can be done with D3 alone, but more complex interactions have to have React (or similar) as an aid.
Wrapping Up
Exploratory Visualizations
The process of the creation and utilization of SVG data visualizations at Netflix outlined in this section. Shirley gives sage advice that has been gained through working with the complex problems that have been encountered.
Additional Resources
After listing many data visualization resources for the audience to utilize, Shirley wraps up the course by thanking contributors, her beta testers, and the audience.