Skip to content

Commit 370818e

Browse files
mbostockmbostock
committed
Add stack -> group animation example.
1 parent ae0d06f commit 370818e

3 files changed

Lines changed: 157 additions & 18 deletions

File tree

‎examples/stream/stack.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Stacked Bar Chart</title>
5+
<script type="text/javascript" src="../../d3.js"></script>
6+
<script type="text/javascript" src="stream.js"></script>
7+
<script type="text/javascript" src="stack.js"></script>
8+
<style type="text/css">
9+
10+
svg {
11+
font: 10px sans-serif;
12+
}
13+
14+
rect {
15+
shape-rendering: crispEdges;
16+
}
17+
18+
line {
19+
stroke: black;
20+
shape-rendering: crispEdges;
21+
}
22+
23+
button {
24+
font: 14px Helvetica Neue;
25+
background: #222 url(http://bost.ocks.org/button-overlay.png) repeat-x;
26+
color: #fff;
27+
text-rendering: optimizeLegibility;
28+
text-shadow: 0 -1px 1px #222;
29+
padding: 6px 10px 6px 10px;
30+
border: 0;
31+
border-bottom: 1px solid #222;
32+
-moz-border-radius: 5px;
33+
-moz-box-shadow: 0 1px 3px #999;
34+
-webkit-border-radius: 5px;
35+
-webkit-box-shadow: 0 1px 3px #999;
36+
}
37+
38+
button:hover {
39+
background-color: #555;
40+
}
41+
42+
</style>
43+
</head>
44+
<body>
45+
<script type="text/javascript">
46+
47+
var n = 4, // number of layers
48+
m = 64, // number of samples per layer
49+
data = stack(stream_layers(n, m, .1)),
50+
color = d3.interpolateRgb("#aad", "#556");
51+
52+
var p = 20,
53+
w = 960,
54+
h = 500 - p,
55+
mx = m,
56+
my = max(data, function(d) { return max(d, function(d) { return d.y0 + d.y; }); }),
57+
x = function(d) { return d.x * w / mx; },
58+
y0 = function(d) { return h - d.y0 * h / my; },
59+
y1 = function(d) { return h - (d.y + d.y0) * h / my; };
60+
61+
var vis = d3.select("body")
62+
.add("svg:svg")
63+
.attr("width", w)
64+
.attr("height", h + p);
65+
66+
var layers = vis.selectAll("g.layer")
67+
.data(data)
68+
.enter.add("svg:g")
69+
.attr("fill", function(d) { return color(this.index / (n - 1)); })
70+
.attr("class", "layer");
71+
72+
var bars = layers.selectAll("g.bar")
73+
.data(function(d) { return d; })
74+
.enter.add("svg:g")
75+
.attr("class", "bar")
76+
.attr("transform", function(d) { return "translate(" + x(d) + ",0)"; });
77+
78+
bars.add("svg:rect")
79+
.attr("width", x({x: .9}))
80+
.attr("y", h)
81+
.attr("height", 0)
82+
.transition()
83+
.delay(function() { return this.index * 10; })
84+
.tweenAttr("y", y1)
85+
.tweenAttr("height", function(d) { return y0(d) - y1(d); });
86+
87+
// bars.filter(function(d) { return y0(d) - y1(d) > 12; })
88+
// .add("svg:text")
89+
// .attr("x", x({x: .45}))
90+
// .attr("y", function(d) { return y1(d) + 6; })
91+
// .attr("dx", 0)
92+
// .attr("dy", ".71em")
93+
// .attr("fill", "white")
94+
// .attr("text-anchor", "middle")
95+
// .text(function(d) { return d.y.toFixed(2); });
96+
97+
var labels = vis.selectAll("text.label")
98+
.data(data[0])
99+
.enter.add("svg:text")
100+
.attr("class", "label")
101+
.attr("x", x)
102+
.attr("y", h + 6)
103+
.attr("dx", x({x: .45}))
104+
.attr("dy", ".71em")
105+
.attr("text-anchor", "middle")
106+
.text(function() { return this.index; });
107+
108+
vis.add("svg:line")
109+
.attr("x1", 0)
110+
.attr("x2", w - x({x: .1}))
111+
.attr("y1", h)
112+
.attr("y2", h);
113+
114+
vis.apply();
115+
116+
var t = d3.selectAll("g.layer")
117+
.data(data)
118+
.attr("transform", "translate(0,0)");
119+
120+
t.transition()
121+
.duration(500)
122+
.tweenAttr("transform", function(d) { return "translate(" + x({x: .9 * this.index / n}) + ",0)"; });
123+
124+
t.selectAll("rect")
125+
.data(function(d) { return d; })
126+
.transition()
127+
.duration(500)
128+
.tweenAttr("width", x({x: .9 / n}))
129+
.end.transition()
130+
.duration(500)
131+
.tweenAttr("y", function(d) { return h - y0(d) + y1(d); });
132+
133+
</script><br>
134+
<button onclick="t.apply()">
135+
Group
136+
</button>
137+
</body>
138+
</html>

‎examples/stream/stream.html‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -68,22 +68,6 @@
6868
return p.join("");
6969
}
7070

71-
function max(array, f) {
72-
var i = 1,
73-
n = array.length,
74-
j = 0,
75-
v = f(array[0]),
76-
k;
77-
for (; i < n; ++i) {
78-
k = f(array[i]);
79-
if (k > v) {
80-
j = i;
81-
v = k;
82-
}
83-
}
84-
return v;
85-
}
86-
8771
</script>
8872
</body>
8973
</html>

‎examples/stream/stream.js‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* Inspired by Lee Byron's test data generator. */
2-
function stream_layers(n, m) {
2+
function stream_layers(n, m, o) {
3+
if (arguments.length < 3) o = 0;
34
function bump(a) {
45
var x = 1 / (.1 + Math.random()),
56
y = 2 * Math.random() - .5,
@@ -11,7 +12,7 @@ function stream_layers(n, m) {
1112
}
1213
return range(n).map(function() {
1314
var a = [], i;
14-
for (i = 0; i < m; i++) a[i] = 0;
15+
for (i = 0; i < m; i++) a[i] = o + o * Math.random();
1516
for (i = 0; i < 5; i++) bump(a);
1617
return a.map(stream_index);
1718
});
@@ -36,3 +37,19 @@ function range(n) {
3637
for (var i = 0; i < n; i++) array.push(i);
3738
return array;
3839
}
40+
41+
function max(array, f) {
42+
var i = 1,
43+
n = array.length,
44+
j = 0,
45+
v = f(array[0]),
46+
k;
47+
for (; i < n; ++i) {
48+
k = f(array[i]);
49+
if (k > v) {
50+
j = i;
51+
v = k;
52+
}
53+
}
54+
return v;
55+
}

0 commit comments

Comments
 (0)