Demonstrates the D3 ray-label plugin for labeling slices of pie and donut graphs based on the angle of each slice's centroid.
Label font sizes are scaled (within bounds) based on the size of the slice.
Plugin is hosted on Github.
age | population | |
---|---|---|
<5 | 2704659 | |
5-13 | 4499890 | |
14-17 | 2159981 | |
18-24 | 3853788 | |
25-44 | 14106543 | |
45-64 | 8819342 | |
≥65 | 612463 |
<!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 src=http://exupero.github.io/d3-raylabel/d3-raylabel.js></script> | |
<script> | |
var width = 960, | |
height = 500, | |
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(radius - 10) | |
.innerRadius(radius - 70); | |
var pie = d3.layout.pie() | |
.sort(null) | |
.value(function(d) { return d.population; }); | |
var label = d3.layout.raylabel() | |
.arc(arc) | |
.orient("middle") | |
.offset(5); | |
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) { | |
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); }); | |
g.append("text") | |
.call(label) | |
.text(function(d) { return d.data.age; }); | |
}); | |
</script> |