Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Introduction to D3.js (Part 2)

DZone's Guide to

Introduction to D3.js (Part 2)

This is the second part of a series introducing D3.js. Read on to dive even further into D3.js and how to make an ideal chart.

· Web Dev Zone
Free Resource

Should you build your own web experimentation solution? Download this whitepaper by Optimizely to find out.

In our previous blog post, we saw how to create a simple histogram based on data. But still, our chart is not ideal, as the range of data in the array can vary from too small to very large numbers that might not fit in our SVG canvas created by D3. For example, in our last blog post, we said that if one element in the array is 120, then the width of bar corresponding to that number would be 120 * 10 = 1200px, which is more than the width (600px) of the canvas of D3. In this case, any bar that exceeds a width of 600px will stop at the right edge of the canvas, and this representation of data would be incorrect. To cope with these glitches, D3 provides support for scaling our bars (or curves, colors, or any SVG shape) to adjust in the canvas of the D3 so that the smallest element in the dataset all the way to the largest element in the dataset can fit in correctly and relatively (to each other).

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
    <script>
        var dataArray = [120, 40, 50, 160];

        var width = 500;
        var height = 500;

        var widthScale = d3.scaleLinear()
            .domain([0, 160]) //(Minimum, Maximum)
            .range([0, width]);

        var canvas = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

        var bars = canvas.selectAll("rect")
            .data(dataArray)
            .enter()
            .append("rect")
            .attr("width", function(d) {
                return widthScale(d)
            })
            .attr("height", 60)
            .attr("y", function(d, i) {
                return i * 62
            });
    </script>

</body>

</html>

In the code above, we created a linear scale with the scaleLinear() method of the d3 object. The values inside the domain() method must be the minimum and maximum values in the dataset. Here, I hard coded the minimum and maximum values, but D3 also has various methods to do calculations on the dataset to calculate the minimum, maximum, mean, median, etc. The range() method sets the boundaries of the bars of our histogram. Here, the whole canvas width is taken as the size of the biggest bar in the histogram.

Barchart with scale

Thanks for reading!

Implementing an Experimentation Solution: Choosing whether to build or buy?

Topics:
data visualization ,d3.js ,javascript ,big data ,tutorial

Published at DZone with permission of Ashish Tomer, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}