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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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!

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

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.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}