Introduction to D3 scale

As a data visualization developer, one of the most important tasks is perform over and over is to convert data or input domain to our visual domain. Scales are mainly used for transforming data values to visual variables such as position, length, and color.

The scale not only for mapping of domain input to the range to produce visual output on the screen, but also to serve as fundamental building blocks for many other constructs such as transition and axes.

Axis in D3
In D3 we can draw axis manually and automatically, we can use D3 built in axis generator that we draw axis line, tick mark and label dynamically from data domain and spacing everything need before us. The D3 arrange all this element in the group. If we update our data domain, the axis will automatically update with new map value.

To built axis, we need to understand the concept of scale.

The Scale in D3
In D3 scale are JavaScript functions that perform data transform.
The scale function map an abstract input value domain to output value or range.  The scale function can convert a number’s of quantitative input domain to a continuous output range. This abstract domain can contain numerical and non-numerical like the mass of gold.

The scale input i.e is domain and output i.e is the range. The scale typically used to transform (or ‘map’) data values into visual variables (such as position, length, and color). When we are drawing a shape by our data values, we added the scaling factor to our data value, so that shape can visible on the screen. As data value, sometimes many be too large and some too small, so we have mapped it into the visual domain that is output graphics that can feet into our screen.

The range is D3 output for our domain input and always in the pixel so it can not be negative.  The range describes height or width available for our web page output value.

Most of the chart had two axises or ranges one for x-axis and one for the y-axis. The x-axis in most time is the date and we have to map the domain to range value for the y-axis.  In above graph tell us that y-axis is 200px in height and we can say that domain of 50 is plotted as 100px in the y-axis. Similarly for domain for 20 as 0px and domain value of 80 as 200px.

Note: The browser draw the graphic element from the top down and we read the data chart from bottom up. So we have to invert our y value position. For this reason, we normally have to match the minimum value of the domain against the maximum value of range and vice versa.

D3 scale types
D3 has around 12 different scale types (scaleLinear, scalePow, scaleQuantise, scaleOrdinal etc.) and broadly speaking they can be classified into 3 groups:

1. scales with continuous input and continuous output
2. scales with continuous input and discrete output
3. scales with discrete input and discrete output

Creating the linear scale
The D3 scale can be continues, ordinal, Quantize or sequential, we want to most common type of continues scale which is numeric linear scale.    Adding the D3 linear scale example as

var dataArray = [25,27,28,30,35,40,45,56,77,80,94,107,100,120,140,156,170]

var height = 200;
var width = 500;

var margin = { left:50, right:50, top:40, bottom:0 };

var y = d3.scaleLinear()
			.domain([0, 170])
			.range([height,0]);

var yAxis = d3.axisLeft(y);

console.log(y(0));  //op 200
console.log(y(85));  //op 100
console.log(y(170));  // op 0

var area = d3.area()
				.x(function(d,i){ return i*20; })
				.y0(height)
				.y1(function(d){ return y(d); });

var svg = d3.select("body").append("svg").attr("height", "100%").attr("width","100%");
var chartGroup = svg.append("g").attr("transform","translate("+margin.left+", "+margin.top+")");

chartGroup.append("path").attr("d",area(dataArray));
chartGroup.append("g")
		.attr("class","axis y")
		.call(yAxis); 
 
 

At the highlight, we have to define the type of scale we want, domain as input and range as output. Both domain and range are arrays, both have min and max value. In the domain, we have a minimum as 25 and maximum as 170. In the range array minimum is zero and the maximum value is height. Read the above highlight Note again.  We can see that in the console when the input value is 0 then corresponding output value that is y is 200 and when are input value is 170 and corresponding y value will be 0.

At line number 10 of code we have to declare axis generator,
var yAxis = d3.axisLeft(y);
The generator will not run until we call it. There are 4 types of the axis in D3 axisLeft, axisRight, axisTop, axisBottom. This will tell where to put the label relative to the line, should label popup at the left side of the line or right side of the line and same goes for top and bottom.
To add the axis we need to add the group element and then call the axis on that group. D3 then adds all the elements into the group for us.
We will create one group and add both axis and chart into that group. We will create a chartGroup to add both axis and chart elements. The output of our above D3 code.