[Advanced series of D3.js-5.0] histogram, d3.js5.0

[Advanced series of D3.js-5.0] histogram, d3.js5.0

The Histogram is used to describe the probability distribution. D3 provides the Histogram layout Histogram for data conversion.

Suppose there are arrays a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ~ The value range of 20 is divided into five segments:

10 ~ 12, 12 ~ 14, 14 ~ 16, 16 ~ 18, 18 ~ 20

Which of the following regions does the value of array a fall? After calculation, we can know that the number of elements in these five segments is:

3, 2, 1, 0, 2

The histogram is used to display this image. Now, let's get started ~

1. Data

First, generate random data:

var rand = d3.random.normal(0,25);var dataset = [];for(var i=0;i<100;i++){dataset.push( rand() );}

D3.random. normal generates a function that can generate values randomly based on normal (Gaussian) distributions. Two parameters are required. The first parameter is the location parameter, and the second parameter is the size parameter. For the definition of normal distribution, see Wikipedia. After assigning this function to rand, you only need to use rand () to generate a random number.

2. layout (data conversion)

Next, we need to convert the above data, that is, after determining a range and the number of separation, the value of the other array falls into each region. First define a layout:

var bin_num = 15;var histogram = d3.layout.histogram().range([-50,50])        .bins(bin_num).frequency(true);

• D3.layout. histogram: histogram Layout
• Range: the range of the range.
• Bins: Number of splits
• Frequency: If the value is true, the number is counted. If the value is false, the probability is counted.

Next we can convert the data:

var data = histogram(dataset);

Let's take a look at the differences between the data before and after the conversion. Before conversion:

After conversion:

We can see that the length of the converted array is the number of splits, and each interval contains the values falling into this range (0, 1, 2 ,...), the number of values (length), there are three parameters:

• X: Start position of the Interval
• Dx: interval width
• Y: The number of values that fall into this range (if frequency is true); the probability that falls into this range (if frequency is false)

3. Draw

Before drawing, we need to define a scale, because we usually need to scale the converted y within the desired range.

var max_height = 400;var rect_step = 30;var heights = [];for(var i=0;i<data.length;i++){heights.push( data[i].y );}var yScale = d3.scale.linear().domain([d3.min(heights),d3.max(heights)]).range([0,max_height]);

Finally, draw the image:

// Draw the image var graphics = svg. append ("g "). attr ("transform", "translate (30,20)"); // draw a rectangular graphics. selectAll ("rect "). data (data ). enter (). append ("rect "). attr ("x", function (d, I) {return I * rect_step ;}). attr ("y", function (d, I) {return max_height-yScale (d. y );}). attr ("width", function (d, I) {return rect_step-2 ;}). attr ("height", function (d) {return yScale (d. y );}). attr ("fill", "steelblue"); // draw a straight line graphics of the coordinate axis. append ("line "). attr ("stroke", "black "). attr ("stroke-width", "1px "). attr ("x1", 0 ). attr ("y1", max_height ). attr ("x2", data. length * rect_step ). attr ("y2", max_height); // draw the line graphics of the Axis separator. selectAll (". linetick "). data (data ). enter (). append ("line "). attr ("stroke", "black "). attr ("stroke-width", "1px "). attr ("x1", function (d, I) {return I * rect_step + rect_step/2 ;}). attr ("y1", max_height ). attr ("x2", function (d, I) {return I * rect_step + rect_step/2 ;}). attr ("y2", max_height + 5); // draw the graphics text. selectAll ("text "). data (data ). enter (). append ("text "). attr ("font-size", "10px "). attr ("x", function (d, I) {return I * rect_step ;}). attr ("y", function (d, I) {return max_height ;}). attr ("dx", rect_step/2-8 ). attr ("dy", "15px "). text (function (d) {return Math. floor (d. x );});

4. Results

The result graph starts with this document.

For the complete code, click the link below and right-click it and then "view source code ":

Http://www.ourd3js.com/demo/J-5.0/histogram.html

Document Information

• Copyright Disclaimer: BY-non-commercial (NC)-deduction prohibited (ND)
• Published on: February 1, December 17, 2014
• More content: OUR D3.JS-data visualization special site and CSDN personal blog
• Note: This article is published in OUR D3.JS. For more information, see the source. Thank you.