Created
November 1, 2012 14:58
-
-
Save mccannf/3994129 to your computer and use it in GitHub Desktop.
D3 Pie charts with grid lines
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| age | population | percent | |
|---|---|---|---|
| <5 | 2704659 | 67 | |
| 5-13 | 4499890 | 38 | |
| 14-17 | 2159981 | 91 | |
| 18-24 | 3853788 | 49 | |
| 25-44 | 14106543 | 71 | |
| 45-64 | 8819342 | 88 | |
| =65 | 612463 | 64 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| background: #333; | |
| } | |
| .arc path { | |
| stroke: #fff; | |
| stroke-width: 2px; | |
| } | |
| .arc grid { | |
| stroke: #fff; | |
| stroke-width: 1; | |
| stroke-dasharray: 5,5; | |
| } | |
| .arc text { | |
| fill:#fff; | |
| font-size:12px; | |
| font-weight:bold; | |
| } | |
| .arc line { | |
| 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 - 10, | |
| numTicks = 5, | |
| sdat = []; | |
| var color = d3.scale.ordinal() | |
| .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); | |
| var arc = d3.svg.arc() | |
| .outerRadius(function(d) { return 50 + (radius - 50) * d.data.percent / 100; }) | |
| .innerRadius(20); | |
| var pie = d3.layout.pie() | |
| .sort(null) | |
| .value(function(d) { return d.population; }); | |
| var grid = d3.svg.area.radial() | |
| .radius(150); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| for (i=0; i<=numTicks; i++) { | |
| sdat[i] = 20 + ((radius/numTicks) * i); | |
| } | |
| d3.csv("data.csv", function(error, data) { | |
| data.forEach(function(d) { | |
| d.population = +d.population; | |
| d.percent = d.percent; | |
| }); | |
| 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; }); | |
| addCircleAxes(); | |
| }); | |
| addCircleAxes = function() { | |
| var circleAxes, i; | |
| svg.selectAll('.circle-ticks').remove(); | |
| circleAxes = svg.selectAll('.circle-ticks') | |
| .data(sdat) | |
| .enter().append('svg:g') | |
| .attr("class", "circle-ticks"); | |
| circleAxes.append("svg:circle") | |
| .attr("r", String) | |
| .attr("class", "circle") | |
| .style("stroke", "#CCC") | |
| .style("opacity", 0.5) | |
| .style("fill", "none"); | |
| circleAxes.append("svg:text") | |
| .attr("text-anchor", "center") | |
| .attr("dy", function(d) { return d - 5 }) | |
| .style("fill", "#fff") | |
| .text(function(d,i) { return i * (100/numTicks) }); | |
| }; | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Can you explain the code that creates different heights of the pieces of the pie? I am not quite sure I understand this concept