Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

d3 Fundamentals : Understanding domain, range and scales in D3js

Just like peo­ple, data comes in all shapes and sizes (per­haps even col­ors!). No mat­ter what, every unit of your data needs to be rep­re­sented on a lim­ited real estate of the desktop/tablet/mobile browser. In our pre­vi­ous arti­cle, we dis­cussed how data bind­ing takes place in D3. In this arti­cle, we pri­mar­ily focus on under­stand­ing one of the fea­tures of d3 — scales — and how they can be used to trans­form your data before visu­al­iz­ing it.

When you first start out draw­ing some­thing using D3, you need to think about 2 main things.

  • The size of your dataset.
  • The dimen­sions of the browser/svg on which you want to ren­der your data.

The for­mer is what is known as the domain and the lat­ter asso­ci­ated with range.


Domain

When you see the word Domain in the con­text of D3, think about your data. Its much eas­ier if you remem­ber just this sim­ple quote

D for Domain, D for Data.

Now that you know how to remem­ber it, lets try to define it. Domain rep­re­sents the bound­aries within which your data lies. e.g. If I had an array of num­bers with no num­ber smaller than 1 and no num­ber larger than 100, my domain would be 1 to 100.


Range

There will not always be a direct map­ping between your data points and an actual pixel on the screen. For exam­ple, if you are plot­ting a graph of sales fig­ures and the sales is in tens of thou­sands, it is unlikely that you will be able to have a bar graph with the same pixel height as the data. In that case, you need to spec­ify the bound­aries within which your orig­i­nal data can be trans­formed. These bound­aries are called the range.

That said, the rule of thumb is

You usu­ally make use of a range when you want to trans­form the value of a raw data point into a cor­re­spond­ing pixel coor­di­nate.


Scale

Now that you know what a domain and range is, you need a way to con­vert your data into cor­re­spond­ing val­ues in the domain. And thats exactly what scales do.

The most com­mon types of scales are — quan­ti­ta­tive scales and ordi­nal scales.

Quan­ti­ta­tive Scale

Quan­ti­ta­tive scale func­tions are those that trans­late one numeric value into another numeric value using dif­fer­ent types of equa­tions such as lin­ear, log­a­rith­mic etc.

For exam­ple the lin­ear quan­ti­ta­tive scale con­verts a num­ber into another num­ber lin­early and can be defined as follows:

var l_converter = d3.scale.linear();

NOTE : In the above code, although ‘l_converter’ looks like a vari­able, it is actu­ally a func­tion ref­er­ence. This is because in javascript func­tions are first class objects, there­fore any func­tion invo­ca­tion can return another func­tion as its return value


How­ever, defin­ing a con­verter func­tion like we did above is not suf­fi­cient. In order to use this func­tion, we also need to spec­ify the domain and range for this function.

l_converter.domain([0, 10]);
l_converter.range([0, 1000]);

The above code can be read as

Given any num­ber between 0 and 10, con­vert it to a num­ber between 0 and 1000 using a lin­ear scale.

Ordi­nal Scales

This is another type of scale that you will find your­self using quite often. Thats because our data may not always con­sist of num­bers. It may con­tain other things — the best exam­ple of which is — alpha­bets. Alpha­bets are ordi­nal val­ues, i.e. they can be arranged in an order, but you can­not derive one alpha­bet from the other unlike numbers(which usu­ally fol­low an incre­men­tal sequence).

An ordi­nal scale con­verter can be defined as

var o_converter = d3.scale.oridinal();

This looks quite sim­i­lar to our lin­ear scale example.

How­ever, the dif­fer­ence between these two scales becomes evi­dent when you define the domain and range for an ordi­nal scale.

o_converter.domain(['A', 'B', 'C', 'D', 'E']);
o_converter.rangeBands([0, 1000]);

In the above snip­pet, we had to spec­ify every pos­si­ble value of the domain in the input. These val­ues are then mapped to a range­Band instead of a reg­u­lar range because each item in the domain will con­sume a cer­tain band in the range specified.

If you wish to, you can also spec­ify dis­crete val­ues instead of a range­Band, but it is usu­ally more redious to do so.

o_converter.domain(['A', 'B', 'C', 'D', 'E']);
o_converter.range([0, 200, 400, 600, 800]);

Notice that in the above exam­ple, the num­ber of items in the range array is equal to the num­ber of items in the domain array.


Usage

Now that we know how to define our con­verted func­tions, using them is no eas­ier than invok­ing a func­tion with an argument.

console.log(l_converter(5)); // Prints 500
console.log(o_converter('B')); // Prints 200

Now that we know how cre­ate sim­ple scales, we will use this knowl­ege to build some basic charts in D3 in the next part.

You can also Fol­low us on twit­ter to get noti­fied of the same.

Resources

Ryan Sukale

Ryan is just a regular guy next door trying to manage his life and finances.

You may also like...