Skip to content

Instantly share code, notes, and snippets.

@mbostock mbostock/.block forked from dchud/README.md
Last active Feb 9, 2016

Embed
What would you like to do?
Streams
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: #000;
fill-opacity: .8;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var m = 5, // number of series
n = 90; // number of values
// Generate random data into five arrays.
var data = d3.range(m).map(function() {
return d3.range(n).map(function() {
return Math.random() * 100 | 0;
});
});
var x = d3.scale.linear()
.domain([0, n - 1])
.range([0, width]);
var y = d3.scale.ordinal()
.domain(d3.range(m))
.rangePoints([0, height], 1);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);
var area = d3.svg.area()
.interpolate("basis")
.x(function(d, i) { return x(i); })
.y0(function(d) { return -d / 2; })
.y1(function(d) { return d / 2; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("path")
.data(data)
.enter().append("path")
.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; })
.style("fill", function(d, i) { return color(i); })
.attr("d", area);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.