Be the first user to complete this post
|
Add to List |
d3 Fundamentals : Understanding domain, range and scales in D3js
The former is what is known as the domain and the latter associated with range.
Domain
When you see the word Domain in the context of D3, think about your data. Its much easier if you remember just this simple quote
D for Domain, D for Data.
Now that you know how to remember it, lets try to define it. Domain represents the boundaries within which your data lies. e.g. If I had an array of numbers with no number smaller than 1 and no number larger than 100, my domain would be 1 to 100.
Range
There will not always be a direct mapping between your data points and an actual pixel on the screen. For example, if you are plotting a graph of sales figures and the sales is in tens of thousands, 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 specify the boundaries within which your original data can be transformed. These boundaries are called the range.
That said, the rule of thumb is
You usually make use of a range when you want to transform the value of a raw data point into a corresponding pixel coordinate.
Scale
Now that you know what a domain and range is, you need a way to convert your data into corresponding values in the domain. And thats exactly what scales do.
The most common types of scales are - quantitative scales and ordinal scales.
Quantitative Scale
Quantitative scale functions are those that translate one numeric value into another numeric value using different types of equations such as linear, logarithmic etc.
For example the linear quantitative scale converts a number into another number linearly and can be defined as follows:
var l_converter = d3.scale.linear();
NOTE : In the above code, although 'l_converter' looks like a variable, it is actually a function reference. This is because in javascript functions are first class objects, therefore any function invocation can return another function as its return value
However, defining a converter function like we did above is not sufficient. In order to use this function, we also need to specify the domain and range for this function.
l_converter.domain([0, 10]);
l_converter.range([0, 1000]);
Ordinal Scales
This is another type of scale that you will find yourself using quite often. Thats because our data may not always consist of numbers. It may contain other things - the best example of which is - alphabets. Alphabets are ordinal values, i.e. they can be arranged in an order, but you cannot derive one alphabet from the other unlike numbers(which usually follow an incremental sequence).
An ordinal scale converter can be defined as
var o_converter = d3.scale.ordinal();
o_converter.domain(['A', 'B', 'C', 'D', 'E']);
o_converter.rangeBands([0, 1000]);
o_converter.domain(['A', 'B', 'C', 'D', 'E']);
o_converter.range([0, 200, 400, 600, 800]);
Usage
Now that we know how to define our converted functions, using them is no easier than invoking a function with an argument.
console.log(l_converter(5)); // Prints 500
console.log(o_converter('B')); // Prints 200
Now that we know how create simple scales, we will use this knowlege to build some basic charts in D3 in the next part.
You can also Follow us on twitter to get notified of the same.
Resources
Also Read:
- Render a d3 tree with a minimum distance between the tree nodes
- Creating an Animated Ring or Pie chart in d3js
- Using d3js to draw a bar chart with an axis and some basic transitions
- Render a d3js Tree as a React Component
- Selecting a node in d3js based upon the value of its data