forked from mattalcock/hacks
-
Notifications
You must be signed in to change notification settings - Fork 0
/
responsive_d3_example.html
133 lines (101 loc) · 3.15 KB
/
responsive_d3_example.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
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://github.com/mbostock/d3/blob/master/d3.v2.min.js"></script>
<style>
body {
font: 10px sans-serif;
}
rect {
fill: steelblue;
stroke: white;
}
line {
stroke: black;
shape-rendering: crispEdges;
}
</style>
<body>
<div class='histogram' style="width:50%" >
</div>
</body>
<script>
// Generate an Irwin-Hall distribution.
function gen_ih_dist(trails, variables)
{
data = [];
for (var i = 0; i < trails; i++) {
for (var s = 0, j = 0; j < variables; j++) {
s += Math.random();
}
data.push(s);
}
return data;
}
var div_name = "div.histogram";
pos_data = gen_ih_dist(1000, 10);
neg_data = gen_ih_dist(1000, 10);
draw_histogram(div_name, pos_data, neg_data);
//The drawing of the histogram has been broken out from the data retrial
// or computation. (In this case the 'Irwin-Hall distribution' computation above)
function draw_histogram(reference, pos_data, neg_data){
$(reference).empty()
//The drawing code needs to reference a responsive elements dimneions
var width = $(reference).width();
// var width = $(reference).empty().width(); we can chain for effeicanecy as jquery returns jquery.
var height = 250; // We don't want the height to be responsive.
var histogram = d3.layout.histogram() (pos_data);
var neg_histogram = d3.layout.histogram()(neg_data);
var x = d3.scale.ordinal()
.domain(histogram.map(function(d) { return d.x; }))
.rangeRoundBands([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(histogram.map(function(d) { return d.y; }))])
.range([0, height]);
var ny = d3.scale.linear()
.domain([0, d3.max(neg_histogram.map(function(d) { return d.y; }))])
.range([0, height]);
var svg = d3.select(reference).append("svg")
.attr("width", width)
.attr("height", 2 * height);
svg.selectAll("rect")
.data(histogram)
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return height - y(d.y); })
.attr("height", function(d) { return y(d.y); });
svg.selectAll("rect-neg")
.data(neg_histogram)
.enter().append("rect")
.style("fill", "red")
.attr("width", x.rangeBand())
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return height})
.attr("height", function(d) { return ny(d.y); });
svg.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", height)
.attr("y2", height);
};
//Bind the window resize to the draw method.
//A simple bind example is
//$(window).resize(function() {
// draw_histogram(div_name, pos_data, neg_data);
//});
//A better idom for binding with resize is to debounce
var debounce = function(fn, timeout)
{
var timeoutID = -1;
return function() {
if (timeoutID > -1) {
window.clearTimeout(timeoutID);
}
timeoutID = window.setTimeout(fn, timeout);
}
};
var debounced_draw = debounce(function() {
draw_histogram(div_name, pos_data, neg_data);
}, 125);
$(window).resize(debounced_draw);
</script>