Cuarto ejemplo del taller Mapas web interactivos con D3.js en el programa de las 9as Jornadas SIG Libre .
En este ejemplo se muestra como usar un layout de D3.js.
El layout usado se llama pie layout y sirve para hacer gráficos tipo tarta, pero también se puede usar para representar los escaños en el Congreso de los Diputados, como en este caso.
Los datos son de la encuesta GAD3, del 9-13 de enero de 2015. Fuente: Wikipedia
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 600, | |
| height = 500, | |
| radius = 240; | |
| var arc = d3.svg.arc() | |
| .outerRadius(radius) | |
| .innerRadius(radius - 100); | |
| var pie = d3.layout.pie() | |
| .sort(null) | |
| .value(function(d) { return d.Porcentaje; }) | |
| .startAngle(-1*Math.PI/2) | |
| .endAngle(Math.PI/2); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| d3.csv("https://cdn.rawgit.com/rveciana/5919944/raw//encuesta.csv", function(d){ | |
| var g = svg.selectAll(".arc") | |
| .data(pie(d)) | |
| .enter().append("g") | |
| .attr("class", "arc"); | |
| g.append("path") | |
| .attr("d", arc) | |
| .style("fill", function(d) {return d3.rgb(d.data.Color); }); | |
| }); | |
| </script> |
