Pie chart according to a poll of the coming Valencian elections.
Based on this example by rveciana.
Last active
October 28, 2017 16:47
-
-
Save martgnz/29486a481dfa80bc06fc to your computer and use it in GitHub Desktop.
Simple hemicycle 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
| license: mit | |
| height: 330 | |
| border: none |
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
| partido | escaños | color | |
|---|---|---|---|
| PP | 28 | #03a9e7 | |
| PSOE | 23 | #ff2f2e | |
| IU | 5 | #149f27 | |
| Compromís | 9 | #F67116 | |
| Podemos | 17 | #82398a | |
| Ciudadanos | 17 | #F18624 |
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 lang="en"> | |
| <style type="text/css"> | |
| .arc { | |
| stroke: white; | |
| stroke-width: 0.5px; | |
| } | |
| .arc:hover { | |
| fill-opacity: 0.7; | |
| } | |
| .seat-text { | |
| fill: white; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script type="text/javascript"> | |
| var margin = { top: 10, right: 10, bottom: 20, left: 10 }, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var radius = 280; | |
| var arc = d3 | |
| .arc() | |
| .outerRadius(radius) | |
| .innerRadius(radius - 100); | |
| var pie = d3 | |
| .pie() | |
| .value(function(d) { | |
| return d.escaños; | |
| }) | |
| .startAngle(-1 * Math.PI / 2) | |
| .endAngle(Math.PI / 2); | |
| var svg = d3 | |
| .select("body") | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 1.5 + ")"); | |
| d3.csv("encuesta.csv", function(d) { | |
| var piedData = pie(d); | |
| var slice = svg | |
| .selectAll(".arc") | |
| .data(piedData) | |
| .enter() | |
| .append("g") | |
| .attr("class", function(d) { | |
| return "arc " + d.data.partido.toLowerCase(); | |
| }); | |
| slice | |
| .append("path") | |
| .attr("d", arc) | |
| .style("fill", function(d) { | |
| return d3.rgb(d.data.color); | |
| }); | |
| slice | |
| .append("text") | |
| .attr("transform", function(d, i) { | |
| return "translate(" + arc.centroid(piedData[i]) + ")"; | |
| }) | |
| .attr("dy", ".35em") | |
| .style("pointer-events", "none") | |
| .attr("class", "seat-text") | |
| .style("text-anchor", "middle") | |
| .text(function(d) { | |
| return d.data.partido + ": " + d.data.escaños; | |
| }); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment