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.

save | report | share on


Top 200 comments