liveBook · Manning

Rankings chart

As explained in D3.js in Action, Third Edition

A rankings chart is a visualization that shows entities ordered by a ranking measure across an ordered dimension.

A rankings chart orders entities by rank across an ordered dimension. In a framework comparison, years run horizontally, frameworks run vertically, and curves show how each framework’s rank changes. section 8.6.3

Responsive rankings

At widths below 600 pixels, display only the first, middle, and last years and remove the left-side framework labels. This reduces information density while preserving the main shifts. section 9.3.2

How D3.js in Action, Third Edition covers it

How deep it goes
Descends through scales, generated SVG paths, labels, filters, and responsive layouts without covering ranking computation.
Examples
Shows front-end frameworks ranked by satisfaction, interest, usage, or awareness from 2016 through 2021.
What it assumes
Assumes basic component and prop handling while demonstrating D3 scales, line generators, React state, and resize effects.
What you can do after
Build it from scratch with D3 and React by rendering filtered rank curves and adapting their information density to screen width.
How it connects
Connects D3 shape generators, point scales, SVG paths, React components, filtering, and responsive design.

Related concepts

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.