[50a3f7]: / modules / HTTPRequest / playground / dist / histogram-chart.js

Download this file

84 lines (66 with data), 2.4 kB

 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
function histogramChart() {
var margin = {top: 0, right: 0, bottom: 20, left: 0},
width = 960,
height = 500;
var histogram = d3.layout.histogram(),
x = d3.scale.ordinal(),
y = d3.scale.linear(),
xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(6, 0);
function chart(selection) {
selection.each(function(data) {
// Compute the histogram.
data = histogram(data);
// Update the x-scale.
x .domain(data.map(function(d) { return d.x; }))
.rangeRoundBands([0, width - margin.left - margin.right], .1);
// Update the y-scale.
y .domain([0, d3.max(data, function(d) { return d.y; })])
.range([height - margin.top - margin.bottom, 0]);
// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg").data([data]);
// Otherwise, create the skeletal chart.
var gEnter = svg.enter().append("svg").append("g");
gEnter.append("g").attr("class", "bars");
gEnter.append("g").attr("class", "x axis");
// Update the outer dimensions.
svg .attr("width", width)
.attr("height", height);
// Update the inner dimensions.
var g = svg.select("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Update the bars.
var bar = svg.select(".bars").selectAll(".bar").data(data);
bar.enter().append("rect");
bar.exit().remove();
bar .attr("width", x.rangeBand())
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("height", function(d) { return y.range()[0] - y(d.y); })
.order();
// Update the x-axis.
g.select(".x.axis")
.attr("transform", "translate(0," + y.range()[0] + ")")
.call(xAxis);
});
}
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return chart;
};
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
// Expose the histogram's value, range and bins method.
d3.rebind(chart, histogram, "value", "range", "bins");
// Expose the x-axis' tickFormat method.
d3.rebind(chart, xAxis, "tickFormat");
return chart;
}