jshumakerpruitt · May 18, 2014 14:52
diff --git a/bus_perf.json b/bus_perf.json
 [{"collision_with_injury": 3.2, "dist_between_fail": 3924.0, "customer_accident_rate": 2.12}, {"collision_with_injury": 2.8, "dist_between_fail": 3914.0, "customer_accident_rate": 1.3}, {"collision_with_injury": 4.05, "dist_between_fail": 3550.0, "customer_accident_rate": 1.5}, {"collision_with_injury": 4.7, "dist_between_fail": 3625.0, "customer_accident_rate": 0.79}, {"collision_with_injury": 2.0, "dist_between_fail": 3171.0, "customer_accident_rate": 2.8}, {"collision_with_injury": 9.29, "dist_between_fail": 2699.0, "customer_accident_rate": 1.28}, {"collision_with_injury": 9.29, "dist_between_fail": 3008.0, "customer_accident_rate": 1.28}, {"collision_with_injury": 2.3, "dist_between_fail": 2815.0, "customer_accident_rate": 1.74}, {"collision_with_injury": 4.65, "dist_between_fail": 3366.0, "customer_accident_rate": 1.17}, {"collision_with_injury": 5.32, "dist_between_fail": 3667.0, "customer_accident_rate": 0.82}, {"collision_with_injury": 4.1, "dist_between_fail": 4170.0, "customer_accident_rate": 0.8}, {"collision_with_injury": 3.87, "dist_between_fail": 3294.0, "customer_accident_rate": 1.01}, {"collision_with_injury": 3.43, "dist_between_fail": 3595.0, "customer_accident_rate": 1.31}, {"collision_with_injury": 6.23, "dist_between_fail": 4067.0, "customer_accident_rate": 1.54}, {"collision_with_injury": 3.82, "dist_between_fail": 3353.0, "customer_accident_rate": 1.03}, {"collision_with_injury": 6.91, "dist_between_fail": 3743.0, "customer_accident_rate": 1.17}, {"collision_with_injury": 9.31, "dist_between_fail": 3259.0, "customer_accident_rate": 1.36}, {"collision_with_injury": 7.01, "dist_between_fail": 3184.0, "customer_accident_rate": 1.25}, {"collision_with_injury": 7.08, "dist_between_fail": 2813.0, "customer_accident_rate": 1.96}, {"collision_with_injury": 10.3, "dist_between_fail": 3119.0, "customer_accident_rate": 0.63}, {"collision_with_injury": 3.74, "dist_between_fail": 3494.0, "customer_accident_rate": 1.27}, {"collision_with_injury": 4.37, "dist_between_fail": 3426.0, "customer_accident_rate": 1.21}, {"collision_with_injury": 5.22, "dist_between_fail": 3415.0, "customer_accident_rate": 1.76}, {"collision_with_injury": 3.98, "dist_between_fail": 3585.0, "customer_accident_rate": 1.17}, {"collision_with_injury": 6.17, "dist_between_fail": 3162.0, "customer_accident_rate": 1.01}, {"collision_with_injury": 1.92, "dist_between_fail": 3047.0, "customer_accident_rate": 1.02}, {"collision_with_injury": 5.15, "dist_between_fail": 3650.0, "customer_accident_rate": 0.83}]
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="scatter.js"></script>
  </head>
  <body>
    <div id="canv"></div>
    <script>
      d3.json("bus_perf.json", draw);
    </script>
  </body>
 </html>


diff --git a/scatter.js b/scatter.js
 function draw(data){

    var margin =  50
    var w=700
    var h=300;

    var  x_extent  = d3.extent(data, function(d){return d.collision_with_injury;});
    var x_scale  = d3.scale.linear().range([margin,w-margin]).domain(x_extent);
    var y_extent =  d3.extent(data,  function(d){  return d.dist_between_fail });
    var y_scale  =  d3.scale.linear().range([h-margin, margin]).domain(y_extent);


    var svg = d3.select("#canv").append("svg")
    .attr("height",h)
    .attr("width",w);

    svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle");
    svg.selectAll("circle").attr("cx", function(d){ return x_scale(d.collision_with_injury)})
    .attr("cy", function(d){return y_scale(d.dist_between_fail)})
    .attr("r", 5)
    .attr("fill",  "blue");
 }
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="scatter.js"></script>
	</head>
	<body>
	<div id="canv"></div>
	<script>
	d3.json("bus_perf.json", draw);
	</script>
	</body>
	</html>
	function draw(data){

	var margin = 50
	var w=700
	var h=300;

	var x_extent = d3.extent(data, function(d){return d.collision_with_injury;});
	var x_scale = d3.scale.linear().range([margin,w-margin]).domain(x_extent);
	var y_extent = d3.extent(data, function(d){ return d.dist_between_fail });
	var y_scale = d3.scale.linear().range([h-margin, margin]).domain(y_extent);


	var svg = d3.select("#canv").append("svg")
	.attr("height",h)
	.attr("width",w);

	svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle");
	svg.selectAll("circle").attr("cx", function(d){ return x_scale(d.collision_with_injury)})
	.attr("cy", function(d){return y_scale(d.dist_between_fail)})
	.attr("r", 5)
	.attr("fill", "blue");
	}