D3 Scales: Linear & Ordinal | D3JS | JavaScript

Data Driven Documents or simply D3JS is a javascript library designed to manipulate documents using data. It is a very handy tool especially when you are trying to display data on the web. With this library you can view data in bar charts, line charts, donut charts, etc. All this is made possible thanks to Javascript, HTML and CSS.

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:

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:

  1. Initialize the scale.
  2. Specify the domain and range.
  3. 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]);

The variable highestValueInDataset can be a number or a javascript variable. It specifies the highest value in the dataset. Say if you have 12, 14, 24, 15, 10 in your dataset then your domain and range will be as follows:

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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s