Skip to content

Instantly share code, notes, and snippets.

@AndresAnayaIsaza
Created October 31, 2016 17:09
Show Gist options
  • Save AndresAnayaIsaza/9a7e8dca0c07282a3d72c0c4a06ecacd to your computer and use it in GitHub Desktop.
Save AndresAnayaIsaza/9a7e8dca0c07282a3d72c0c4a06ecacd to your computer and use it in GitHub Desktop.
Quienes votaron y quienes se abstuvieron
license: mit
d3.svg.barchart = function() {
var margin = {top: 10, right: 10, bottom: 20, left: 0},
width = 760,
height = 350,
padding = 0.25,
duration = 250,
tickFormat = null,
xValue = function(d){ return d[0]; },
yValue = function(d){ return d[1]; },
xDomain,
yDomain;
function barchart(selection) {
selection.each(function(datum, index) {
var data = datum.map(function(d, i) {
return [xValue.call(datum, d, i), yValue.call(datum, d, i)];
});
var xScale = d3.scale.ordinal()
.domain(xDomain ? xDomain.call(this) : data.map(function(d){ return d[0]; }))
.rangeBands([0, width - margin.left - margin.right], padding);
var yScale = d3.scale.linear()
.domain(yDomain ? yDomain.call(this) : [0, d3.max(data, function(d){ return 1.1*(d[1]); })])
.range([height - margin.top - margin.bottom, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickSize(6, 0);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickSize(-width - margin.left - margin.right)
.tickFormat(tickFormat ? tickFormat : null);
var svg = d3.select(this).selectAll("svg").data([datum]);
var g = svg.enter().append("svg")
.attr("width", width)
.attr("height", height*1.1)
.style("padding", "3px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.append("g").attr("class", "bars");
g.append("g").attr("class", "x axis");
g.append("g").attr("class", "y axis");
g = svg.select("g");
var bar = g.select(".bars").selectAll(".bar")
.data(data);
bar.exit().transition()
.duration(duration)
.attr("y", height - margin.top - margin.bottom)
.attr("height", 0)
.remove();
bar.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d){ return xScale(d[0]); })
.attr("y", height - margin.top - margin.bottom)
.attr("width", xScale.rangeBand())
.attr("height", 0)
.transition()
.delay(duration)
.duration(duration)
.attr("y", function(d){ return yScale(d[1]); })
.attr("height", function(d){ return height - margin.top - margin.bottom - yScale(d[1]); });
bar.transition()
.delay(duration)
.duration(duration)
.text(function(d){ return d3.round(yScale(d[1]),1); })
.attr("y", function(d){ return yScale(d[1]); })
.attr("height", function(d){ return height - margin.top - margin.bottom - yScale(d[1]); });
g.select(".x.axis")
.attr("class", "x axis")
.attr("transform", "translate(0," + yScale.range()[0] + ")")
.transition()
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-0.5em")
.attr("dy", "0.1em")
.attr("transform", function(d) {
return "rotate(-45)"
});
g.select(".y.axis")
.attr("class", "y axis")
.transition()
.delay(duration)
.call(yAxis);
svg.selectAll("g")
.classed("g-baseline", function(d) { return d == 0 });
});
}
barchart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return barchart;
};
barchart.width = function(_) {
if (!arguments.length) return width;
width = _;
return barchart;
};
barchart.height = function(_) {
if (!arguments.length) return height;
height = _;
return barchart;
};
barchart.padding = function(_) {
if (!arguments.length) return padding;
padding = _;
return barchart;
};
barchart.duration = function(_) {
if (!arguments.length) return duration;
duration = _;
return barchart;
};
barchart.tickFormat = function(_) {
if (!arguments.length) return tickFormat;
tickFormat = _;
return barchart;
};
barchart.x = function(_) {
if (!arguments.length) return xValue;
xValue = _;
return barchart;
};
barchart.y = function(_) {
if (!arguments.length) return yValue;
yValue = _;
return barchart;
};
barchart.xDomain = function(_) {
if (!arguments.length) return xDomain ? xDomain.call(this) : xDomain;
xDomain = d3.functor(_);
return barchart;
};
barchart.yDomain = function(_) {
if (!arguments.length) return yDomain ? yDomain.call(this) : yDomain;
yDomain = d3.functor(_);
return barchart;
};
return barchart;
}
country variable value
Amazonas Se Abstuvo 73.85
Amazonas Voto NO 11.15
Amazonas Voto SI 14.56
Amazonas No Validos 0.44
Antioquia Se Abstuvo 61.62
Antioquia Voto NO 23.3
Antioquia Voto SI 14.28
Antioquia No Validos 0.81
Arauca Se Abstuvo 65.41
Arauca Voto NO 17.14
Arauca Voto SI 16.22
Arauca No Validos 1.22
San Andres Islas Se Abstuvo 79.79
San Andres Islas Voto NO 9.01
San Andres Islas Voto SI 11.02
San Andres Islas No Validos 0.18
Atlántico Se Abstuvo 75.9
Atlántico Voto NO 9.41
Atlántico Voto SI 14.43
Atlántico No Validos 0.26
Bogotá D.C. Se Abstuvo 53.66
Bogotá D.C. Voto NO 20.1
Bogotá D.C. Voto SI 25.66
Bogotá D.C. No Validos 0.57
Bolívar Se Abstuvo 76.67
Bolívar Voto NO 9.14
Bolívar Voto SI 13.85
Bolívar No Validos 0.34
Boyacá Se Abstuvo 58.25
Boyacá Voto NO 20.26
Boyacá Voto SI 20.34
Boyacá No Validos 1.15
Caldas Se Abstuvo 58.17
Caldas Voto NO 23.17
Caldas Voto SI 17.41
Caldas No Validos 1.26
Caqueta Se Abstuvo 69.58
Caqueta Voto NO 15.76
Caqueta Voto SI 13.95
Caqueta No Validos 0.72
Casanare Se Abstuvo 51.02
Casanare Voto NO 33.84
Casanare Voto SI 13.72
Casanare No Validos 1.42
Cauca Se Abstuvo 61.01
Cauca Voto NO 12.27
Cauca Voto SI 25.36
Cauca No Validos 1.36
Cesar Se Abstuvo 67.46
Cesar Voto NO 15.73
Cesar Voto SI 16.15
Cesar No Validos 0.67
Choco Se Abstuvo 67.12
Choco Voto NO 6.43
Choco Voto SI 25.34
Choco No Validos 1.11
Córdoba Se Abstuvo 68.35
Córdoba Voto NO 12.16
Córdoba Voto SI 18.81
Córdoba No Validos 0.68
Cundinamarca Se Abstuvo 55.17
Cundinamarca Voto NO 24.8
Cundinamarca Voto SI 19.08
Cundinamarca No Validos 0.95
La Guajira Se Abstuvo 80.61
La Guajira Voto NO 7.38
La Guajira Voto SI 11.62
La Guajira No Validos 0.4
Guania Se Abstuvo 75.81
Guania Voto NO 10.55
Guania Voto SI 13.18
Guania No Validos 0.46
Guaviare Se Abstuvo 61.21
Guaviare Voto NO 17.58
Guaviare Voto SI 19.72
Guaviare No Validos 1.48
Huila Se Abstuvo 60.81
Huila Voto NO 23.34
Huila Voto SI 15.06
Huila No Validos 0.79
Magdalena Se Abstuvo 75.56
Magdalena Voto NO 9.47
Magdalena Voto SI 14.53
Magdalena No Validos 0.44
Meta Se Abstuvo 54.57
Meta Voto NO 28.32
Meta Voto SI 16.22
Meta No Validos 0.9
Nariño Se Abstuvo 63.27
Nariño Voto NO 12.54
Nariño Voto SI 23.11
Nariño No Validos 1.08
N.de Santander Se Abstuvo 59.69
N.de Santander Voto NO 25.21
N.de Santander Voto SI 14.23
N.de Santander No Validos 0.86
Putumayo Se Abstuvo 67.06
Putumayo Voto NO 11.05
Putumayo Voto SI 20.98
Putumayo No Validos 0.91
Quindio Se Abstuvo 58.68
Quindio Voto NO 24.28
Quindio Voto SI 16.1
Quindio No Validos 0.95
Risaralda Se Abstuvo 58.61
Risaralda Voto NO 22.52
Risaralda Voto SI 17.92
Risaralda No Validos 0.95
Santander Se Abstuvo 56.32
Santander Voto NO 23.81
Santander Voto SI 18.98
Santander No Validos 0.89
Sucre Se Abstuvo 65.64
Sucre Voto NO 12.83
Sucre Voto SI 20.83
Sucre No Validos 0.71
Tolima Se Abstuvo 60.01
Tolima Voto NO 23.35
Tolima Voto SI 15.76
Tolima No Validos 0.89
Vaupes Se Abstuvo 76.26
Vaupes Voto NO 5.11
Vaupes Voto SI 18.16
Vaupes No Validos 0.47
Valle del Cauca Se Abstuvo 63.88
Valle del Cauca Voto NO 16.88
Valle del Cauca Voto SI 18.62
Valle del Cauca No Validos 0.63
Vichada Se Abstuvo 73.75
Vichada Voto NO 12.68
Vichada Voto SI 13.02
Vichada No Validos 0.54
<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900">
<script src="http://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: #2980B9;
}
.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</p>
<div id="chart"></div>
<p>Fuente:Datos publicados por http://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 los departamentos que votaron por el SI"; break;
case "Voto NO": unit = "En orden ascedente los departamentos que votaron por el NO"; break;
case "Se Abstuvo": unit = "En orden ascedente los departamentos que presentaron menor a mayor abstencion"; break;
}
d3.select("#unit")
.html(unit);
});
d3.select(self.frameElement).style("height", "560px");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment