liveBook · Manning

Area chart

As explained in D3.js in Action, Third Edition

An area chart represents quantitative values with regions whose sizes or boundaries encode magnitude across an ordered dimension.

An area chart encodes monthly quantities through the size of a filled region. In a radial layout, months follow a circular axis and the region’s distance from the center represents the value. section 14.3 section 14.5.3

Yearly radial drawings chart

For each year, place the months around a circle and pass monthly drawing counts to a radial area chart. A closed Catmull–Rom curve produces the filled outline; the resulting chart shows the drawings created during 1885.

How D3.js in Action, Third Edition covers it

How deep it goes
Explains data grouping, scale construction, radial accessors, curve choice, path generation, and fill styling.
Examples
Demonstrates monthly Van Gogh drawing counts arranged around yearly circles, including the 1885 chart.
What it assumes
Assumes familiarity with D3 shape generators and introduces the shift from Cartesian to polar coordinates.
What you can do after
Build a radial area chart with Svelte, D3 scales, and D3’s lineRadial generator.
How it connects
Connects area charts with D3 shape generators, radial coordinates, linear scales, Svelte components, and small multiples.
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.