Skip to content

Instantly share code, notes, and snippets.

@milroc
Forked from dchud/README.md
Last active October 13, 2015 20:57
Show Gist options
  • Save milroc/4254604 to your computer and use it in GitHub Desktop.
Save milroc/4254604 to your computer and use it in GitHub Desktop.
selection.each example
<!DOCTYPE html>
<html>
<head>
<title>3 Dimensional Array</title>
<script src='http://d3js.org/d3.v2.min.js' type='text/javascript'></script>
</head>
<body>
<script type='text/javascript'>
var width = 900;
var height = 400;
// generate random data into five arrays
var data = d3.range(5).map(function() { return d3.range(90).map(function() { return Math.floor(Math.random() * 100)})});
var max = d3.max(data, function (d) { return d3.max(d); } ),
min = d3.min(data, function (d) { return d3.min(d); })
graphHeight = height/data.length,
middle = graphHeight/2;
var x = d3.scale.linear()
.domain([min, max])
.range([0, width]);
var y = d3.scale.linear()
.domain([-max, max])
.range([graphHeight, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);
var container = d3.select('body').append('div')
.attr('width', width)
.attr('height', height);
container.selectAll('svg')
.data(data)
.enter().append('svg')
.attr('width', '100%')
.attr('height', graphHeight)
.each(function(d, i) {
d3.select(this).selectAll('path.area')
.data([d])
.enter()
.append('path')
.attr('class', 'path')
.attr('stroke', 'black')
.attr('stroke-width', 1)
.attr('opacity', 0.8)
.style('fill', color(i))
.attr('d', d3.svg.area()
.interpolate('bundle')
.x(function(e, j) { return x(j); }) //e, j for clarity sake, may still work without it
.y0(function(e) { return middle + y(e); })
.y1(function(e) { return middle - y(e); })
);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment