This course has been updated! We now recommend you take the Introduction to D3.js course.
Table of Contents
d3.js
Introduction
Shirley Wu introduces the course on d3.js, a JavaScript library for producing dynamic and interactive data visualizations, and reviews the course agenda.
d3.js Introduction
Reviewing the d3.js developer ecosystem, Shirley reviews the API and community resources including Bl.ock Builder, which is in-browser code editor built for creating and sharing d3.js examples.
API Reference
Selection and Data
In this initial example, Shirley creates a series of rectangle images whose each respective height gets passed in from a custom array.
Selection and Data Demo Q&A
After students work with the initial selection and data demo, Shirley takes questions from students.
Enter-Append
So as not to manually create each SVG shape element, Shirley illustrates the d3.js enter selection that produces "missing" items that correspond to supplied data points. Shirley explores and expands the demo in more detail while answering student questions.
Scales and Axes
Shirley introduces helper method scale() mapping from data attributes to display range. For example, instead of a one point per one pixel reference, scale can create relative or ratio sizes for large and small data sets so they images can display on the screen. A visual representation of that scale is called axis. The ticks included on the axis can be automatically included or hard-coded.
Challenge 1: Creating a Chart
In this challenge, students use d3.js recreate a temperature for a city scaled over set period of years.
Challenge 1: Solution
Shirley walks through the solution to Challenge 1 and answers questions from students.
Shapes
Shapes Introduction
Besides rectangles, Shirely reviews other SVG elements including circles, text, and paths. With paths, one can create complex shapes while transform to move, scale, rotate, and skew shapes.
d3-shape Module
The d3-shape library is proviudes graphical primitives for visualization, such as lines and areas. This library generates the value of the SVG d attribute, which is a string which contains a series of path descriptions, for creating curves and angles for line chart or pie charts.
Challenge 2: Line Graph & Solution
Shirley walks through the solution to Challenge 2 of creating a line graph and answers questions from students.
Update and Exit
enter() and update()
Shirely reviews enter selection methods, which calls DOM elements that are added from the dataset. Developers can use these methods to modify the DOM to reflect the change in data. Using an update function, students can update the visual states of the charts.
exit() and merge()
Shirley demonrates the exit method inr emove any elements no longer needed in a chart. With the merge function, multiple arrays can be placed into a single array.
Transitions
Animating Transitions
After demonstration transitions, which is a selection-like interface for animating changes to the DOM, Shirley explains her practice for implementing animatied transitions.
Challenge 3: Animating Transitions
In this challenge, students use d3.js to animate transition a given data set.
Challenge 3: Solution
Shirley walks through the solution to Challenge 3 and answers questions from students.
Force Layout
d3-force Module
While demonstration the d3-force module can create a particle pattern simulating physical forces, Shirley reviews how to implement force simulation.
Position and Collision
Shirly reviews the positioning with forceX and forceY which can push nodes towards a desired location. Collision force treats nodes as circles with a given radius, rather than points, and preventing nodes from overlapping.
