emeeks · December 12, 2015 03:38
diff --git a/city-topic-pct.csv b/city-topic-pct.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 html, body {
  height: 100%;
  width: 100%;
  color: #444;
  font: 1em/1 "Hoefler Text", "Georgia", Georgia, serif, sans-serif;
  padding: 10px;

 }

 #viz {
  height: 100%;
  width: 50%;
  float: left;
 }

 </style>
 <script src="http://d3js.org/d3.v3.min.js"></script>

 <body>
 <div id="viz">
 </div>
 </body>

 <script>
  
      var vis = d3.select("#viz")
        .append("svg:svg")
            .attr("width", 500)
            .attr("height", 500);
            
      radius = 30;
      xinc = 100;
      
      var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

    var pie = d3.layout.pie()
      .sort(null)
      .value(function(d) { return d; });

  d3.csv("city-topic-pct.csv", function(error, nodescsv){
    newdata = nodescsv;
    
    gcities = vis.selectAll("g.cities").data(nodescsv).enter().append("g").attr("class", "cities").attr("transform", function(d,i) {return "translate(" + (100 + (i%5 * 90)) + "," + (100 + (i%8 * 50)) + ")"});
    
     var g = gcities.selectAll(".arc")
      .data(function (d) {return pie([d.habitat, d.parks])})
    .enter().append("g")
      .attr("class", "arc");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d,i) { return i==0 ? "green" : "brown"; });

  gcities.append("text")
 //      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.name; });
      


  })

 </script>
diff --git a/thumbnail.png b/thumbnail.png
name	habitat	parks
Albuquerque	0.044	0.043
Atlanta	0.005	0.013
Austin	0.041	0.043
Baltimore	0.008	0.035
Charlotte	0.001	0.053
Chicago	0.02	0.029
Columbus	0.039	0.042
Dallas	0.022	0.055
Denver	0.012	0.064
Detroit	0.017	0.026
El Paso	0.019	0.01
Fort Worth	0.006	0.027
Fresno	0.036	0.03
Indianapolis	0.044	0.013
Jacksonville	0.05	0.131
Kansas City	0.054	0.014
Las Vegas	0.008	0.024
Long Beach	0.02	0.109
Los Angeles	0.025	0.045
Louisville	0.059	0.049
Mesa	0.039	0.05
Milwaukee	0.023	0.038
Nashville	0.066	0.021
New York	0.033	0.202
Oklahoma City	0.04	0.029
Philadelphia	0.031	0.09
Phoenix	0.051	0.036
Portland	0.031	0.007
Sacramento	0.021	0.042
San Antonio	0.043	0.006
San Diego	0.045	0.077
San Francisco	0.015	0.059
San Jose	0.034	0.034
Seattle	0.03	0.068
Tucson	0.151	0.032
Virginia Beach	0.039	0.046
Washington	0.017	0.034
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	html, body {
	height: 100%;
	width: 100%;
	color: #444;
	font: 1em/1 "Hoefler Text", "Georgia", Georgia, serif, sans-serif;
	padding: 10px;

	}

	#viz {
	height: 100%;
	width: 50%;
	float: left;
	}

	</style>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<body>
	<div id="viz">
	</div>
	</body>

	<script>

	var vis = d3.select("#viz")
	.append("svg:svg")
	.attr("width", 500)
	.attr("height", 500);

	radius = 30;
	xinc = 100;

	var arc = d3.svg.arc()
	.outerRadius(radius - 10)
	.innerRadius(0);

	var pie = d3.layout.pie()
	.sort(null)
	.value(function(d) { return d; });

	d3.csv("city-topic-pct.csv", function(error, nodescsv){
	newdata = nodescsv;

	gcities = vis.selectAll("g.cities").data(nodescsv).enter().append("g").attr("class", "cities").attr("transform", function(d,i) {return "translate(" + (100 + (i%5 * 90)) + "," + (100 + (i%8 * 50)) + ")"});

	var g = gcities.selectAll(".arc")
	.data(function (d) {return pie([d.habitat, d.parks])})
	.enter().append("g")
	.attr("class", "arc");

	g.append("path")
	.attr("d", arc)
	.style("fill", function(d,i) { return i==0 ? "green" : "brown"; });

	gcities.append("text")
	// .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
	.attr("dy", ".35em")
	.style("text-anchor", "middle")
	.text(function(d) { return d.name; });



	})

	</script>