"D3.js Advanced Series-5.0" histogram

The histogram is used to describe the probability distribution of narration, and D3 provides a histogram layout histogram used to transform the data.

Suppose there is an array a = [10, 11, 11.5, 12.5, 13, 15, 19, 20], and now the range of values of 10~20 is divided into 5 segments, namely:

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

So what is the value of array a that falls in that section of the region? After calculation, we can know that the number of elements in these 5 paragraphs is:

3, 2, 1, 0, 2

To show this graphically, it is the histogram. All right, let's start making it ~

1. Data

Generate Random Data first:

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 randomly generate values in normal (Gaussian) distributions. To pass in two parameters, the first one is the position number, the second is the dimension argument. For a definition of normal distribution, refer to Wikipedia. After assigning this function to Rand, you can then generate a random number using rand () only.

2. Layout (data conversion)

Next, to convert the above data, that is, after determining an interval and the number of separators, the value of the other array falls in each region. Define a layout first:

var bin_num = 15;var histogram = D3.layout.histogram (). Range ([ -50,50])        . Bins (bin_num). Frequency (true);

• D3.layout.histogram: The layout of the histogram
• Range: Extent of the interval
• Bins: Number of separators
• Frequency: If the value is true, the number is counted, and if the value is false, the probability is counted.

You can then convert the data:

var data = histogram (dataset);

Let's see what the difference is between the data before and after the conversion. Before conversion:

After conversion:

You can see that the converted array, the length is the number of separators, each interval has a value falling to this interval (0,1,2 in the figure,... ), number of values (length), and three parameters:

• X: The starting position of the interval
• DX: Width of the interval
• Y: The number of values falling to this interval (assuming frequency is true); the probability of falling to this interval (assuming frequency is false)

3. Draw

Before you draw, you need to define a scale bar, because normally we need to have the converted Y scale 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 graph:

Draw graphics var graphics = svg.append ("G"). attr ("transform", "Translate (30,20)");//Draw Rectangle 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 the axis of the line Graphics.append ("lines"). 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 separator line for the axis Graphics.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 Text Graphics.selectall ("text"). 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 resulting diagram is the picture at the beginning of this article.

Complete code please click on the link below, right button and then "View Source":

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

Document Information

• Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
• Published: December 17, 2014
• A lot of other content: our D3. JS-Data Visualization special station and CSDN personal blog
• Remark: This article is published in our D3. JS, reproduced please indicate the source, thank you

"D3.js Advanced Series-5.0" histogram