Scales API in D3.js

In the d3.js, we have a concept of scale function, which helps to transform the data. The scale functions can be applied to map the input domain to the output range.

Configuration of Scale API

The below-given script helps you to configure the Scale API.

<script src = “https://d3js.org/d3-array.v1.min.js”></script>  
<script src = “https://d3js.org/d3-collection.v1.min.js”></script>
<script src = “https://d3js.org/d3-color.v1.min.js”></script>
<script src = “https://d3js.org/d3-format.v1.min.js”></script>
<script src = “https://d3js.org/d3-interpolate.v1.min.js”></script>
<script src = “https://d3js.org/d3-time.v1.min.js”></script>
<script src = “https://d3js.org/d3-time-format.v1.min.js”></script>
<script src = “https://d3js.org/d3-scale.v1.min.js”></script>
<script></script>

Methods of Scale API

In D3.js, we have some essential scaling methods to design various charts. These methods are explained below.

d3.scaleIdentity()

It can be applied to create a linear scale in which the input data is similar to output data.

d3.scaleLinear()

This method helps you to design a continuous linear scale in which you can input the data domain to the stated range of output.

d3.scaleLog()

This method can be applied to generate a logarithmic scale.

d3.scaleTime()

This method allows you to create a linear scale in which the input data contains the dates and the output contains the numeric value.

d3.scalePow()

If you want to create an exponential scale, then you need to use this method of scaling.

d3.scaleSqrt()

This method helps you to construct a square root scale.

d3.scaleQuantize()

It can be applied to create a quantize scale that contains a discrete output range.

d3.scaleSequential()

This method can be applied to generate a sequential scale, in which the range of output is fixed by the interpolation function.

d3.scaleThreshold()

It is used to design a scale, in which the arbitrary input data tends to the discrete output range.

d3.scaleQuantile()

It is used to design a quantile scale, in which the sample of input data tends to the discrete output range.

d3.scalePoint()

If you want to create a point scale, then you can implement this method.

d3.scaleBand()

It can be applied to generate the band scale, in which the range of output is numeric and continuous. The band scale is similar to static scale except the output range.

D3.scaleOridinal()

This method of scaling helps you to create an ordinal scale, in which the input data contains the alphabets, and also designed to the discrete numeric output range.

Before the implementation of the example, you are required to be aware of the two below listed concepts.

Range: The range is referred to as an output range.

Domain: The term domain represents the maximum and minimum value of the input data.

Example

Here, an example given below to implement the d3.scaleLinear function. For executing this, you need to follow the below steps.

Step 1: Defining the Variable- In this step,first you need to define the data and SVG variable as explained in the below code.

var data = [150, 250, 350, 450, 850, 0]
var width = 550,
barHeight = 70,
margin = 1;

Step 2: Creating a Linear scale- Now, create a linear scale.

var scale = d3.scaleLinear()
      .domain([d3.min(data), d3.max(data)])
      .range([150, 450]);

Here, if you want to select the minimum and maximum randomly, then you can use the predefine function d3.max(), and d3.min(), that helps you to return the minimum and maximum values according to the array.

Step 3: SVG attributes appending- In this step, you need to affix the SVG elements as shown in below code.

var svg = d3.select(“body”)
       .append(“svg”)
       .attr(“width”, width)
       .attr(“height”, barheight * data.length);

Step 4: Applying the transformation- Now, you can apply the transformation with the help of following code.

var g  = svg.selectAll(“g”)
        .data(data) .enter(). append(“g”)
        .attr(“transform”, function (d, i)
{
            return translate (0, “   + i * barheight  +  ”);
});

Step 5: Appending the rectangle Elements- You can affix the rectangle elements as explained in below code.

g.append(“rect”)
    .attr(“width”, function (d)
{
            return scale(d);
})
     .attr(“height”, barheight - margin)

Step 6: Displaying the data- Now, you need to show the data by using the below script.

g.append(“text”)
   .attr(“x”, function (d)
{
            return scale(d));  
})
   .attr(“y”, barheight / 2)
   .attr(“dy”, “.35em”)
   .text(function (d) 
{
            return d;
});

Step 7: Working Example- Here, we have a complete example to represent the concept of d3.scale.Linear() method.

<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var data = [150, 250, 350, 450, 850, 300]
var width = 500, barHeight = 20, margin = 1;        
var scale = d3.scaleLinear()
.domain([d3.min(data), d3.max(data)])
.range([100, 400]);      
           var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
           var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function (d, i) {
               return "translate(0," + i * barHeight + ")";
         });
         g.append("rect")
         .attr("width", function (d) {
            return scale(d);
         })
         .attr("height", barHeight - margin)
         g.append("text")
         .attr("x", function (d) { return (scale(d)); })
         .attr("y", barHeight / 2).attr("dy", ".25em")
         .text(function (d) { return d; });
</script>
</body>
</html>

Output

After the successful execution of the above code, you got the following output.

← Prev Next →