A "simple" D3.js area chart
- To build the chart, we need: data, an SVG container, margins, an X axis, a Y axis, the area shape itself, and some CSS to make it look pretty.
- D3 uses SVG (Scalable Vector Graphics) to draw its shapes.
- The idea is to make some margins and define an SVG group (i.e. the g tag) that is set to those margin boundaries.
- We must take the X data and set it on the axis so that the maximum X value (i.e. 3) matches the pixel width of the chart area.
- We have to think about the X data (0 - 3) as the domain, and the chart horizontal dimension (0 - width) as the range.
- SVG uses different properties than standard HTML tags, but the styling below gave the graph its simple look.
Top 200 comments