Introduction to Data Visualization with d3.js v4
Table of Contents
d3.js IntroductionReviewing 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.
Selection and DataIn 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&AAfter students work with the initial selection and data demo, Shirley takes questions from students.
Enter-AppendSo 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 AxesShirley 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 ChartIn this challenge, students use d3.js recreate a temperature for a city scaled over set period of years.
Challenge 1: SolutionShirley walks through the solution to Challenge 1 and answers questions from students.
Shapes IntroductionBesides 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 ModuleThe 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 & SolutionShirley 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.
Animating TransitionsAfter 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 TransitionsIn this challenge, students use d3.js to animate transition a given data set.
Challenge 3: SolutionShirley walks through the solution to Challenge 3 and answers questions from students.
d3-force ModuleWhile demonstration the d3-force module can create a particle pattern simulating physical forces, Shirley reviews how to implement force simulation.
Position and CollisionShirly 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.
D3 + React
Working Togetherd3.js, the interactive data visual tool, and React, the single-page apps whose data change over time, both want control of the DOM. Shirley discusses three approaches on how to use d3.js and React together.