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', `translate(0, ${(chart.height / 2) + (offset * 2)})`)
  .style('stroke', colors(5));

The quantize scale will divide the weierstrass function into discrete values between 1 and 2 with a step of 0.5 (-1, -0.5, 0, and so on), and threshold will map values smaller than -1 to -50, -1 to 0, and so on.
The result is as follows: