forked from dougdowson's block: Reusable Bar Chart
forked from Adlopez2016's block: Quienes votaron y quienes se abstuvieron
Muestra las votaciones agregados por municipios de Colombia de acuerdo al grado de afectación: Alto, intermedio, bajo o ninguno, y con base en el tipo de votación: SI, NO, % de votos no válidos y abstencionismo por municipio.
xxxxxxxxxx
<meta charset="utf-8">
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900">
<script src="https://d3js.org/d3.v3.min.js"></script>
<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: #282fb8;
}
.bar:hover {
fill: #2C3E50;
}
.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 e acuerdo al grado de afectació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>
<script src="chart.js"></script>
<script>
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 acuerdo con le nivel de afectación"; break;
case "Voto NO": unit = "En orden ascedente Votos por el NO agregado por municipios de acuerdo con le nivel de afectación"; break;
case "Se Abstuvo": unit = "En orden ascedente los que se abstuvieron agregado por municipios de acuerdo con le nivel de afectación"; 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