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.
Join the DZone community and get the full member experience.Join For Free
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).
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.
Thanks for reading!
Published at DZone with permission of Ashish Tomer, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.