Data Visualization for React Developers
Table of Contents
IntroductionShirley Wu introduces herself and the goals for the Data Visualization for React Developers course.
How to Navigate the 3 WorkshopsShirley 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 TypesShirley 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'sShirley covers what a pie chart can show effectively with data, and when to avoid them.
Course Demonstration ReviewShirley 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 SVGShirley explains what a SVG is, the elements that it consists of, and its coordinate system.
Weather Data Chart ExamplesShirley investigates how to recreate the weather data charts with SVG rectangles and paths.
Data to SVG Shapes ExerciseThe audience is instructed to inspect SVG charts in an an attempt to become familar with the format.
Data to SVG Shapes SolutionShirley unveils several capabilities in the virtual notebook editor to update the SVG shapes.
Going from Data to SVG ShapesShirley 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 ExerciseThe audience is asked to apply D3 scales to create a bar chart.
Going from Data to SVG Solution, Part 1Shirley 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 2After 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 ChartsShirley introduces d3.line() that outputs a path string necessary to draw line charts.
Creating Line Charts ExerciseIn this exercise, the D3 line API is utilized to create a line chart.
Creating Line Charts SolutionShirley walks through the Creating Line Charts Exercise.
Creating a Radial ChartShirley demonstrates how to generate a radial chart using D3's arc() function.
Radial Chart ExerciseShirley explains the exercise on how to construct a radial chart, and gives a hint about how to approach the problem.
Radial Chart SolutionShirley walks through the solution to the Radial Chart Exercise, and introduces color at the end.
Rendering with React
Breaking Down D3 APIShirley 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 InteractionsShirley introduces DOM manipulation and Interactions within D3, where React will become useful.
React RendersShirley 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 ExerciseIn this exercise, students draw a bar chart with React and D3.
React and Bar Chart SolutionShirley 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 & SolutionShirley 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 ExceptionsShirley 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, & AnnotationsShirley dicusses how to implement axes in React to make your SVG visual aids more meaningful.
Axes Exercise & SolutionIn this exercise, Shirley walks through the incorporating axes into the bar chart that was previously created with React.
TransitionsShirley gives the recommendation that React not manage the attributes D3 is transitioning. Reasoning, and alternatives are given to bypass this issue.
BrushShirley introduces brush() from D3, which allows the user to highlight graphs and return data for mouse and touch events using SVG.
Brush Exercise & SolutionAfter discussing how to implement D3 brush, Shirley live codes an example showing how to add brush interactivity to a chart.
Additional ResourcesShirley introduces D3 legends and annotation functions, and additional resources that help with readability of your visual aid.
CanvasShirley introduces canvas for working with large datasets in data visualizations.
Creating Charts in CanvasAfter reviewing how to create a bar chart in canvas, Shirley shows how to generate a radial chart in canvas with D3.
Questions & Wrapping UpAfter 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.