|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <title>Histogram</title> |
|
5 <script type="text/javascript" src="../../d3.js"></script> |
|
6 <script type="text/javascript" src="../../d3.layout.js"></script> |
|
7 <style type="text/css"> |
|
8 |
|
9 body { |
|
10 font: 10px sans-serif; |
|
11 } |
|
12 |
|
13 rect { |
|
14 fill: steelblue; |
|
15 stroke: white; |
|
16 } |
|
17 |
|
18 line { |
|
19 stroke: black; |
|
20 shape-rendering: crispEdges; |
|
21 } |
|
22 |
|
23 </style> |
|
24 </head> |
|
25 <body> |
|
26 <script type="text/javascript"> |
|
27 |
|
28 var n = 10000, // number of trials |
|
29 m = 10, // number of random variables |
|
30 data = []; |
|
31 |
|
32 // Generate an Irwin-Hall distribution. |
|
33 for (var i = 0; i < n; i++) { |
|
34 for (var s = 0, j = 0; j < m; j++) { |
|
35 s += Math.random(); |
|
36 } |
|
37 data.push(s); |
|
38 } |
|
39 |
|
40 var w = 400, |
|
41 h = 400; |
|
42 |
|
43 var histogram = d3.layout.histogram() |
|
44 (data); |
|
45 |
|
46 var x = d3.scale.ordinal() |
|
47 .domain(histogram.map(function(d) { return d.x; })) |
|
48 .rangeRoundBands([0, w]); |
|
49 |
|
50 var y = d3.scale.linear() |
|
51 .domain([0, d3.max(histogram, function(d) { return d.y; })]) |
|
52 .range([0, h]); |
|
53 |
|
54 var vis = d3.select("body").append("svg:svg") |
|
55 .attr("width", w) |
|
56 .attr("height", h) |
|
57 .append("svg:g") |
|
58 .attr("transform", "translate(.5)"); |
|
59 |
|
60 vis.selectAll("rect") |
|
61 .data(histogram) |
|
62 .enter().append("svg:rect") |
|
63 .attr("transform", function(d) { return "translate(" + x(d.x) + "," + (h - y(d.y)) + ")"; }) |
|
64 .attr("width", x.rangeBand()) |
|
65 .attr("y", function(d) { return y(d.y); }) |
|
66 .attr("height", 0) |
|
67 .transition() |
|
68 .duration(750) |
|
69 .attr("y", 0) |
|
70 .attr("height", function(d) { return y(d.y); }); |
|
71 |
|
72 vis.append("svg:line") |
|
73 .attr("x1", 0) |
|
74 .attr("x2", w) |
|
75 .attr("y1", h) |
|
76 .attr("y2", h); |
|
77 |
|
78 </script> |
|
79 </body> |
|
80 </html> |