forked from dougdowson's block: Reusable Bar Chart
forked from Adlopez2016's block: Reusable Bar Chart
forked from Adlopez2016's block: Quienes votaron y quienes se abstuvieron
license: mit |
forked from dougdowson's block: Reusable Bar Chart
forked from Adlopez2016's block: Reusable Bar Chart
forked from Adlopez2016's block: Quienes votaron y quienes se abstuvieron
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> |