|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
body { |
|
font: 10px sans-serif; |
|
} |
|
|
|
.arc path { |
|
stroke: #fff; |
|
} |
|
|
|
</style> |
|
<body> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script> |
|
|
|
var width = 960, |
|
height = 960, |
|
radius = Math.min(width, height) / 2; |
|
|
|
var color = d3.scale.ordinal() |
|
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); |
|
|
|
var arc = d3.svg.arc() |
|
.outerRadius(function(d){ |
|
console.log(d) |
|
return d.data.poops |
|
}) |
|
.innerRadius(0); |
|
|
|
var pie = d3.layout.pie() |
|
.sort(null) |
|
.value(function(d) { return d.population; }); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height) |
|
.append("g") |
|
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); |
|
|
|
d3.csv("data.csv", function(error, data) { |
|
console.log(data) |
|
data.forEach(function(d) { |
|
d.population = +d.population; |
|
}); |
|
|
|
var g = svg.selectAll(".arc") |
|
.data(pie(data)) |
|
.enter().append("g") |
|
.attr("class", "arc"); |
|
|
|
g.append("path") |
|
.attr("d", arc) |
|
.style("fill", function(d) { return color(d.data.age); }); |
|
svg.selectAll("circle").data([0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]) |
|
.enter().append("circle").attr("r", function(d){return width * d / 2}).style("fill", "none") |
|
|
|
g.append("text") |
|
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) |
|
.attr("dy", ".35em") |
|
.style("text-anchor", "middle") |
|
.text(function(d) { return d.data.age; }); |
|
|
|
}); |
|
|
|
</script> |
