Sexto ejemplo del taller Mapas web interactivos con D3.js en el programa de las 9as Jornadas SIG Libre .
En este ejemplo se añade la escala al ejemplo anterior. También se cambian los colores cuando el ratón pasa por encima de un sector.
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 = 700, | |
| height = 500, | |
| radius = 240, | |
| radial_speed = 500; | |
| var arc = d3.svg.arc() | |
| .outerRadius(radius) | |
| .innerRadius(radius - 130); | |
| 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 - radius/2)/ 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"); | |
| var path = g.append("path") | |
| .attr("d", function(d) { | |
| e = d3.svg.arc() | |
| .outerRadius(radius) | |
| .innerRadius(radius - 130); | |
| e.startAngle = d.startAngle; | |
| e.endAngle = e.startAngle; | |
| this._current = e; | |
| return arc(e); | |
| }) | |
| .style("fill", function(d) { return d3.rgb(d.data.Color); }) | |
| .on("mouseover", function(d) { | |
| d3.select(this) | |
| .transition() | |
| .style("fill", function(d) { return d3.rgb(d.data.Color).brighter(); }); | |
| }) | |
| .on("mouseout", function(d) { | |
| d3.select(this) | |
| .transition() | |
| .style("fill", function(d) { return d3.rgb(d.data.Color); }); | |
| }); | |
| delay = 0; | |
| path | |
| .transition() | |
| .delay(function(d){ | |
| cur_delay = delay; | |
| delay += radial_speed * (d.endAngle - this._current.endAngle); | |
| return cur_delay; | |
| }) | |
| .duration(function(d){ | |
| return radial_speed * (d.endAngle - this._current.endAngle); | |
| }) | |
| .ease('linear') | |
| .attrTween("d", function (d) { | |
| var i = d3.interpolate(this._current, d); | |
| return function(t) { | |
| return arc(i(t)); | |
| }; | |
| }); | |
| g.append("rect") | |
| .attr("height", 20) | |
| .attr("width", 20) | |
| .attr("x", 250) | |
| .attr("y", function(d, i) { | |
| return -250 + i * 25; | |
| }) | |
| .attr("opacity", 0) | |
| .style("fill", function(d) { return d3.rgb(d.data.Color); }) | |
| .transition() | |
| .duration(2000) | |
| .attr("opacity", 1); | |
| g.append("text") | |
| .attr("class", "label") | |
| .attr("dy", ".30em") | |
| .attr("x", 275) | |
| .attr("y", function(d, i) { | |
| return -240 + i * 25; | |
| }) | |
| .attr("opacity", 0) | |
| .text( function(d) { return d.data.Partido + ' ' + d.data.Porcentaje + '%'; }) | |
| .transition() | |
| .duration(2000) | |
| .attr("opacity", 1); | |
| }); | |
| </script> |
