D3.js method of realizing histogram _javascript skills

I. Introduction to Histograms

A histogram is a way of analyzing a photograph, representing the brightness horizontally, representing the number of pixels vertically. First, the brightness of all the pixels in the photo is analyzed, then the specific values are calculated and then mapped to the horizontal axis. In this case, the higher the number of pixels on this brightness.

The histogram of the viewing rule is "left black right white", the left represents the dark part, the right side represents the light part, while the middle of the middle tone.

The height of the portrait represents the density of pixels, the higher the number of pixels that are distributed on this brightness.

Histograms are used to describe probability distributions, and D3 provides a histogram layout histogram used to transform data.

Assuming that there are array a = [10, 11, 11.5, 12.5, 13, 15, 19, 20], the 10~20 range is now divided into 5 segments, namely:

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

So what part of the array A's values falls in these segments? After calculation, you can know that these 5 paragraphs have the number of elements are:

3, 2, 1, 0, 2

The graph shows the histogram.

All right, let's make it.

Second, the 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 a value according to the normal (Gaussian) distribution. To pass in two parameters, the first is the position parameter and the second is the dimension parameter. For a definition of normal distribution, see Wikipedia. After assigning this function to Rand, you rand() can then generate random numbers as long as you use them.

Iii. layout (Data conversion)

Next, to convert the above data, that is, after an interval and a number of dividers, the value of the other array falls in each region. First define a layout:

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

D3.layout.histogram: layout of histograms

Range : ranges of intervals

Bins: Separator Number

frequency: If the value is true, then the number is counted; If the value is false, the probability is counted.

You can then convert the data:

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

After conversion:

As you can see, the converted array, the length is the number of dividers, each interval has a value falling to this interval (the 0,1,2 in the figure,... ), the number of values (length), and

There are three parameters:

X: The starting position of the interval

DX: Width of interval

Y: Number of values falling into this interval (if frequency is true); probability of falling to this interval (if frequency is false)

Four, draw

Before drawing, you need to define a scale, because normally we need to allow the converted Y to scale in the desired range.

var max_height = n; 
var rect_step =; 
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)]) 
     

Finally, draw the graphic:

Draw graph var graphics = svg.append ("G"). attr ("transform", "Translate (30,20)"); Draws 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"); Draws a straight line graphics.append ("lines") of the axis. attr ("Stroke", "Black"). attr ("Stroke-width", "1px"). attr ("x1", 0). attr ("Y 
 
1 ", max_height). attr (" X2 ", Data.length * rect_step). attr (" y2 ", max_height); 
  Draws the axis separator line Graphics.selectall (". Linetick"). Data (data). Enter (). Append ("lines"). 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); Draws 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);  });

V. Summary

The above is the entire content of this article, I hope to be able to learn or work to bring certain help, if you have questions you can message exchange.