liveBook · Manning

Bandwidth

As explained in D3.js in Action, Third Edition

Bandwidth is the width allocated to each category interval in a band-based scale.

Bandwidth is the size allocated to each category interval in a band scale. In a bar chart, yScale.bandwidth() returns each rectangle’s thickness, used for its height. section 3.4.3

Use bandwidth with a D3 band scale to size and space categorical bars:

  • Add paddingInner(0.2) when adjacent bars look cramped; the value represents 20% spacing between bands. section 3.4.3

How D3.js in Action, Third Edition covers it

How deep it goes
Defines bandwidth and applies it to rectangle height, while also showing padding adjustments for readable spacing.
Examples
Uses technology bars for Excel and D3.js, mapping categories to y positions and rectangle heights.
What it assumes
Assumes a categorical dataset, an SVG container, and basic use of D3 selections and rectangle attributes.
What you can do after
Apply it via D3 to size categorical SVG bars and adjust their spacing with inner padding.
How it connects
Connects bandwidth to band scales, padding, bar charts, SVG rectangles, and point scales.
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

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.