How to calculate the scale's result?

Question

I am new to d3.js library, and I am trying to understand the concept of domain and ranges.

I read Scott Murray's book, but I don't know how to calculate it.

I have this:

var scale = d3.scale.linear()
    .domain([100, 500])
    .range([10, 350]);

scale(100);  //Returns 10
scale(300);  //Returns 180
scale(500);  //Returns 350

I know that 100 units of my input represent 10 in my output, and the same with 500 and 350... but why 180 is returned for 300 as input? How can I calculate this value?

I read this tutorial too, which explains how to calculate it, but when I follow the method, I don't get the same value, i.e., scale(300) doesn't return 180.

Any idea why?

Answer 1

THE EQUATION OF THE LINE

To get the equation used in a D3 linear scale you only need to understand that such scale uses a linear interpolation. In simple words, all you need is the equation of the line created by the two points you're passing to D3 scale generator.

In your example...

.domain([100, 500])
.range([10, 350]);

...will give us two points, using the Cartesian coordinates system (x, y):

• The first point is 100,10 (x = 100 and y = 10)
• The second point is 500,350 (x = 500 and y = 350)

Keep in mind that in my explanation the x axis represents what in math is called the domain (in D3 lingo, also domain), that is, the set of input values, while the y axis represents what in math is called the image (in D3 lingo, the range), that is, the set of output values.

So, using those two points, this is the line you get:

Now let's explain visually what a linear scale like this one does:

Choose any point in the x axis (it can even be outside the domain). This is your input value (in the domain). Go up (or down) until you cross the red line. The y coordinate of the point where you cross the red line corresponds to your output value (in the image, or range).

Now, back to the equation:

Having our 2 points, we can now calculate the equation of the line.

The general equation of the line is:

Where y (also known as f(x) in most math books) is the range, and x is the domain.

The first step is finding m, which we can do using our 4 points:

Remember that:

• x1 is the first value in the domain array (=100)
• x2 is the last value in the domain array (=500)
• y1 is the first value in the range array (=10)
• y2 is the last value in the range array (=350)

Putting all these four values in the equation, it gives us that m is 17/20.

Now, solving the equation for b (using any of the two points)...

... we have that b is -75, which gives us our final equation:

And that's it. Using this equation, you can get any point in the image (range), relative to any domain input.

Example:

Let's calculate the output (range) for 125 (as in your comment). Very easy:

And that gives us... 31.25!

Answer 2

Yes I will try to explain why you get 180.

We have that 300 is the value that ideally divide your domain into two subdomains of the same size, so we can do: 500 - 100 / 2 = 200 (this is the subdomain size), this implies that the middle value is located at:
200 + 100 = 300 (note that we add the starting point 100)

So with the range we do the same:
350 - 10 / 2 = 170 and then we add the starting point 170 + 10 = 180