Skip to content

Commit e46b161

Browse files
mbostockmbostock
committed
Update histogram example.
1 parent b42e818 commit e46b161

2 files changed

Lines changed: 113 additions & 67 deletions

File tree

‎examples/histogram/histogram-chart.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
function histogramChart() {
2+
var margin = {top: 0, right: 0, bottom: 20, left: 0},
3+
width = 960,
4+
height = 500;
5+
6+
var histogram = d3.layout.histogram(),
7+
x = d3.scale.ordinal(),
8+
y = d3.scale.linear(),
9+
xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(6, 0);
10+
11+
function chart(selection) {
12+
selection.each(function(data) {
13+
14+
// Compute the histogram.
15+
data = histogram(data);
16+
17+
// Update the x-scale.
18+
x .domain(data.map(function(d) { return d.x; }))
19+
.rangeRoundBands([0, width - margin.left - margin.right], .1);
20+
21+
// Update the y-scale.
22+
y .domain([0, d3.max(data, function(d) { return d.y; })])
23+
.range([height - margin.top - margin.bottom, 0]);
24+
25+
// Select the svg element, if it exists.
26+
var svg = d3.select(this).selectAll("svg").data([data]);
27+
28+
// Otherwise, create the skeletal chart.
29+
var gEnter = svg.enter().append("svg").append("g");
30+
gEnter.append("g").attr("class", "bars");
31+
gEnter.append("g").attr("class", "x axis");
32+
33+
// Update the outer dimensions.
34+
svg .attr("width", width)
35+
.attr("height", height);
36+
37+
// Update the inner dimensions.
38+
var g = svg.select("g")
39+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
40+
41+
// Update the bars.
42+
var bar = svg.select(".bars").selectAll(".bar").data(data);
43+
bar.enter().append("rect");
44+
bar.exit().remove();
45+
bar .attr("width", x.rangeBand())
46+
.attr("x", function(d) { return x(d.x); })
47+
.attr("y", function(d) { return y(d.y); })
48+
.attr("height", function(d) { return y.range()[0] - y(d.y); })
49+
.order();
50+
51+
// Update the x-axis.
52+
g.select(".x.axis")
53+
.attr("transform", "translate(0," + y.range()[0] + ")")
54+
.call(xAxis);
55+
});
56+
}
57+
58+
chart.margin = function(_) {
59+
if (!arguments.length) return margin;
60+
margin = _;
61+
return chart;
62+
};
63+
64+
chart.width = function(_) {
65+
if (!arguments.length) return width;
66+
width = _;
67+
return chart;
68+
};
69+
70+
chart.height = function(_) {
71+
if (!arguments.length) return height;
72+
height = _;
73+
return chart;
74+
};
75+
76+
// Expose the histogram's value, range and bins method.
77+
d3.rebind(chart, histogram, "value", "range", "bins");
78+
79+
// Expose the x-axis' tickFormat method.
80+
d3.rebind(chart, xAxis, "tickFormat");
81+
82+
return chart;
83+
}

‎examples/histogram/histogram.html‎

Lines changed: 30 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,42 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Histogram</title>
5-
<script type="text/javascript" src="../../d3.v2.js"></script>
6-
<style type="text/css">
2+
<meta charset="utf-8">
3+
<style>
74

8-
body {
9-
font: 10px sans-serif;
5+
.bars rect {
6+
fill: steelblue;
107
}
118

12-
rect {
13-
fill: steelblue;
14-
stroke: white;
9+
.axis text {
10+
font: 10px sans-serif;
1511
}
1612

17-
line {
18-
stroke: black;
13+
.axis path, .axis line {
14+
fill: none;
15+
stroke: #000;
1916
shape-rendering: crispEdges;
2017
}
2118

22-
</style>
23-
</head>
24-
<body>
25-
<script type="text/javascript">
26-
27-
var n = 10000, // number of trials
28-
m = 10, // number of random variables
29-
data = [];
30-
31-
// Generate an Irwin-Hall distribution.
32-
for (var i = 0; i < n; i++) {
33-
for (var s = 0, j = 0; j < m; j++) {
34-
s += Math.random();
19+
</style>
20+
<body>
21+
<script src="d3.v2.js"></script>
22+
<script src="histogram-chart.js"></script>
23+
<script>
24+
25+
d3.select("body")
26+
.datum(irwinHallDistribution(10000, 10))
27+
.call(histogramChart()
28+
.bins(d3.scale.linear().ticks(20))
29+
.tickFormat(d3.format(".02f")));
30+
31+
function irwinHallDistribution(n, m) {
32+
var 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+
distribution.push(s / m);
3538
}
36-
data.push(s);
39+
return distribution;
3740
}
3841

39-
var w = 400,
40-
h = 400;
41-
42-
var histogram = d3.layout.histogram()
43-
(data);
44-
45-
var x = d3.scale.ordinal()
46-
.domain(histogram.map(function(d) { return d.x; }))
47-
.rangeRoundBands([0, w]);
48-
49-
var y = d3.scale.linear()
50-
.domain([0, d3.max(histogram, function(d) { return d.y; })])
51-
.range([0, h]);
52-
53-
var vis = d3.select("body").append("svg")
54-
.attr("width", w)
55-
.attr("height", h)
56-
.append("g")
57-
.attr("transform", "translate(.5)");
58-
59-
vis.selectAll("rect")
60-
.data(histogram)
61-
.enter().append("rect")
62-
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + (h - y(d.y)) + ")"; })
63-
.attr("width", x.rangeBand())
64-
.attr("y", function(d) { return y(d.y); })
65-
.attr("height", 0)
66-
.transition()
67-
.duration(750)
68-
.attr("y", 0)
69-
.attr("height", function(d) { return y(d.y); });
70-
71-
vis.append("line")
72-
.attr("x1", 0)
73-
.attr("x2", w)
74-
.attr("y1", h)
75-
.attr("y2", h);
76-
77-
</script>
78-
</body>
79-
</html>
42+
</script>

0 commit comments

Comments
 (0)