Skip to content

Instantly share code, notes, and snippets.

@bstaats

bstaats/index.html

Created July 25, 2011 05:53
Show Gist options
  • Save bstaats/1103631 to your computer and use it in GitHub Desktop.
Save bstaats/1103631 to your computer and use it in GitHub Desktop.
Download ZIP
chart2 path's dont stay within the viewport bounds. Its not consistent. Have to refresh multiple times
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Streamgraph</title>
<script src="http://mbostock.github.com/d3/d3.min.js?1.28.0"></script>
<script src="http://mbostock.github.com/d3/d3.layout.min.js?1.28.0"></script>
</head>
<body>
<div id="chart">
</div>
<div id="chart2">
</div>
<script type="text/javascript" src="stream.js"></script>
</body>
</html>
Raw
stream.js
/* Inspired by Lee Byron's test data generator. */
function stream_layers(n, m, o) {
if (arguments.length < 3) o = 0;
function bump(a) {
var x = 1 / (.1 + Math.random()),
y = 2 * Math.random() - .5,
z = 10 / (.1 + Math.random());
for (var i = 0; i < m; i++) {
var w = (i / m - y) * z;
a[i] += x * Math.exp(-w * w);
}
}
return d3.range(n).map(function() {
var a = [], i;
for (i = 0; i < m; i++) a[i] = o + o * Math.random();
for (i = 0; i < 5; i++) bump(a);
return a.map(stream_index);
});
}
/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
return d3.range(n).map(function(i) {
return d3.range(m).map(function(j) {
var x = 20 * j / m - i / 3;
return 2 * x * Math.exp(-.5 * x);
}).map(stream_index);
});
}
function stream_index(d, i) {
return {x: i, y: Math.max(0, d)};
}
var n = 4, // number of layers
m = 12, // number of samples per layer
data0 = d3.layout.stack().offset("zero")(stream_layers(n, m)),
data1 = d3.layout.stack().offset("zero")(stream_layers(n, m)),
color = d3.interpolateRgb("#aad", "#556");
var w = 960,
h = 200,
mx = m - 1,
my = d3.max(data0, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
}),
my1 = d3.max(data1, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
});
var zeroarea = d3.svg.area()
.interpolate('basis')
.x(function(d) { return d.x * w / mx; })
.y0(h)
.y1(h);
var area = d3.svg.area()
.interpolate('basis')
.x(function(d) { return d.x * w / mx; })
.y0(function(d) { return h - d.y0 * h / my; })
.y1(function(d) { return h - (d.y + d.y0) * h / my; });
var area1 = d3.svg.area()
.interpolate('basis')
.x(function(d) { return d.x * w / mx; })
.y0(function(d) { return h - d.y0 * h / my1; })
.y1(function(d) { return h - (d.y + d.y0) * h / my1; });
var vis = d3.select("#chart")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
vis.append("svg:rect")
.attr("width", w)
.attr("height", h);
vis.selectAll("path")
.data(data0)
.enter().append("svg:path")
.style("fill", function() { return color(Math.random()); })
.attr("d", zeroarea)
.transition()
.duration(1000)
.attr("d", area);
var vis2 = d3.select("#chart2")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
vis2.append("svg:rect")
.attr("width", w)
.attr("height", h);
vis2.selectAll("path")
.data(data1)
.enter().append("svg:path")
.style("fill", function() { return color(Math.random()); })
.attr("d", zeroarea)
.transition()
.duration(1000)
.attr("d", area1);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment