Stackoverflow question: http://stackoverflow.com/questions/32549683/d3js-json-pie-chart?noredirect=1#comment52995750_32549683
-
-
Save steveharoz/0638d230c133da1de385 to your computer and use it in GitHub Desktop.
Pie Chart
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 | |
|---|---|---|
| <5 | 2704659 | |
| 5-13 | 4499890 | |
| 14-17 | 2159981 | |
| 18-24 | 3853788 | |
| 25-44 | 14106543 | |
| 45-64 | 8819342 | |
| ≥65 | 612463 |
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
| {"data":[ | |
| {"ap": [ | |
| {"floorratio": [ | |
| {"floor":"Basement", "ratio": 0.20}, | |
| {"floor":"Ground", "ratio": 0.20}, | |
| {"floor":"First Floor", "ratio": 0.15}, | |
| {"floor":"Second Floor", "ratio": 0.20}, | |
| {"floor":"Third Floor", "ratio": 0.25} | |
| ]} | |
| ]}, | |
| {"ap": [ | |
| {"floorratio": [ | |
| {"floor":"Basement", "ratio": 0.10}, | |
| {"floor":"Ground", "ratio": 0.30}, | |
| {"floor":"First Floor", "ratio": 0.10}, | |
| {"floor":"Second Floor", "ratio": 0.15}, | |
| {"floor":"Third Floor", "ratio": 0.35} | |
| ]} | |
| ]} | |
| ]} |
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> | |
| <html> | |
| <head> | |
| <title>Pie Chart Test</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| </head> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .arc path { | |
| stroke: #fff; | |
| } | |
| </style> | |
| <body> | |
| <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(0); | |
| // defines wedge size | |
| var pie = d3.layout.pie() | |
| .sort(null) | |
| .value(function (d) { return d.ratio; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| d3.json("data.json", function(error, data) { | |
| node = data.data[0].ap[0].floorratio; | |
| var g = svg.selectAll(".arc") | |
| .data(pie(node)) | |
| .enter().append("g") | |
| .attr("class", "arc"); | |
| g.append("path") | |
| .attr("d", arc) | |
| .style("fill", function(d) { return color(d.data.floor); }); | |
| 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.floor; }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment