Learn D3.js

Quantize scale

A quantize scale maps the values of a continuous domain to a discrete range by dividing the domain into equal parts, according to the number of items in the range.

In the following example, a value in the [0,900] domain is mapped to one of three colors, so the range is divided into three equal parts. Items less than 300 (1/3) are mapped to the 'blue' segment, items between 300 and 600 (2/3) are mapped to the 'green' segment, and items greater or equal to 600 are mapped to the 'red' segment:

const scaleBuckets = d3.scaleQuantize()                       .domain([0,900])                       .range(['blue','green','red']);const data = [0,50,100,200,250,290,300,310,400,550,590,650,700,900]; const axisScale = d3.scaleIdentity().domain(d3.extent(data));const axis = d3.axisBottom().scale(axisScale); ...