Continuous range scales

We can draw continuous range scales using the following code:

const linear = d3.scaleLinear()
.domain(extent)
.range([chart.height / 4, 0]);

const line1 = d3.line()
.x(x)
.y(d => linear(weierstrass(d)));

drawSingle(line1)
.attr('transform', `translate(0, ${chart.height / 16})`)
.style('stroke', colors(0));

We defined a linear scale with the domain encompassing all the values returned by the weierstrass function, and a range from zero to the drawing width. The scale will use linear interpolation to translate between the input and output, and will even predict values that fall outside its domain. If we don't want that to happen, we can use .clamp(). Using more than two numbers in the domain and range, we can create a polylinear scale where each section behaves like a separate linear scale.
The linear scale creates the following:

Let's add the other continuous scales in one fell swoop:

const identity = d3.scaleIdentity()
.domain(extent);

const line2 = line1.y(d => identity(weierstrass(d)));

drawSingle(line2)
.attr('transform', `translate(0, ${chart.height / 12})`)
.style('stroke', colors(1));

const power = d3.scalePow()
.exponent(0.2)
.domain(extent)
.range([chart.height / 2, 0]);

const line3 = line1.y(d => power(weierstrass(d)));

drawSingle(line3)
.attr('transform', `translate(0, ${chart.height / 8})`)
.style('stroke', colors(2));

const log = d3.scaleLog()
.domain(d3.extent(data.filter(d => (d > 0 ? d : 0))))
.range([0, chart.width]);

const line4 = line1.x(d => (d > 0 ? log(d) : 0))
.y(d => linear(weierstrass(d)));

drawSingle(line4)
.attr('transform', `translate(0, ${chart.height / 4})`)
.style('stroke', colors(3));

We reused the same line definition, changing the scale used for y, except for the power scale, because changing x makes a better example.

We also took into account that log is only defined on positive numbers, but you usually wouldn't use it for periodic functions anyway. It's much better at showing large and small numbers on the same graph.

Now, our picture looks as follows:

Starting to look like a New Order album cover or something up in here...
The identity scale (labeled 1) is orange and wiggles around by barely a pixel because the data we feed into the function only goes from -0.5 to 0.5, the power scale (labeled 2) is green, and the logarithmic scale (3) is red.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset