Search⌘ K
AI Features
Home
Courses
Master D3.js for Data Visualization

Band Scales

Explore how to create and use band scales in D3.js to transform categorical data into coordinates on the x-axis. This lesson guides you through building y-axis linear scales and x-axis band scales, mapping states, and understanding bandwidth and padding for better chart layouts.

We'll cover the following...

We are going to learn a new scale called a band scale. We will talk about it in a moment, but first, let’s create a scale for the y-axis. The y-axis will measure the population. We are going to use a linear scale for the y-axis.

Before getting started, remove the console statement for the stackData variable if you are working locally. We don’t need it anymore.

Linear scale

We will create a variable called yScale. Its value will be the d3.scaleLinear() function.

Javascript (babel-node)
const yScale = d3.scaleLinear()
  .domain([
    0, d3.max(stackData, ag => d3.max(ag, s => s[1]))
  ])
  .rangeRound([dimensions.ctrHeight, dimensions.margins])

For the domain, the ...