chrisbrich · December 7, 2012 03:20
diff --git a/index.html b/index.html
 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">

 <title>my example</title>

 <style>
 .lakers {
  fill: purple;
  stroke: yellow;
  stroke-width: 2;opacity: 0.99;
 }

 .chargers {
  fill: yellow;
  stroke: blue;
  stroke-width: 3;
  opacity: 0.95;
 }
 

 .states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
 }

 .q0-9 { fill:rgb(247,251,255); }
 .q1-9 { fill:rgb(222,235,247); }
 .q2-9 { fill:rgb(198,219,239); }
 .q3-9 { fill:rgb(158,202,225); }
 .q4-9 { fill:rgb(107,174,214); }
 .q5-9 { fill:rgb(66,146,198); }
 .q6-9 { fill:rgb(33,113,181); }
 .q7-9 { fill:rgb(8,81,156); }
 .q8-9 { fill:rgb(8,48,107); }


    </style>

 </head>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/queue.v1.min.js"></script>
 <script src="http://d3js.org/topojson.v0.min.js"></script>
 <h2> Here are some circles I made using the "g" method of grouping svg parts together:</h2>
 <script>
 		var dataset = [ 5, 10, 15, 20, 25 ];
 		var dataset2 = [ 21, 13, 8, 5, 3, 1 ];

 		//Width and height
 		var w = 500;
 		var h = 300;

 		var svg = d3.select("body")
 					.append("svg")
 					.attr("width", w)   // <-- Here
 					.attr("height", h); // <-- and here!

 		var circles = svg.selectAll("circle")
 			.data(dataset)
 			.enter()
 			.append("circle");			


 		circles.attr("cx", function(d, i) {
 				return (i * 50) + 25;
 			})
 		   .attr("cy", h-150)
 		   .attr("r", function(d) {
 				return d;
 		   })
 		   .attr("class","lakers");

 		   var circlez = svg.append("g").selectAll("circle")
 			.data(dataset2)
 			.enter()
 			.append("circle");			


 		circlez.attr("cx", function(d, i) {
 				return (i * 50) + 25;
 			})
 		   .attr("cy", h-50)
 		   .attr("r", function(d) {
 				return d;
 		   })
 		   .attr("class","chargers");

 </script>
 <p>It works!</p>
 <h2> Now, let's try to plot the choropleth from <a href="http://bl.ocks.org/4060606">this example</a> (it doesn't work).</h2>
 <script>

 var width = 960,
    height = 500;

 var quantize = d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

 var path = d3.geo.path();

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

 queue()
    .defer(d3.json, "https://gist.github.com/4090846.js?file=us.json")
    .defer(d3.tsv, "https://gist.github.com/4060606.js?file=unemployment.tsv")
    .await(ready);

 function ready(error, us, unemployment) {
  var rateById = {};

  unemployment.forEach(function(d) { rateById[d.id] = +d.rate; });

  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(topojson.object(us, us.objects.counties).geometries)
    .enter().append("path")
      .attr("class", function(d) { return quantize(rateById[d.id]); })
      .attr("d", path);

  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
      .attr("class", "states")
      .attr("d", path);
 }

 </script>


 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<title>my example</title>

	<style>
	.lakers {
	fill: purple;
	stroke: yellow;
	stroke-width: 2;opacity: 0.99;
	}

	.chargers {
	fill: yellow;
	stroke: blue;
	stroke-width: 3;
	opacity: 0.95;
	}


	.states {
	fill: none;
	stroke: #fff;
	stroke-linejoin: round;
	}

	.q0-9 { fill:rgb(247,251,255); }
	.q1-9 { fill:rgb(222,235,247); }
	.q2-9 { fill:rgb(198,219,239); }
	.q3-9 { fill:rgb(158,202,225); }
	.q4-9 { fill:rgb(107,174,214); }
	.q5-9 { fill:rgb(66,146,198); }
	.q6-9 { fill:rgb(33,113,181); }
	.q7-9 { fill:rgb(8,81,156); }
	.q8-9 { fill:rgb(8,48,107); }


	</style>

	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<h2> Here are some circles I made using the "g" method of grouping svg parts together:</h2>
	<script>
	var dataset = [ 5, 10, 15, 20, 25 ];
	var dataset2 = [ 21, 13, 8, 5, 3, 1 ];

	//Width and height
	var w = 500;
	var h = 300;

	var svg = d3.select("body")
	.append("svg")
	.attr("width", w) // <-- Here
	.attr("height", h); // <-- and here!

	var circles = svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle");


	circles.attr("cx", function(d, i) {
	return (i * 50) + 25;
	})
	.attr("cy", h-150)
	.attr("r", function(d) {
	return d;
	})
	.attr("class","lakers");

	var circlez = svg.append("g").selectAll("circle")
	.data(dataset2)
	.enter()
	.append("circle");


	circlez.attr("cx", function(d, i) {
	return (i * 50) + 25;
	})
	.attr("cy", h-50)
	.attr("r", function(d) {
	return d;
	})
	.attr("class","chargers");

	</script>
	<p>It works!</p>
	<h2> Now, let's try to plot the choropleth from <a href="http://bl.ocks.org/4060606">this example</a> (it doesn't work).</h2>
	<script>

	var width = 960,
	height = 500;

	var quantize = d3.scale.quantize()
	.domain([0, .15])
	.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

	var path = d3.geo.path();

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

	queue()
	.defer(d3.json, "https://gist.github.com/4090846.js?file=us.json")
	.defer(d3.tsv, "https://gist.github.com/4060606.js?file=unemployment.tsv")
	.await(ready);

	function ready(error, us, unemployment) {
	var rateById = {};

	unemployment.forEach(function(d) { rateById[d.id] = +d.rate; });

	svg.append("g")
	.attr("class", "counties")
	.selectAll("path")
	.data(topojson.object(us, us.objects.counties).geometries)
	.enter().append("path")
	.attr("class", function(d) { return quantize(rateById[d.id]); })
	.attr("d", path);

	svg.append("path")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
	.attr("class", "states")
	.attr("d", path);
	}

	</script>


	</body>
	</html>