xxxxxxxxxx
<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="https://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>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js