D3 Area Chart

Quite similar to line chart, area chart could also be used to demonstrate the trends over time for comparison. In this post, I’d like to use the same data in last blog from W3School Browser Statistics, but to draw an area chart to show the market share change by different browsers.

As you would see, area chart by D3 uses d3.area() function, also under d3-shape module.

Essentially, I use d3.area() to generate an area which is defined by two bounding lines. In this specific example, the two lines share the same x-value which is time series value. However, the y-values differ by y0 and y1. It uses curveLinear curve to produce a clockwise polygon and (x1, y1) renders the topline first then (x0, y0) render the bottomline later.