-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhistogram.html
122 lines (95 loc) · 3.17 KB
/
histogram.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Histogram Example</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<style >
.axis text{
font-family:sans-serif;
font-size:11px;
}
.axis path,
.axis line{
fill:none;
stroke:gray;
shape-rendering: crisp-edges;
}
.bin rect{
fill:teal;
}
.bin text{
font-family: sans-serif;
font-size:12px;
}
</style>
<body>
<div id="histogram">
</div>
<script type="text/javascript">
// basic attributes of the visualization
var width = 600;
var height = 400;
var margins = {top:15, bottom: 30, left:15, right:15};
var chartWidth = width - margins.left - margins.right;
var chartHeight = height - margins.top - margins.bottom;
// create synthetic data using a gaussian distribution
var data = d3.range(100).map(d3.random.normal(82, 8));
// adjust extents of the data to make nice bins
var extents = d3.extent(data);
extents[0] = extents[0] - (extents[0] % 5);
extents[1] = extents[1] + (5 - (extents[1] % 5));
// bin the data
// we are telling the function how many bins to make and what range to use
// by default the range is the extents of the data
// I want to have bins that break evenly on powers of 5
var histogram = d3.layout.histogram().range(extents).bins((extents[1] - extents[0]) / 5);
var binnedData = histogram(data);
var xScale = d3.scale.linear()
.range([0, chartWidth])
.domain(histogram.range()());
var yScale = d3.scale.linear()
.range([chartHeight, 0])
.domain([0, d3.max(binnedData, function(d){return d.y;})]);
var svg = d3.select('#histogram')
.append("svg")
.attr({width: width, height: height});
var chart = svg.append("g")
.attr("transform", "translate(" + margins.left + ", " + margins.top + ")");
var bins = chart.selectAll('.bin')
.data(binnedData)
.enter()
.append("g")
.attr("class", "bin")
.attr("transform", function(d){ return "translate("+ xScale(d.x) +","+ yScale(d.y)+")"; });
bins.append('rect')
.attr({
x:0,
y: 0,
width: function(d) {return xScale(xScale.domain()[0] + d.dx)-1;},
height: function(d){return chartHeight - yScale(d.y);}
})
bins.append('text')
.attr("transform", function(d){ return "translate("+ (xScale(xScale.domain()[0] + d.dx))/2 +","+ 15+")"; })
.attr("text-anchor", "middle")
.style("fill", "white")
.text(function(d){return d.y});
// Draw the x axis in the usual way
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
chart.append("g")
.attr("class","axis")
.attr("transform", "translate(0, " + chartHeight +")")
.call(xAxis)
.append("text")
.attr({
"x":(chartWidth)/2,
"y":margins.bottom,
"text-anchor":"middle" // set so the (x,y) of the text is in the middle bottom
})
.text("Grade");
</script>
</body>
</html>