Last active
May 16, 2016 02:10
-
-
Save ruliana/04b0d7b1244ddff7cc9c7d3187358aa5 to your computer and use it in GitHub Desktop.
Evolução da participação no PIB 1995-2012 dos Estados
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
id | y95_97 | y98_00 | y01_03 | y04_06 | y07_09 | y10_12 | |
---|---|---|---|---|---|---|---|
SP | 5 | 4 | 3 | 2 | 1 | 0 | |
RJ | 0 | 1 | 0 | 1 | 0 | 1 | |
MG | 1 | 0 | 1 | 2 | 3 | 4 | |
RS | 3 | 2 | 3 | 2 | 1 | 0 | |
PR | 1 | 2 | 3 | 2 | 1 | 0 | |
DF | 3 | 2 | 1 | 0 | 1 | 2 | |
BA | 2 | 3 | 4 | 5 | 4 | 3 | |
SC | 0 | 1 | 2 | 3 | 4 | 5 | |
PE | 1 | 1 | 1 | 0 | 1 | 2 | |
GO | 0 | 1 | 2 | 0 | 1 | 2 | |
CE | 1 | 0 | 1 | 1 | 2 | 3 | |
ES | 1 | 1 | 0 | 1 | 2 | 3 | |
PA | 1 | 0 | 1 | 2 | 3 | 4 | |
AM | 1 | 0 | 1 | 2 | 1 | 2 | |
MT | 1 | 2 | 3 | 4 | 5 | 4 | |
MA | 0 | 1 | 2 | 3 | 4 | 5 | |
MS | 0 | 1 | 2 | 0 | 1 | 2 | |
PB | 0 | 1 | 0 | 0 | 1 | 2 | |
RN | 0 | 1 | 2 | 3 | 4 | 5 | |
AL | 1 | 2 | 1 | 1 | 0 | 1 | |
SE | 0 | 1 | 0 | 0 | 0 | 0 | |
PI | 0 | 0 | 0 | 0 | 1 | 2 | |
RO | 0 | 1 | 2 | 3 | 0 | 1 | |
TO | 0 | 0 | 1 | 0 | 0 | 1 | |
AC | 0 | 0 | 0 | 0 | 0 | 0 | |
AP | 0 | 0 | 0 | 0 | 0 | 0 | |
RR | 0 | 1 | 2 | 1 | 2 | 0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
td { padding: 0.2em; } | |
th { background-color: gainsboro; } | |
tbody tr:nth-child(1) { background-color: whitesmoke; font-weight: bold; } | |
tbody tr:hover { background-color: whitesmoke; } | |
tbody td:nth-child(1) { text-align: right; } | |
tbody td:nth-child(2) { text-align: center; } | |
tbody td:nth-child(3) { text-align: right; } | |
tbody td:nth-child(4) { text-align: right; } | |
tbody td:nth-child(5) { text-align: right; } | |
tbody td:nth-child(6) { text-align: right; } | |
tbody td:nth-child(7) { text-align: right; } | |
tbody td:nth-child(8) { text-align: right; } | |
#map svg { | |
border: 1px solid black; | |
} | |
.state { | |
fill: #ddc; | |
stroke: black; | |
stroke-width: 1px; | |
} | |
.state_label { | |
font-size: 8px; | |
} | |
.line_label { | |
stroke: black; | |
stroke-width: 1px; | |
stroke-dasharray: 4, 2; | |
} | |
/* Amarelo */ | |
.qam0 { fill: #FFE668 } | |
.qam1 { fill: #FFDC34 } | |
.qam2 { fill: #FFD200 } | |
.qam3 { fill: #CBA800 } | |
.qam4 { fill: #977E00 } | |
.qam5 { fill: #635400 } | |
/* Vermelho */ | |
.qvm0 { fill: #FF7468 } | |
.qvm1 { fill: #FF4634 } | |
.qvm2 { fill: #FF1800 } | |
.qvm3 { fill: #CB1400 } | |
.qvm4 { fill: #971000 } | |
.qvm5 { fill: #630C00 } | |
/* Verde */ | |
.qvd0 { fill: #89FF68 } | |
.qvd1 { fill: #63FF34 } | |
.qvd2 { fill: #3DFF00 } | |
.qvd3 { fill: #31CB00 } | |
.qvd4 { fill: #259700 } | |
.qvd5 { fill: #196300 } | |
.vm { color: #CB1400 } | |
.am { color: #CBA800 } | |
.vd { color: #259700 } | |
</style> | |
<body onload="startMap()"> | |
<h1>Evolução da PIB por Estado - 1995 a 2012</h1> | |
<p>O mapa abaixo mostra a contribuição de cada Estado para formação do PIB nacional. | |
As cores mostram a participação de cada um e sua evolução de 1995 a 2012.</p> | |
<div id="map"></div> | |
<h2>Um terço do PIB para cada cor</h2> | |
<p><b class="vm">Vermelho</b>, como no caso de <b class="vm">São Paulo</b>, significa que | |
<b class="vm">1/3 do PIB</b> nacional é gerado por ele.</p> | |
<p>O <b class="am">amarelo</b> dos Estados do <b class="am">Rio da Janeiro</b>, | |
<b class="am">Minas Gerais</b>, <b class="am">Paraná</b> e | |
<b class="am">Rio Grande do Sul</b> significam que o próximo <b class="am">1/3 do PIB</b> | |
nacional é formado por esses 4 Estados. Somados com <b class="vm">São Paulo</b>, os 5 Estados formam | |
pouco mais de 2/3 do PIB brasileiro.</p> | |
<p>O último <b class="vd">1/3 do PIB</b> está em <b class="vd">verde</b> e abrange os | |
<b class="vd">22 Estados</b> restantes e o <b class="vd">Distrito Federal</b>.</p> | |
<h2>O tempo passa do centro para a borda</h2> | |
<p>Em cada Estado, os mapas concêntricos representam a passagem do tempo. A cor <b>mais interna</b> representa o | |
período de <b>3 anos</b> de <b>1995 a 1997</b>, o <b>mais externo</b> é o período de <b>2010 a 2012</b>.</p> | |
<p>Dessa forma, é possível observar se o Estado está melhorando ou piorando sua participação. Os Estados que vão | |
escurecendo para as bordas, como <b class="vd">Mato Grosso</b>, estão <b class="vd">aumentando consistentemente</b> | |
sua participação no PIB; Estados que vão clareando, como <b class="vm">São Paulo</b>, estão <b class="vm">diminuindo | |
sua contribuição</b> para o todo; outros, como o <b class="am">Rio de Janeiro</b>, | |
<b class="am">oscilam sua participação</b>, mas sem uma movimento consistente.</p> | |
<p>Do centro para as bordas existem 6 áreas concêntricas, cada uma representa os seguintes períodos de 3 anos, nessa ordem:</p> | |
<ul> | |
<li>1995 - 1997</li> | |
<li>1998 - 2000</li> | |
<li>2001 - 2003</li> | |
<li>2004 - 2006</li> | |
<li>2007 - 2009</li> | |
<li>2010 - 2012</li> | |
</ul> | |
<h2>Os dados</h2> | |
<table> | |
<thead> | |
<tr> | |
<th>Estado</th> | |
<th>Sigla</th> | |
<th>1995-1997</th> | |
<th>1998-2000</th> | |
<th>2001-2003</th> | |
<th>2004-2006</th> | |
<th>2007-2009</th> | |
<th>2010-2012</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>Brasil</td> | |
<td> </td> | |
<td>R$ 2.488.754</td> | |
<td>R$ 2.762.389</td> | |
<td>R$ 2.983.423</td> | |
<td>R$ 3.223.758</td> | |
<td>R$ 3.546.617</td> | |
<td>R$ 3.959.439</td> | |
</tr> | |
<tr> | |
<td>São Paulo</td> | |
<td>SP</td> | |
<td>36,8%</td> | |
<td>36,0%</td> | |
<td>34,8%</td> | |
<td>33,6%</td> | |
<td>33,5%</td> | |
<td>32,6%</td> | |
</tr> | |
<tr> | |
<td>Rio de Janeiro</td> | |
<td>RJ</td> | |
<td>11,2%</td> | |
<td>11,8%</td> | |
<td>11,5%</td> | |
<td>11,5%</td> | |
<td>11,1%</td> | |
<td>11,2%</td> | |
</tr> | |
<tr> | |
<td>Minas Gerais</td> | |
<td>MG</td> | |
<td>8,7%</td> | |
<td>8,5%</td> | |
<td>8,6%</td> | |
<td>9,1%</td> | |
<td>9,1%</td> | |
<td>9,3%</td> | |
</tr> | |
<tr> | |
<td>Rio Grande do Sul</td> | |
<td>RS</td> | |
<td>7,0%</td> | |
<td>6,9%</td> | |
<td>7,2%</td> | |
<td>6,8%</td> | |
<td>6,6%</td> | |
<td>6,5%</td> | |
</tr> | |
<tr> | |
<td>Paraná</td> | |
<td>PR</td> | |
<td>5,7%</td> | |
<td>5,9%</td> | |
<td>6,1%</td> | |
<td>6,0%</td> | |
<td>6,0%</td> | |
<td>5,8%</td> | |
</tr> | |
<tr> | |
<td>Distrito Federal</td> | |
<td>DF</td> | |
<td>4,6%</td> | |
<td>4,4%</td> | |
<td>3,8%</td> | |
<td>3,7%</td> | |
<td>3,9%</td> | |
<td>4,0%</td> | |
</tr> | |
<tr> | |
<td>Bahia</td> | |
<td>BA</td> | |
<td>3,8%</td> | |
<td>3,9%</td> | |
<td>4,0%</td> | |
<td>4,1%</td> | |
<td>4,1%</td> | |
<td>3,9%</td> | |
</tr> | |
<tr> | |
<td>Santa Catarina</td> | |
<td>SC</td> | |
<td>3,5%</td> | |
<td>3,6%</td> | |
<td>3,8%</td> | |
<td>4,0%</td> | |
<td>4,0%</td> | |
<td>4,0%</td> | |
</tr> | |
<tr> | |
<td>Pernambuco</td> | |
<td>PE</td> | |
<td>2,3%</td> | |
<td>2,3%</td> | |
<td>2,3%</td> | |
<td>2,3%</td> | |
<td>2,3%</td> | |
<td>2,6%</td> | |
</tr> | |
<tr> | |
<td>Goiás</td> | |
<td>GO</td> | |
<td>2,1%</td> | |
<td>2,2%</td> | |
<td>2,4%</td> | |
<td>2,4%</td> | |
<td>2,5%</td> | |
<td>2,7%</td> | |
</tr> | |
<tr> | |
<td>Ceará</td> | |
<td>CE</td> | |
<td>2,0%</td> | |
<td>1,9%</td> | |
<td>1,9%</td> | |
<td>1,9%</td> | |
<td>2,0%</td> | |
<td>2,1%</td> | |
</tr> | |
<tr> | |
<td>Espírito Santo</td> | |
<td>ES</td> | |
<td>1,9%</td> | |
<td>1,9%</td> | |
<td>1,8%</td> | |
<td>2,2%</td> | |
<td>2,2%</td> | |
<td>2,3%</td> | |
</tr> | |
<tr> | |
<td>Pará</td> | |
<td>PA</td> | |
<td>1,6%</td> | |
<td>1,5%</td> | |
<td>1,7%</td> | |
<td>1,8%</td> | |
<td>1,9%</td> | |
<td>2,1%</td> | |
</tr> | |
<tr> | |
<td>Amazonas</td> | |
<td>AM</td> | |
<td>1,4%</td> | |
<td>1,3%</td> | |
<td>1,5%</td> | |
<td>1,6%</td> | |
<td>1,5%</td> | |
<td>1,6%</td> | |
</tr> | |
<tr> | |
<td>Mato Grosso</td> | |
<td>MT</td> | |
<td>1,0%</td> | |
<td>1,2%</td> | |
<td>1,4%</td> | |
<td>1,7%</td> | |
<td>1,7%</td> | |
<td>1,7%</td> | |
</tr> | |
<tr> | |
<td>Maranhão</td> | |
<td>MA</td> | |
<td>1,0%</td> | |
<td>1,0%</td> | |
<td>1,0%</td> | |
<td>1,2%</td> | |
<td>1,2%</td> | |
<td>1,3%</td> | |
</tr> | |
<tr> | |
<td>Mato Grosso do Sul</td> | |
<td>MS</td> | |
<td>0,9%</td> | |
<td>1,0%</td> | |
<td>1,0%</td> | |
<td>1,0%</td> | |
<td>1,1%</td> | |
<td>1,2%</td> | |
</tr> | |
<tr> | |
<td>Paraíba</td> | |
<td>PB</td> | |
<td>0,8%</td> | |
<td>0,8%</td> | |
<td>0,8%</td> | |
<td>0,8%</td> | |
<td>0,8%</td> | |
<td>0,9%</td> | |
</tr> | |
<tr> | |
<td>Rio Grande do Norte</td> | |
<td>RN</td> | |
<td>0,7%</td> | |
<td>0,8%</td> | |
<td>0,8%</td> | |
<td>0,8%</td> | |
<td>0,9%</td> | |
<td>0,9%</td> | |
</tr> | |
<tr> | |
<td>Alagoas</td> | |
<td>AL</td> | |
<td>0,7%</td> | |
<td>0,7%</td> | |
<td>0,7%</td> | |
<td>0,7%</td> | |
<td>0,7%</td> | |
<td>0,7%</td> | |
</tr> | |
<tr> | |
<td>Sergipe</td> | |
<td>SE</td> | |
<td>0,6%</td> | |
<td>0,6%</td> | |
<td>0,6%</td> | |
<td>0,6%</td> | |
<td>0,6%</td> | |
<td>0,6%</td> | |
</tr> | |
<tr> | |
<td>Piauí</td> | |
<td>PI</td> | |
<td>0,5%</td> | |
<td>0,5%</td> | |
<td>0,5%</td> | |
<td>0,5%</td> | |
<td>0,6%</td> | |
<td>0,6%</td> | |
</tr> | |
<tr> | |
<td>Rondônia</td> | |
<td>RO</td> | |
<td>0,5%</td> | |
<td>0,5%</td> | |
<td>0,5%</td> | |
<td>0,6%</td> | |
<td>0,6%</td> | |
<td>0,7%</td> | |
</tr> | |
<tr> | |
<td>Tocantins</td> | |
<td>TO</td> | |
<td>0,3%</td> | |
<td>0,3%</td> | |
<td>0,4%</td> | |
<td>0,4%</td> | |
<td>0,4%</td> | |
<td>0,4%</td> | |
</tr> | |
<tr> | |
<td>Acre</td> | |
<td>AC</td> | |
<td>0,2%</td> | |
<td>0,2%</td> | |
<td>0,2%</td> | |
<td>0,2%</td> | |
<td>0,2%</td> | |
<td>0,2%</td> | |
</tr> | |
<tr> | |
<td>Amapá</td> | |
<td>AP</td> | |
<td>0,2%</td> | |
<td>0,2%</td> | |
<td>0,2%</td> | |
<td>0,2%</td> | |
<td>0,2%</td> | |
<td>0,2%</td> | |
</tr> | |
<tr> | |
<td>Roraima</td> | |
<td>RR</td> | |
<td>0,1%</td> | |
<td>0,1%</td> | |
<td>0,2%</td> | |
<td>0,1%</td> | |
<td>0,2%</td> | |
<td>0,2%</td> | |
<tr> | |
</tbody> | |
</table> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<script src="https://d3js.org/d3-queue.v2.min.js"></script> | |
<script src="https://d3js.org/topojson.v1.min.js"></script> | |
<script> | |
function startMap() { | |
// Define map size on screen | |
var width = 960, | |
height = 600; | |
var svg = d3.select("#map").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var g = svg.append("g"); | |
// Zoom behavior | |
var zoom = d3.behavior.zoom() | |
.translate([0, 0]) | |
.scale(1) | |
.scaleExtent([1, 8]) | |
.on("zoom", zoomed); | |
svg.call(zoom) // delete this line to disable free zooming | |
.call(zoom.event); | |
// Align center of Brazil to center of map | |
var projection = d3.geo.mercator() | |
.scale(650) | |
.center([-52, -15]) | |
.translate([width / 2, height / 2]); | |
var path = d3.geo.path() | |
.projection(projection); | |
// Load data (asynchronously) | |
var pib = d3.map(); | |
d3_queue.queue() | |
.defer(d3.json, "br-states.json") | |
.defer(d3.tsv, "br-pib.tsv", function(d) { pib.set(d.id, [d.y10_12, d.y07_09, d.y04_06, d.y01_03, d.y98_00, d.y95_97])}) | |
.await(ready); | |
function ready(error, shp) { | |
if (error) throw error; | |
// Extracting polygons and contours | |
var states = topojson.feature(shp, shp.objects.estados); | |
// Bind data to ".state" | |
var enterSel = g.selectAll(".state") | |
.data(states.features) | |
.enter(); | |
// Drawing concentric states | |
for (i = 1, j = 0; j < 6; i = i - 0.1, j++) { | |
enterSel.append("path") | |
.attr("class", function(d) { | |
var prefix_color = "qvd"; | |
if (d.id === "SP") { | |
prefix_color = "qvm"; | |
} else if (d.id === "RJ" | |
|| d.id === "MG" | |
|| d.id === "RS" | |
|| d.id === "PR") { | |
prefix_color = "qam"; | |
} | |
return "state " + prefix_color + pib.get(d.id)[j]; | |
}) | |
.attr("d", path) | |
.attr("transform", function(d) { | |
var centroid = path.centroid(d), | |
x = centroid[0], | |
y = centroid[1]; | |
return "translate(" + x + "," + y + ")" | |
+ "scale(" + i + ")" | |
+ "translate(" + -x + "," + -y + ")"; | |
}); | |
} | |
// Placing labels manually | |
var displacement = {"RN": [50, -20], | |
"PB": [50, -10], | |
"PE": [50, 0], | |
"AL": [50, 10], | |
"SE": [50, 20], | |
"DF": [140, -20], | |
"RJ": [35, 20], | |
"ES": [35, 10]}; | |
enterSel.append("text") | |
.attr("class", "state_label") | |
.attr("x", function(d) { | |
var disp = d.id in displacement ? displacement[d.id][0] : 0; | |
return disp + path.centroid(d)[0]; | |
}) | |
.attr("y", function(d) { | |
var disp = d.id in displacement ? displacement[d.id][1] : 0; | |
return disp + path.centroid(d)[1]; | |
}) | |
.attr("text-anchor", "middle") | |
.attr("dy", "0.3em") | |
.text(function(d) { return d.id }); | |
// Conecting labels to their original places | |
var enterSel = g.selectAll(".line_label") | |
.data(states.features.filter(function(d) { return d.id in displacement })) | |
.enter() | |
.append("line") | |
.attr("class", "line_label") | |
.attr("x1", function(d) { return path.centroid(d)[0] } ) | |
.attr("y1", function(d) { return path.centroid(d)[1] } ) | |
.attr("x2", function(d) { return path.centroid(d)[0] + displacement[d.id][0] - 8 }) | |
.attr("y2", function(d) { return path.centroid(d)[1] + displacement[d.id][1] }); | |
} | |
// What to do when zooming | |
function zoomed() { | |
g.selectAll("path.state").style("stroke-width", 1.0 / d3.event.scale + "px"); | |
g.selectAll("line.line_label").style("stroke-width", 1.0 / d3.event.scale + "px"); | |
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); | |
} | |
d3.select(self.frameElement).style("height", height + "px"); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment