Skip to content

Instantly share code, notes, and snippets.

@teeler

teeler/d3-stream.html

Created September 6, 2011 16:12
Show Gist options
  • Save teeler/1198017 to your computer and use it in GitHub Desktop.
Save teeler/1198017 to your computer and use it in GitHub Desktop.
Download ZIP
d3 stream weirdness
Raw
d3-stream.html
<!DOCTYPE html>
<html>
<head>
<title>Streamgraph</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
</head>
<body>
<div id="chart">
</div>
<script type="text/javascript">
function doit(n,m,data) {
var data0 = d3.layout.stack().offset("wiggle").values(function(d){return d.d})(data)
data1 = d3.layout.stack().offset("wiggle").values(function(d){return d.d})(data),
color = d3.interpolateRgb("#aad", "#556");
var w = 960,
h = 500,
mx = m - 1,
my = d3.max(data0.concat(data1), function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
});
var area = d3.svg.area()
.x(function(d) { console.log(d); return d.x * w / mx; })
.y0(function(d) { console.log(d); return h - d.y0 * h / my; })
.y1(function(d) { console.log(d); return h - (d.y + d.y0) * h / my; });
var vis = d3.select("#chart")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
vis.selectAll("path")
.data(data0)
.enter().append("svg:path")
.style("fill", function() { return color(Math.random()); })
.attr("d", area);
}
var s = [
{d: [ {x:0, y:1},
{x:1, y:1},
{x:2, y:2} ]},
{d: [ {x:0, y:1},
{x:1, y:1},
{x:2, y:2} ]} ];
doit(2,3,s);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment