keighty/apples.csv

## apples.csv

          
            Colors
            X
            Y
            Quantity

            
              #9467bd
              1
              8
              91

            
              #1f77b4
              9
              1
              32

            
              #1f77b4
              3
              1
              67

            
              #bcbd22
              5
              5
              63

            
              #9467bd
              6
              6
              57

            
              #2ca02c
              5
              10
              65

            
              #d62728
              8
              2
              36

            
              #9467bd
              2
              8
              82

            
              #bcbd22
              4
              7
              69

            
              #9467bd
              5
              3
              88

            
              #d62728
              1
              5
              29

            
              #1f77b4
              10
              7
              60

            
              #2ca02c
              8
              5
              56

            
              #bcbd22
              1
              6
              31

            
              #bcbd22
              6
              5
              57

            
              #d62728
              9
              6
              85

            
              indigo
              9
              10
              70

            
              indigo
              9
              10
              31

            
              #1f77b4
              2
              4
              26

            
              #bcbd22
              10
              5
              61

            
              #2ca02c
              4
              2
              64

            
              #1f77b4
              8
              9
              71

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

/***********************
  Append image container
***********************/
var svg=d3.select("body").append("svg")
      .attr("width",width)
      .attr("height",height);

/***********************
  Create and append axes
    - tick formatting
***********************/
var xAxis = d3.svg.axis()
  .scale(scaleX)
  .orient("bottom")
  .ticks(5)
  .tickSubdivide(1)
  .tickPadding(10)
  .tickFormat(function(d) { return d + " ticks"});

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);

/***********************
  Get and aggregate data
***********************/
d3.csv("apples.csv",function(csv) {
  data = d3.nest()
          .key(function(d) { return d.Colors; })
          .rollup(aggregateData)
          .entries(csv);

  /***********************
    Draw circles and bind data
  ***********************/
  var selection = svg.selectAll("circle").data(data);

  selection.enter()
    .append("circle")
    .attr("cx",scaleX(0))
    .attr("cy",scaleY(0))
    .attr("r", 0)
    .style("fill", getColor);

  selection.transition().duration(1500)
      .attr("cx",getX)
      .attr("cy",getY)
      .attr("r", getR)
      .style("fill", getColor)
    .transition().delay(1500+200).duration(1500)
      .attr("r", doubleR);

  /***********************
    Helper functions
  ***********************/
  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;
  }
  // Use D3 built in array functions to aggregate data
  function aggregateData(d) {
    return {
      "X": d3.mean(d, function(e) { return +e.X; }),
      "Y": d3.median(d, function(e) { return +e.Y; }),
      "Quantity": d3.max(d, function(e) { return +e.Quantity; })
    };
  }
})
</script>
</body>
</html>
Colors	X	Y	Quantity
#9467bd	1	8	91
#1f77b4	9	1	32
#1f77b4	3	1	67
#bcbd22	5	5	63
#9467bd	6	6	57
#2ca02c	5	10	65
#d62728	8	2	36
#9467bd	2	8	82
#bcbd22	4	7	69
#9467bd	5	3	88
#d62728	1	5	29
#1f77b4	10	7	60
#2ca02c	8	5	56
#bcbd22	1	6	31
#bcbd22	6	5	57
#d62728	9	6	85
indigo	9	10	70
indigo	9	10	31
#1f77b4	2	4	26
#bcbd22	10	5	61
#2ca02c	4	2	64
#1f77b4	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]);

	/***********************
	Append image container
	***********************/
	var svg=d3.select("body").append("svg")
	.attr("width",width)
	.attr("height",height);

	/***********************
	Create and append axes
	- tick formatting
	***********************/
	var xAxis = d3.svg.axis()
	.scale(scaleX)
	.orient("bottom")
	.ticks(5)
	.tickSubdivide(1)
	.tickPadding(10)
	.tickFormat(function(d) { return d + " ticks"});

	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);

	/***********************
	Get and aggregate data
	***********************/
	d3.csv("apples.csv",function(csv) {
	data = d3.nest()
	.key(function(d) { return d.Colors; })
	.rollup(aggregateData)
	.entries(csv);

	/***********************
	Draw circles and bind data
	***********************/
	var selection = svg.selectAll("circle").data(data);

	selection.enter()
	.append("circle")
	.attr("cx",scaleX(0))
	.attr("cy",scaleY(0))
	.attr("r", 0)
	.style("fill", getColor);

	selection.transition().duration(1500)
	.attr("cx",getX)
	.attr("cy",getY)
	.attr("r", getR)
	.style("fill", getColor)
	.transition().delay(1500+200).duration(1500)
	.attr("r", doubleR);

	/***********************
	Helper functions
	***********************/
	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;
	}
	// Use D3 built in array functions to aggregate data
	function aggregateData(d) {
	return {
	"X": d3.mean(d, function(e) { return +e.X; }),
	"Y": d3.median(d, function(e) { return +e.Y; }),
	"Quantity": d3.max(d, function(e) { return +e.Quantity; })
	};
	}
	})
	</script>
	</body>
	</html>