D3 Examples - Análisis Plebiscito x Depto

Análisis Plebiscito x Depto

WHAT:

Dataset: tabla

Data types:

% de votos del NO: cuantitativo, secuencial

% de votos del candidato uribista: cuantitativo, secuencial

% de votos del SI: cuantitativo, secuencial

Municipio: categórico

Departamento: categórico

Candidato que ganó en la segunda vuelta: categórico Dataset availability: Static

WHY:

Teniendo en cuenta la afirmación de la silla vacía: "El uribismo sí fue determinante: Al comparar los resultados del No con los del candidato presidencial uribista Óscar Iván Zuluaga en 2014, las coincidencias son muchas, especialmente con la segunda vuelta de esas elecciones." La propuesta es realizar una visualización que permita confirmar dicha afirmación:

Task1: (Present, Distribution) Presentar la distribución del % de votos del plebiscito (NO y SI) junto con el % de votos del candidato uribista, por departamento.

Task2: (Discover, Correlation) Descubrir la correlación, en aquellos lugares donde ganó el NO, entre el % de votos del NO con el % de votos del candidato uribista en la 2ª vuelta (se desea confirmar si la correlación es positiva: donde el % de votos del NO fue mayoría, el % de votos del candidato uribista también fue mayoría).

Task3: (Identify, Feature) Identificar el % de casos en los cuales la correlación anterior es positiva, para confirmar o rechazar la hipótesis planteada (que el uribismo fue determinante en la votación del NO en el plebiscito).

HOW:

Marca: línea

Canales:

• Color (tono-hue)

Se usará el modismo de barchart, presentando en el eje X los departamentos y en el eje Y el % de votos en cada categoría. No se presentarán los municipios por lo extenso que puede llegar a ser la visualización en el eje horizontal. Se presentarán las barras que corresponden a los votos del SI, el NO y el candidato uribista, por departamento (Task1). Se adiciona un checkbox que permite ordenar los datos con el fin de facilitar el análisis.

Por cada departamento se van a alinear las barras de estas 3 categorías, con el fin de poder compararlas con respecto a su longitud. Los votos del NO estarán representados en color rojo, los votos del SI en color verde, y los votos del candidato uribista en color rosado (Task2).

Al lado de las etiquetas de la derecha se colocará un número que resume el % de casos en que la correlación dio positiva (no aparece en el mockup, pero se tiene planeado). Task3.

Notas: Debido a que no se utiliza el municipio por la cantidad de datos que tendrían que mostrarse en el eje horizontal, se utiliza el dato del departamento. Esto implica que hay que agregar los datos y, en el caso de los porcentajes, es necesario cambiar el campo por el # total de votos de cada categoría, ya que no es posible sumar % de votos por municipio para obtener el % de votos del departamento.

Adicionalmente, la identificación del ganador en la 2da vuelta de las elecciones también es necesario calcularla debido a la agregación a nivel de departamento, ya que se tiene a nivel de municipio. A partir del # de votos para Zuluaga en la 2da vuelta, se dividió por el # de votos para Senado y se identificó el %, si este es mayor a 50% se asumió como ganador a Zuluaga y, en caso contrario, a Santos.

Para la Tarea 3, se comparó por Depto los siguientes datos para evaluar la afirmación de influencia del Uribismo:

Si el # de votos de Zuluaga es mayor que el # de votos por el SI, y el # de Votos por el NO es mayor que el # de votos por el SI, se determina influencia del Uribismo, y gana el NO.

Si el # de votos por el SI es mayor que el # de votos por el NO, y el # de Votos por el SI es mayor que el # de votos por Zuluaga, se determina influencia del Uribismo, y gana el SI.

Si ninguna de las condiciones anteriores se cumple, se determina que no hay influencia del Uribismo.

Finalmente, se cuenta el número de casos en cada grupo para comprobar la afirmación. De los 33 departamentos, 9 tuvieron influencia del Uribismo y ganó el NO. En 17 departamentos ganó el SI, y se determinó influencia del Uribismo por la asociación entre los votos por Zuluaga y los votos por el NO. En 7 departamentos no se identifica influencia alguna por los resultados.

Con estos hallazgos, se puede afirmar que si existió influencia del uribismo en la votación por el plebiscito. No obstante, surge una nueva pregunta con respecto a por qué solo en 9 departamentos ganó el No, y si en 17 donde hubo influencia ganó el SI, por qué entonces en los resultados totales ganó el NO? Posiblemente la respuesta está en cuáles son esos 9 departamentos, posiblemente tienen una población y votación considerablemente mayor en relación a los otros 16.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.rectangle:hover {
  fill: orange;
}
.axis {
  font: 12px sans-serif;
}
​
body {
  font: 11px sans-serif;
}
  
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
  td, th {
    padding: 1px 4px;
}
  
