keighty/next() and rollup()

## next() and rollup()
<!DOCTYPE html>
<meta charset="utf-8">
<head><style>
body{margin:0px;}
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style></head>
<body>
<script src="http://mbostock.github.com/d3/d3.v2.min.js"></script>

<script>

var width = 500,
    height = 500,
    margin = 50;

/***********************
  Create Scales
  TODO: how to add labels to axes?
***********************/

var scaleX=d3.scale.linear().domain([0,10]).range([margin,width-margin]);
var scaleY=d3.scale.linear().domain([0,10]).range([height-margin,margin]);

var svg=d3.select("body").append("svg")
      .attr("width",width)
      .attr("height",height);

var xAxis = d3.svg.axis()
  .scale(scaleX)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(scaleY)
  .orient("left");

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + (height - margin) + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + margin + ",0)")
  .call(yAxis);

var data;
/***********************
  Get data
***********************/
  d3.csv("test_data.csv",function(csv) {
    data = d3.nest()
            .key(function(d) { return d.Colors; })
            .rollup( function(d) {
              return {
                "X": d3.mean(d, function(e) { return +e.X; }),
                "Y": d3.mean(d, function(e) { return +e.Y; }),
                "Quantity": d3.mean(d, function(e) { return +e.Quantity; })
              };
            })
            .entries(csv);

  /***********************
    Draw circles and bind data
  ***********************/
  svg.selectAll("circle").data(data).enter()
    .append("circle")
    .attr("cx",getX)
    .attr("cy",getY)
    .attr("r", getR)
    .style("fill", getColor);

  function getX(d) {
    return scaleX(d.values.X);
  }
  function getY(d) {
    return scaleY(d.values.Y);
  }
  function getR(d) {
    return d.values.Quantity / 10;
  }
  function getColor(d) {
    return d.key;
  }
})


</script>


</body>
</html>

## test_data.csv

          
            Colors
            X
            Y
            Quantity

            
              violet
              1
              8
              91

            
              blue
              9
              1
              32

            
              blue
              3
              1
              67

            
              yellow
              5
              5
              63

            
              violet
              6
              6
              57

            
              green
              5
              10
              65

            
              red
              8
              2
              36

            
              violet
              2
              8
              82

            
              yellow
              4
              7
              69

            
              violet
              5
              3
              88

            
              red
              1
              5
              29

            
              blue
              10
              7
              60

            
              green
              8
              5
              56

            
              yellow
              1
              6
              31

            
              yellow
              6
              5
              57

            
              red
              9
              6
              85

            
              indigo
              9
              10
              70

            
              indigo
              9
              10
              31

            
              blue
              2
              4
              26

            
              yellow
              10
              5
              61

            
              green
              4
              2
              64

            
              blue
              8
              9
              71
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head><style>
	body{margin:0px;}
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	</style></head>
	<body>
	<script src="http://mbostock.github.com/d3/d3.v2.min.js"></script>

	<script>

	var width = 500,
	height = 500,
	margin = 50;

	/***********************
	Create Scales
	TODO: how to add labels to axes?
	***********************/

	var scaleX=d3.scale.linear().domain([0,10]).range([margin,width-margin]);
	var scaleY=d3.scale.linear().domain([0,10]).range([height-margin,margin]);

	var svg=d3.select("body").append("svg")
	.attr("width",width)
	.attr("height",height);

	var xAxis = d3.svg.axis()
	.scale(scaleX)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(scaleY)
	.orient("left");

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + (height - margin) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + margin + ",0)")
	.call(yAxis);

	var data;
	/***********************
	Get data
	***********************/
	d3.csv("test_data.csv",function(csv) {
	data = d3.nest()
	.key(function(d) { return d.Colors; })
	.rollup( function(d) {
	return {
	"X": d3.mean(d, function(e) { return +e.X; }),
	"Y": d3.mean(d, function(e) { return +e.Y; }),
	"Quantity": d3.mean(d, function(e) { return +e.Quantity; })
	};
	})
	.entries(csv);

	/***********************
	Draw circles and bind data
	***********************/
	svg.selectAll("circle").data(data).enter()
	.append("circle")
	.attr("cx",getX)
	.attr("cy",getY)
	.attr("r", getR)
	.style("fill", getColor);

	function getX(d) {
	return scaleX(d.values.X);
	}
	function getY(d) {
	return scaleY(d.values.Y);
	}
	function getR(d) {
	return d.values.Quantity / 10;
	}
	function getColor(d) {
	return d.key;
	}
	})



	</script>


	</body>
	</html>
Colors	X	Y	Quantity
violet	1	8	91
blue	9	1	32
blue	3	1	67
yellow	5	5	63
violet	6	6	57
green	5	10	65
red	8	2	36
violet	2	8	82
yellow	4	7	69
violet	5	3	88
red	1	5	29
blue	10	7	60
green	8	5	56
yellow	1	6	31
yellow	6	5	57
red	9	6	85
indigo	9	10	70
indigo	9	10	31
blue	2	4	26
yellow	10	5	61
green	4	2	64
blue	8	9	71