Among other powerful and interesting features of the library, you have the scales function. D3 Scales basically map a set of range of data values onto another set of fixed values of data. All scales basically have two extended functions: “.domain()” and “.range()”. We will get into the details of what each one is and does later on in the tutorial.
Firstly, there are three basic scales in the library:
- Quantitative Scales – for continuous input domains, such as numbers.
- Ordinal Scales – for discrete input domains, such as names or categories.
- Time Scales – for time domains.
This tutorial will only cover the Linear Scale which is part of the Quantitative Scales.
Creating a linear scale is as easy as 1, 2, 3:
- Initialize the scale.
- Specify the domain and range.
- Call up the scale in your code.
Steps one and two are actually one step but to make things clear and easy to understand, I have made them separate steps. So, to initialize the scale, you don’t have to call complex functions:
var myscale = d3.scale.linear();
And there you have it. Your linear scale is now stored in the variable myscale. This looks simple enough, however, we haven’t executed steps 2 and 3 yet. So, before I go in to making the scale complete, I will first explain what a domain and a range is.
- domain – basically put, this is the range of the data you have. The values specified here will link or map onto (mathematically speaking) the range. You can start off at 0 or at the lowest value in your dataset and end at the largest value in your dataset its all up to you. This will become clear once you see the example code below.
- range – This is where the values specified in the domain must fit into. This is the powerful function that automatically spreads data specified in the domain function to fit into the highest and lowest value specified as the function’s parameters. This will be made clear below if not understood.
Here is a sample code of a complete linear scale function:
var myscale = d3.scale.linear().domain([0, highestValue]).range([0, maximumWidth]);
var myscale = d3.scale.linear().domain([10,24]).range([0,650]);
The variable maximumWidth is referring to the maximum width you defined for your graph. Say if your device is 650 x 380, then the maximum width of your graph will be 650 as shown in the sample code above.
Now, basically what happens is d3 linearly scales the domain onto the range so the data spans the range. All this will make sense when we build a graph, which will be in my next tutorial.
I promise you, if you understand this, you will grasp creating a graph very easily.