Este gráfico usa los datos del INE sobre matrimonios. Las abreviaturas de las provincias vienen de este artículo de Wikipedia.
He adaptado este ejemplo de Mike Bostock y para ajustar las líneas del texto uso otra función suya.
license: mit | |
border: none |
Este gráfico usa los datos del INE sobre matrimonios. Las abreviaturas de las provincias vienen de este artículo de Wikipedia.
He adaptado este ejemplo de Mike Bostock y para ajustar las líneas del texto uso otra función suya.
Provincia | Católicos | Civiles | Otra religión | |
---|---|---|---|---|
AB | 490 | 697 | 4 | |
A | 1470 | 3815 | 33 | |
AL | 746 | 1200 | 8 | |
VI | 288 | 790 | 2 | |
O | 1017 | 2304 | 6 | |
AV | 211 | 222 | ||
BA | 1061 | 979 | 4 | |
PM | 749 | 3177 | 16 | |
B | 3022 | 15615 | 158 | |
BI | 884 | 2742 | 6 | |
BU | 417 | 629 | 1 | |
CC | 480 | 586 | ||
CA | 1739 | 2161 | 11 | |
S | 698 | 1231 | 7 | |
CS | 534 | 1225 | 4 | |
CR | 809 | 713 | 5 | |
CO | 1265 | 1057 | 14 | |
C | 1247 | 2533 | 9 | |
CU | 239 | 314 | ||
SS | 552 | 1923 | 2 | |
GI | 414 | 2173 | 10 | |
GR | 1231 | 1505 | 11 | |
GU | 305 | 616 | 4 | |
H | 724 | 829 | 5 | |
HU | 204 | 436 | 3 | |
J | 1103 | 710 | 5 | |
LE | 506 | 861 | ||
L | 317 | 1006 | 7 | |
LU | 325 | 597 | 2 | |
M | 7662 | 16091 | 125 | |
MA | 1619 | 3370 | 47 | |
MU | 1827 | 2539 | 9 | |
NA | 735 | 1362 | ||
OR | 342 | 517 | 2 | |
P | 199 | 241 | ||
GC | 697 | 2568 | 18 | |
PO | 892 | 2010 | 15 | |
LO | 390 | 600 | 4 | |
SA | 453 | 610 | 6 | |
TF | 683 | 2001 | 13 | |
SG | 169 | 269 | 1 | |
SE | 2960 | 3666 | 17 | |
SO | 89 | 144 | ||
T | 509 | 2097 | 14 | |
TE | 140 | 263 | 4 | |
TO | 1040 | 1258 | 4 | |
V | 2069 | 6860 | 60 | |
VA | 752 | 1014 | 4 | |
ZA | 172 | 214 | ||
Z | 1321 | 1941 | 11 | |
CE | 78 | 247 | 58 | |
ML | 67 | 224 | 20 | |
EX | 1203 | 731 | 8 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
.bar { | |
fill: steelblue; | |
} | |
.x.axis path { | |
display: none; | |
} | |
</style> | |
<body> | |
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script> | |
<script type="text/javascript"> | |
var margin = { top: 20, right: 20, bottom: 30, left: 40 }, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3 | |
.scaleBand() | |
.rangeRound([0, width], 0.1) | |
.paddingInner(0.1); | |
var y = d3.scaleLinear().rangeRound([height, 0]); | |
var color = d3.scaleOrdinal().range(["#ef8a62", "#67a9cf", "#beaed4"]); | |
var xAxis = d3.axisBottom(x); | |
var yAxis = d3.axisLeft(y).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 + ")"); | |
d3.csv("datos.csv", function(error, data) { | |
color.domain( | |
d3.keys(data[0]).filter(function(key) { | |
return key !== "Provincia"; | |
}) | |
); | |
data.forEach(function(d) { | |
var y0 = 0; | |
d.tipo = color.domain().map(function(name) { | |
return { name: name, y0: y0, y1: (y0 += +d[name]) }; | |
}); | |
d.total = d.tipo[d.tipo.length - 1].y1; | |
}); | |
data.sort(function(a, b) { | |
return b.total - a.total; | |
}); | |
x.domain( | |
data.map(function(d) { | |
return d.Provincia; | |
}) | |
); | |
y.domain([ | |
0, | |
d3.max(data, function(d) { | |
return d.total; | |
}) | |
]); | |
svg | |
.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
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("Matrimonios"); | |
var provincia = svg | |
.selectAll(".provincia") | |
.data(data) | |
.enter() | |
.append("g") | |
.attr("class", "g") | |
.attr("transform", function(d) { | |
return "translate(" + x(d.Provincia) + ",0)"; | |
}); | |
provincia | |
.selectAll("rect") | |
.data(function(d) { | |
return d.tipo; | |
}) | |
.enter() | |
.append("rect") | |
.attr("width", x.bandwidth()) | |
.attr("y", function(d) { | |
return y(d.y1); | |
}) | |
.attr("height", function(d) { | |
return y(d.y0) - y(d.y1); | |
}) | |
.style("fill", function(d) { | |
return color(d.name); | |
}); | |
var legend = svg | |
.selectAll(".legend") | |
.data( | |
color | |
.domain() | |
.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; | |
}); | |
svg | |
.append("text") | |
.attr("x", 713) | |
.attr("y", 480) | |
.style("font-size", 9 + "px") | |
.text("Datos: INE / Estadística de matrimonios"); | |
svg | |
.append("g") | |
.attr("class", "line") | |
.append("line") | |
.attr("y1", 101) | |
.attr("y2", 101) | |
.attr("x1", 40) | |
.attr("x2", 55) | |
.attr("stroke", "black"); | |
svg | |
.append("text") | |
.attr("x", 60) | |
.attr("y", 100) | |
.style("font-size", 9 + "px") | |
.call(wrap, 80); | |
function wrap(text, width) { | |
text.each(function() { | |
var text = d3.select(this), | |
words = "El 83% de los matrimonios en Barcelona son civiles. Es la segunda provincia tras Girona con el porcentaje más elevado." | |
.split(/\s+/) | |
.reverse(), | |
word, | |
line = [], | |
lineNumber = 0, | |
lineHeight = 1.1, // ems | |
x = text.attr("x"), | |
y = text.attr("y"), | |
dy = 0, //parseFloat(text.attr("dy")), | |
tspan = text | |
.text(null) | |
.append("tspan") | |
.attr("x", x) | |
.attr("y", y) | |
.attr("dy", dy + "em"); | |
while ((word = words.pop())) { | |
line.push(word); | |
tspan.text(line.join(" ")); | |
if (tspan.node().getComputedTextLength() > width) { | |
line.pop(); | |
tspan.text(line.join(" ")); | |
line = [word]; | |
tspan = text | |
.append("tspan") | |
.attr("x", x) | |
.attr("y", y) | |
.attr("dy", ++lineNumber * lineHeight + dy + "em") | |
.text(word); | |
} | |
} | |
}); | |
} | |
}); | |
</script> | |
</body> |