Como votaron los municipios con zonas de concentracion

forked from dougdowson's block: Reusable Bar Chart

forked from Adlopez2016's block: Como votaron los municipios de acuerdo al grado de afectacion

Muestra los datos agregados por zonas de concentración ordenando los resultados en forma ascedente de acuerdo a su clasificación: SI, NO, % de votos no válidos y abstencionismo por municipio.

<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>

<style>

body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  color: #333;
  font-weight: 400;
}

#content {
  margin: 5px;
  padding: 20px;
  width: 775px;
  text-align: left;
  border: 1px solid #ccc;
}

h1 {
  line-height: 1em;
  font-size: 1.75em;
  font-weight: 900;
  color: #000;
}

p {
  margin: 5px 0px 0px 0px;
}

.domain {
  fill: none;
  stroke-width: 0;
}

#menu {
  margin: 5px 0px 0px 0px;
  display: block;
}

#unit {
  margin: 10px 0px 5px 0px;
  font-size: 0.9em;
}

select {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.9em;
  color: #333;
  font-weight: 400;
}

.bar {
  fill: #b82a28;
}

.bar:hover {
  fill: #4e2b38;
}

.axis line {
  stroke: #eee;
  stroke-width: 1;
  opacity: 0.5;
  shape-rendering: crispEdges;
}

.g-baseline line {
  stroke: #333;
  stroke-width: 2;
  opacity: 1;
  shape-rendering: crispEdges;
}

.x.axis .tick text, .y.axis .tick text {
  fill: #333;
  font-size: 0.9em;
}

</style>

</head>

<body>
<div id="content">
<h1>Resultados plebiscito 2016</h1>
  <select id="menu">
	<option>Voto SI</option>
	<option>Voto NO</option>
	<option>Se Abstuvo</option>
  <option>No Validos</option>
  </select>

<p id="unit">Porcentaje de votación sobre el total del censo electoral en los municipios con zonas de conentración</p>

<div id="chart"></div>
<p>Fuente:Datos publicados por https://lasillavacia.com/hagame-el-cruce/asi-es-el-pais-que-voto-no-58201</p>
</div>

var map = d3.map(),
    barchart;

d3.csv("data.csv", function(error, data) {

data = d3.nest()
      .key(function(d){ return d.variable; })
      .entries(data);

data.forEach(function(d){
    d.value = +d.value;
    d.values.sort(function(a, b){ return d3.ascending(+a.value, +b.value); });
    map.set(d.key, d.values);
  });

barchart = d3.svg.barchart()
      .margin({top: 0, right: 10, bottom: 40, left: 40})
      .tickFormat(d3.format(",.0f"))
      .x(function(d){ return d.country; })
      .y(function(d){ return d.value; });

d3.select("#chart")
      .datum(map.get("Poverty rate"))
      .call(barchart);

});

d3.select("#menu").on("change", function() {

d3.select("#chart")
      .datum(map.get(this.value))
      .call(barchart);

var unit;
  var selectedVariable = document.getElementById("menu").value;
  switch (selectedVariable)
    	{
    	case "Voto SI": unit = "En orden ascedente Votos por el SI agregado por municipios de con y sin concentracion"; break;
    	case "Voto NO": unit = "En orden ascedente Votos por el NO agregado por municipios de con y sin concentracion"; break;
    	case "Se Abstuvo": unit = "En orden ascedente la abstención agregado por municipios de con y sin concentracion"; break;
    	}
  d3.select("#unit")
      .html(unit);

});

d3.select(self.frameElement).style("height", "560px");

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js