Building Custom Data Visualizations
Table of Contents
IntroductionShirley 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 ExpositoryShirley 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 AgendaShirley gives the roadmap for how the course is structured.
Exploring the DatasetShirley 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 ExerciseShirley 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 1Shirley 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 2Shirley records the potential questions from the previous section, and gathers more questions and hypotheses around that dataset that seem interesting.
Chart Types & Vega-LiteTo 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 ExerciseIn 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 1Shirley reviews the audience's brainstorming chart sketches that explore potential ideas to visualize the data.
Chart Brainstorming Solution, Part 2While using a chart idea from the previous exercise, Shirley demonstrates the process of generating a scatterplot visualization in Vega-Lite.
Chart Brainstorming Solution, Part 3Shirley 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 4Shirley reviews another student's brainstorming sketch and transforms the idea into a Vega-Lite line chart.
Using Modules in ObservableShirley 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 HeatmapShirley demonstrates how to generate heatmaps with Vega-Lite displaying the release date and genre of blockbuster movies.
Exploration ExerciseShirley 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.
Marks & ChannelsOnce 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.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 GroupingShirley 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 & OverlayShirley urges gaining inspiration from work that has done before rather than attempting to start from scratch.
Design ExerciseIn this exercise, the audience is asked to brainstorm a complete data visualization idea, including a main message, marks, and channels.
Design Solution, Part 1Shirley reviews sketches from students and discusses their messages they want to convey in their designs.
Design Solution, Part 2Shirley introduces the graph that will be built throughout the rest of the class.
Turning Designs into CodeShirley 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 LayoutsShirley 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 ExerciseThe premise of this exercise is to code a D3 chart based on sketch by Shirley using the movie dataset.
Code Solution, Part 1After 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 2Continuing with the previous coding solution, Shirley refines her chart by adding curves and a color scheme.
The Finishing Touches
ReadabilityShirley 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 & SolutionIn 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 AestheticsShirley 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 1In 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 2After adding textures to the chart, Shirley instructs on how to add drop shadows to the movie titles.
InteractionsShirley 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.
Exploratory VisualizationsThe 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 ResourcesAfter listing many data visualization resources for the audience to utilize, Shirley wraps up the course by thanking contributors, her beta testers, and the audience.