- Review "Data Keys":
- Example Without Keys
- Example With Keys
- Mike Bostock's description
- Descriptions: Generators, Components & Layouts
- Line Exercise
- video
- simple line
- understanding how the shape of data relates to elements
- real data
- simple line
- exercise: line transition
- video
The following descriptions are taken from D3.js in Action, Second Edition by Elijah Meeks.
Generators
D3 generators consist of functions that take data and return the necessary SVG drawing code to create a graphical object based on that data. For instance, if you have an array of points and you want to draw a line from one point to another, [...] a few D3 functions can help you with this process. These generators simplify the process of creating a complex SVG by abstracting the process needed to write a d attribute.
examples:
Components
In contrast with generators, which produce the d attribute string necessary for a element, components create an entire set of graphical objects necessary for a particular chart component. The most commonly used D3 component [...] is d3.axis, which creates a bunch of , , , and elements that are needed for an axis based on the scale and settings you provide the function.
examples:
Layouts
In contrast to generators and components, D3 layouts can be rather straightforward, like the pie chart layout, or complex, like a force-directed network layout. Layouts take in one or more arrays of data, and sometimes generators, and append attributes to the data necessary to draw it in certain positions or sizes, either statically or dynamically.
examples:
Start by downloading these files. Then watch this video (31:19).
modify the code created in the video, do make the website behave in this way:
