This donut chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:
| val,val2 | |
| 1 | |
| 2 | |
| 3 | |
| 4 | |
| 5 | |
| 6 | |
| 7 | |
| 8 | |
| 9 | |
| 10 |
| card | v | |
|---|---|---|
| Fool | 1 | |
| Magician | 1 | |
| High Priestess | 1 | |
| Empress | 1 | |
| Emperor | 1 | |
| Heirophant | 1 | |
| Lovers | 1 | |
| Chariot | 1 | |
| Strength | 1 |
| <!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 = 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 svg = d3.select("body").append("svg2") | |
| .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; }); | |
| }); | |
| var width = 660, | |
| height = 300, | |
| radius = Math.min(width, height) / 2; | |
| var color = d3.scale.ordinal() | |
| .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); | |
| var arc2 = d3.svg.arc() | |
| .outerRadius(radius - 10) | |
| .innerRadius(radius - 70); | |
| var pie = d3.layout.pie() | |
| .sort(null) | |
| .value(function(d) { return d.population; }); | |
| var svg2 = d3.select("body").append("svg2") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| d3.csv("data-minor.csv", function(error, data) { | |
| data.forEach(function(d) { | |
| d.population = +d.population; | |
| }); | |
| var g = svg2.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> |
