Skip to content

Instantly share code, notes, and snippets.

@ruliana
Last active May 16, 2016 02:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ruliana/04b0d7b1244ddff7cc9c7d3187358aa5 to your computer and use it in GitHub Desktop.
Save ruliana/04b0d7b1244ddff7cc9c7d3187358aa5 to your computer and use it in GitHub Desktop.
Evolução da participação no PIB 1995-2012 dos Estados
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
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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>&nbsp;</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