keighty/d3.csv()

## d3.csv()
<!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
***********************/

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

/***********************
  Get data
***********************/
  d3.csv("test_data.csv",function(csv) {

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

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

})


</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
	***********************/

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

	/***********************
	Get data
	***********************/
	d3.csv("test_data.csv",function(csv) {

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

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

	})



	</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