/*
body {
  font: 10px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.bar {
  fill: steelblue;
}
​
.x.axis path {
  display: none;
}
*/
</style>
<input type="checkbox"> Sort values</label>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
​
<script>
​
var margin = {top: 20, right: 20, bottom: 30, left: 60},
    width = 2000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
​
var x1 = d3.scale.ordinal();
​
var y = d3.scale.linear()
    .range([height, 0]);
​
var color = d3.scale.ordinal()
    .range(["#db0700", "#ff8d6b", "#32fe23"]);
​
var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");
​
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));
​
  
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(" + margin.left + "," + margin.top + ")");
  
  
// Cargue de los datos
d3.csv("data.csv", function(error, data) {
  if (error) throw error;
​
  var voteType = d3.keys(data[0]).filter(function(key) { return (key !== "Depto" & key !=="Ganador"); });
​
   
    // Sorting sentence, it works!
    data.sort(function(a,b){
       return b.VotoNo - a.VotoNo;
    })
    
  
  data.forEach(function(d) {
    d.votes = voteType.map(function(name) { return {name: name, value: +d[name]}; });
  });
​
  x0.domain(data.map(function(d) { return d.Depto; }));
  x1.domain(voteType).rangeRoundBands([0, x0.rangeBand()]);
  y.domain([10, d3.max(data, function(d) { return d3.max(d.votes, function(d) { return d.value; }); })]);
   
  
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")
      .style("font-size", "10px")
      .style("text-anchor", "end")
      .style("font-weight","bold") 
        .attr("dx", "-.8em")
        .attr("dy", "-.55em")
        .attr("transform", "rotate(-25)" );;
​
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Votacion");
​
  var Depto = svg.selectAll(".Depto")
      .data(data)
      .enter().append("g")
      .attr("class", "Depto")
      .attr("transform", function(d) {
         return "translate(" + x0(d.Depto) + ",0)"; 
      });
​
  Depto.selectAll("rectangle")
      .data(function(d) { return d.votes; })
      .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) { return x1(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) {
         return height - y(d.value) - 10;
      })
      .style("fill", function(d) { return color(d.name); });
​
 var legend = svg.selectAll(".legend")
      .data(voteType.slice().reverse())
      .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
​
  legend.append("rect")
      .attr("x",width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);
  
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });
  
  
 
  //Ordenar los valores
   d3.select("input").on("change", change);
​
  var sortTimeout = setTimeout(function() {
    d3.select("input").property("checked", true).each(change);
  }, 2000);
​
  function change() {
    clearTimeout(sortTimeout);
​
    // Copy-on-write since tweens are evaluated after a delay.
    var xi = x0.domain(data.sort(!this.checked
        ? function(a, b) { return b.VotoNo - a.VotoNo; }
        : function(a, b) { return d3.ascending(a.Depto, b.Depto); })
        .map(function(d) { return d.Depto; }))
        .copy();
​
    svg.selectAll(".rectangle")
        .sort(function(a, b) { return xi(a.Depto) - xi(b.Depto); });
​
    var transition = svg.transition().duration(750),
        delay = function(d, i) { return i * 50; };
​
    transition.selectAll(".rectangle")
        .delay(delay)
        .attr("x", function(d) { return xi(d.Depto); });
​
    transition.select(".x.axis")
        .call(xAxis)
        .selectAll("g")
        .delay(delay);
  }
 
  
  /*// Selector para filtrar por el ganador
  var selector = d3.select("#drop")
      .append("select")
      .attr("id","dropdown")
      .on("change", function(d){
          selection = document.getElementById("dropdown");
​
          y.domain([0, d3.max(data, function(d){
        return +d[selection.value];})]);
​
          yAxis.scale(y);
​
          d3.selectAll(".rectangle")
              .transition()
              .attr("height", function(d){
          return height - y(+d[selection.value])
          console.log(+d[selection.value]);
        }).attr("fill", getColor(selection.value))
        .attr("x", function(d, i){
          return (width / data.length) * i ;
        })
        .attr("y", function(d){
          return y(+d[selection.value]);
        })
              .ease("linear")
              .select("title")
              .text(function(d){
                return d.Ganador + " : " + d[selection.value];
              });
      
            d3.selectAll("g.y.axis")
              .transition()
              .call(yAxis);
​
         });
​
    selector.selectAll("option")
      .data(elements)
      .enter().append("option")
      .attr("value", function(d){
        return d;
      })
      .text(function(d){
        return d;
      })
    */
  
  
​
});
 
  
  
</script>
​
</body>
​
    