selection.each example

This is an example of working with the selection.each() function in d3.js.

Implemented in response to: @dchud's question on twitter.

<!DOCTYPE html>
<html>
    <head>
        <title>3 Dimensional Array</title>
        <script src='https://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>

Modified http://d3js.org/d3.v2.min.js to a secure url

https://d3js.org/d3.v2.min.js