Data Visualization for React Developers
Learning Paths:
Topics:
Table of Contents
Introduction
Introduction
Shirley Wu introduces herself and the goals for the Data Visualization for React Developers course.
How to Navigate the 3 Workshops
Shirley talks introduces the three workshops she has created with Frontend Masters, what material they cover, and the order she recommends in taking those classes.
The Basic Chart Types
Introduction to Different Data Types
Shirley outlines the agenda for the course. Data types are introduced, as well as common charts and what data is best represented with them.
Pie Charts: Do's and Don't's
Shirley covers what a pie chart can show effectively with data, and when to avoid them.
Course Demonstration Review
Shirley reveals the data visualization project an aggregation of weather data charts that will be built throughout the course.
The Making of a Chart
Introduction to SVG
Shirley explains what a SVG is, the elements that it consists of, and its coordinate system.
Weather Data Chart Examples
Shirley investigates how to recreate the weather data charts with SVG rectangles and paths.
Data to SVG Shapes Exercise
The audience is instructed to inspect SVG charts in an an attempt to become familar with the format.
Data to SVG Shapes Solution
Shirley unveils several capabilities in the virtual notebook editor to update the SVG shapes.
Going from Data to SVG Shapes
Shirley introduces D3, and why D3's API may seem so intimidating. The scales and shapes modules are covered in detail in this section, because they allow the user to translate raw data to SVG shapes. A linear scale example is discussed, and other scales commonly used are covered.
Going from Data to SVG Exercise
The audience is asked to apply D3 scales to create a bar chart.
Going from Data to SVG Solution, Part 1
Shirley walks through the solution for Going from Data to SVG Exercise using D3's extent(), scaleTime(), scaleLinear(), and map() functions to map temperature data to a visual representation. - NOTE: Remove "ask for questions" remark by Shirley.
Going from Data to SVG Solution, Part 2
After building the chart solution, Shirley applies a color scheme using D3's scaleSequential(), and a D3 module used to provide a sequential color scheme.
Creating Line Charts
Shirley introduces d3.line() that outputs a path string necessary to draw line charts.
Creating Line Charts Exercise
In this exercise, the D3 line API is utilized to create a line chart.
Creating Line Charts Solution
Shirley walks through the Creating Line Charts Exercise.
Creating a Radial Chart
Shirley demonstrates how to generate a radial chart using D3's arc() function.
Radial Chart Exercise
Shirley explains the exercise on how to construct a radial chart, and gives a hint about how to approach the problem.
Radial Chart Solution
Shirley walks through the solution to the Radial Chart Exercise, and introduces color at the end.
Rendering with React
Breaking Down D3 API
Shirley reviews the data preparation, and the layout calculation portions of D3 API. In particular, why D3 is so powerful, tools to interact with the D3 Documentation, and several D3 libraries are introduced.
D3 Manipultations and Interactions
Shirley introduces DOM manipulation and Interactions within D3, where React will become useful.
React Renders
Shirley reviews the division of responsibilities, as well as where the data is calculated within the React application. When lecturing on where data is calculated, the pros and cons of getDerivedStateFromProps, Render, and componentDidMount & componentDidUpdate are examined. The assumptions are introduced, and main takeaways are also concluded.
React and Bar Chart Exercise
In this exercise, students draw a bar chart with React and D3.
React and Bar Chart Solution
Shirley live codes the solution to the React and Bar Chart Exercise, and then walks through the architecture of the app, including App.js.
React and Radial Chart Exercise & Solution
Shirley live codes how to implement a radial chart within a React project. A different way of implementing the SVG in the React project using componentDidUpdate()/componentDidMount() is also introduced.
The Finishing Touches
The Three Exceptions
Shirley discusses the last two portions of the API: the finishing touches, and interactions. The functions within D3 that need access to the DOM are covered, and words of caution are given when interating with the DOM.
Axes, Legends, & Annotations
Shirley dicusses how to implement axes in React to make your SVG visual aids more meaningful.
Axes Exercise & Solution
In this exercise, Shirley walks through the incorporating axes into the bar chart that was previously created with React.
Transitions
Shirley gives the recommendation that React not manage the attributes D3 is transitioning. Reasoning, and alternatives are given to bypass this issue.
Brush
Shirley introduces brush() from D3, which allows the user to highlight graphs and return data for mouse and touch events using SVG.
Brush Exercise & Solution
After discussing how to implement D3 brush, Shirley live codes an example showing how to add brush interactivity to a chart.
Additional Resources
Shirley introduces D3 legends and annotation functions, and additional resources that help with readability of your visual aid.
Canvas
Shirley introduces canvas for working with large datasets in data visualizations.
Creating Charts in Canvas
After reviewing how to create a bar chart in canvas, Shirley shows how to generate a radial chart in canvas with D3.
Questions & Wrapping Up
After answers a question about possibility of implementing D3 brush() in canvas, and the application of brush() in a radial chart, Shirley wraps up the course and thanks the students for attending.