In just a second, we'll see with some live coding the functions in
D3 that actually help us produce and manipulate scales.
For now I wanted to talk from still a relatively high level and
using a lot of graphics to help explain what's happening behind the scenes.
This green rectangle here represents the scale of the life
expectancy of the Gapminder plot.
We see at the bottom, there's a minimum value of 15 and
at the top, is a maximum value of 90.
The green score on the left represents the value of our data,
in this case, the actual numeric representation of what the life expectancy is.
And this blue rectangle represents what pixel values you want to
map the data values to.
D3 refers to the input values as the domain of your data
often are represented by the minimum value and the maximum value, but
the domain actually refers to the entire extent between the min and
the max, and D3 refers to the pixel values you want to map the domain to
the range also represented by a minimum and a maximum value.
In order to transform our domain into the range,
we often have to specify what type of function you would like to
use to convert the values from the data into pixel values.
In the case of the life expectancy, this scale was linear in a Gapminder plot.
So we want to use a linear function to map the domain values to the range.
In the very mathematical sense and literal sense of a function that maps from
our domain into our range, we can think of the transform, that converts
the values from our domain in the data to pixel values as an equation.
In this case mapping the domain as x into the range as y.
Since we are using a linear scale,
the function is simply the equation of a line.
You do not have to worry what the value of m or the value of b are in this case.
That is one of the very nice conveniences that D3 provides for us.
All we need to specify are the minimum and the maximum of our domain, and
the minimum and maximum of where we want to map our values to.
And the D3 scale function figures out the appropriate values and
constants for the linear function that maps the domain into the range.
So far we haven't actually specified the values we want to map our domain into.
For the live coding example we will get into,
we will simply pick a max and min for the range.
In our case,
we can simply set a max and min of where we want to [INAUDIBLE] range to be.
In this case, I choose a maximum of 200 pixels, since that's around
the size of the box we would be working with on the web page.
A minimum range value of zero.
Does not mean we plot our point in one of the corners of our webpage,
it's simply an offset from the root SVG element which we will be working with.
One less quark I want to cover is that the coordinate plane in the SVG
in the webpage actually has a value of zero at the top left, and as you go out.
Right from that origin, x values are increasing and
as you go down from the origin, y values are increasing.
So a value of zero actually corresponds to the upper left and
a y value of 200 actually will correspond to the bottom of our SVG elemen.
Now that we have some conceptual idea of why D3 scales are important, and
how to map data values into pixel values to display on the screen,
we can get into some live code and actually see this put into practice.