This donut chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:
| 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="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.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; }) | |
| .startAngle(-90 * (Math.PI/180)) | |
| .endAngle(90 * (Math.PI/180)); | |
| 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") | |
| .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) | |
| .attr("dy", ".35em") | |
| .style("text-anchor", "middle") | |
| .text(function(d) { return d.data.age; }); | |
| }); | |
| </script> |
