D3.js 4.x Data Visualization - Third Edition

Discrete range scales

The interesting scales for our comparison are quantize and threshold. The quantize scale cuts the input domain into equal parts and maps them to values in the output range, whereas threshold scales let us map arbitrary domain sections to discrete values:

const offset = 100;const quantize = d3.scaleQuantize()  .domain(extent)  .range(d3.range(-1, 2, 0.5)  .map(d => d * 100));const line5 = line1.x(x).y(d => quantize(weierstrass(d)));drawSingle(line5)  .attr('transform', `translate(0, ${(chart.height / 2) + offset})`)  .style('stroke', colors(4));const threshold = d3.scaleThreshold()  .domain([-1, 0, 1])  .range([-50, 0, 50, 100]);const line6 = line1.x(x)  .y(d => threshold(weierstrass(d)));drawSingle(line6) .attr('transform', ...