milroc/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is an example of working with the selection.each() function in d3.js.
Implemented in response to: @dchud's question on twitter.

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>