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
{"type":"Topology","objects":{"estados":{"type":"GeometryCollection","bbox":[-73.97741220933203,-33.74579986956992,-34.81727575186676,5.24981966486962],"geometries":[{"type":"Polygon","properties":{"nome":"Acre"},"id":"AC","arcs":[[0,1,2]]},{"type":"Polygon","properties":{"nome":"Alagoas"},"id":"AL","arcs":[[3,4,5,6]]},{"type":"Polygon","properties":{"nome":"Amazonas"},"id":"AM","arcs":[[7,8,9,10,-1,11]]},{"type":"Polygon","properties":{"nome":"Amapá"},"id":"AP","arcs":[[12,13]]},{"type":"Polygon","properties":{"nome":"Bahia"},"id":"BA","arcs":[[-6,14,15,16,17,18,19,20,21,22,23]]},{"type":"Polygon","properties":{"nome":"Ceará"},"id":"CE","arcs":[[24,25,26,27,28,29]]},{"type":"Polygon","properties":{"nome":"Distrito Federal"},"id":"DF","arcs":[[30]]},{"type":"Polygon","properties":{"nome":"Espírito Santo"},"id":"ES","arcs":[[31,32,-17,33]]},{"type":"Polygon","properties":{"nome":"Goiás"},"id":"GO","arcs":[[34,-21,35,36,37,38,39]]},{"type":"Polygon","properties":{"nome":"Maranhão"},"id":"MA","arcs":[[40,41,42,43]]},{"type":"Polygon","properties":{"nome":"Minas Gerais"},"id":"MG","arcs":[[-18,-33,44,45,46,-38,-36,-20,47]]},{"type":"Polygon","properties":{"nome":"Mato Grosso do Sul"},"id":"MS","arcs":[[-39,-47,48,49,50,51]]},{"type":"Polygon","properties":{"nome":"Mato Grosso"},"id":"MT","arcs":[[52,-10,53,54,-40,-52,55]]},{"type":"Polygon","properties":{"nome":"Pará"},"id":"PA","arcs":[[-41,56,-54,-9,57,58,-13,59]]},{"type":"Polygon","properties":{"nome":"Paraíba"},"id":"PB","arcs":[[60,61,-26,62]]},{"type":"Polygon","properties":{"nome":"Pernambuco"},"id":"PE","arcs":[[63,-7,-24,64,-27,-62]]},{"type":"Polygon","properties":{"nome":"Piauí"},"id":"PI","arcs":[[65,-28,-65,-23,-43]]},{"type":"Polygon","properties":{"nome":"Paraná"},"id":"PR","arcs":[[66,67,68,69,-50]]},{"type":"Polygon","properties":{"nome":"Rio de Janeiro"},"id":"RJ","arcs":[[70,-45,-32,71]]},{"type":"Polygon","properties":{"nome":"Rio Grande do Norte"},"id":"RN","arcs":[[72,-63,-25]]},{"type":"Polygon","properties":{"nome":"Rondônia"},"id":"RO","arcs":[[-11,-53,73,-2]]},{"type":"Polygon","properties":{"nome":"Roraima"},"id":"RR","arcs":[[-58,-8,74]]},{"type":"Polygon","properties":{"nome":"Rio Grande do Sul"},"id":"RS","arcs":[[75,76]]},{"type":"Polygon","properties":{"nome":"Santa Catarina"},"id":"SC","arcs":[[-69,77,-76,78]]},{"type":"Polygon","properties":{"nome":"Sergipe"},"id":"SE","arcs":[[-5,79,-15]]},{"type":"Polygon","properties":{"nome":"São Paulo"},"id":"SP","arcs":[[80,-67,-49,-46,-71]]},{"type":"Polygon","properties":{"nome":"Tocantins"},"id":"TO","arcs":[[-22,-35,-55,-57,-44]]}]}},"arcs":[[[44,6830],[888,-264],[899,-430]],[[1831,6136],[53,-21]],[[1884,6115],[-496,-311],[-531,28],[4,388],[-163,-136],[-231,11],[-54,142],[-214,6],[78,87],[-155,194],[-60,108],[-1,33],[-60,45],[-1,64],[49,0],[-5,56]],[[9922,6376],[-59,-94],[-100,-112],[-79,-103],[-63,-55],[1,-12],[-26,-38]],[[9596,5962],[-14,24],[-29,-3],[-1,23],[-18,18],[-15,-8],[-64,49],[-2,22],[-265,130]],[[9188,6217],[-59,46]],[[9129,6263],[111,120],[215,-137],[14,29],[52,-1],[19,-19],[167,129],[65,-17],[46,25],[104,-16]],[[2703,9217],[168,-91],[120,-557],[-61,-114],[260,-204],[-27,191],[108,89],[122,-104],[101,52],[-29,45],[90,192],[294,7]],[[3849,8723],[7,-174],[141,-189],[502,-284],[-524,-1167],[62,-132]],[[4037,6777],[-63,-376],[-799,-6]],[[3175,6395],[-154,8],[-180,203],[-183,-1],[-181,-239],[-160,-3],[2,-131],[-360,5],[-128,-101]],[[44,6830],[27,97],[141,67],[-33,110],[118,239],[340,179],[388,28],[140,845],[-157,212],[-4,196],[228,5],[-1,115],[-175,-2],[0,173],[416,3],[191,112],[91,-88],[5,-169],[395,-133],[549,398]],[[6087,8820],[-403,-354],[13,-101],[-173,-13],[-324,622],[-188,125],[-105,0],[-34,187]],[[4873,9286],[56,3],[56,-74],[101,-6],[60,48],[124,-3],[26,-40],[92,0],[383,582],[147,-550],[241,-178],[-6,-154],[-66,-94]],[[9188,6217],[4,-118],[41,-7],[23,-89],[-27,-12],[0,-83],[-46,-14],[-8,15],[-39,-2],[-17,-28],[66,-136],[138,-69]],[[9323,5674],[-231,-360],[-50,33],[-95,-89],[-30,-389],[51,-283],[-113,-360],[41,-104],[-34,-52],[-61,-27],[-40,-91]],[[8761,3952],[-156,102]],[[8605,4054],[20,51],[-108,94],[32,122],[59,9],[78,221]],[[8686,4551],[-1086,452],[-466,-253]],[[7134,4750],[3,94]],[[7137,4844],[-57,487]],[[7080,5331],[-81,420],[192,273]],[[7191,6024],[145,-146],[284,48],[119,154],[-47,124],[94,73],[184,-90],[134,93],[92,0],[159,154]],[[8355,6434],[133,-126],[-2,-70],[89,-2],[251,232],[190,-118],[36,34],[59,-48],[-17,-30],[35,-43]],[[9365,7418],[-85,-34],[-239,-361]],[[9041,7023],[-50,-152],[58,-87],[-44,-118]],[[9005,6666],[-107,0],[-142,107],[-220,-16]],[[8536,6757],[40,160],[-78,32],[-88,447],[-72,510]],[[8338,7906],[-128,50],[128,-50]],[[8338,7906],[333,19],[395,-220],[147,-163],[151,-84],[1,-40]],[[6809,4538],[-247,0],[-1,139],[248,-1],[0,-138]],[[8439,3189],[-202,48],[1,74],[-44,12]],[[8194,3323],[25,149],[102,4],[125,237],[-41,54],[31,73],[-67,107],[59,53],[51,-2],[40,55],[86,1]],[[8761,3952],[-35,-114],[28,-142],[-28,-77],[-70,-49],[-38,-113],[-86,-149],[-55,-3],[-38,-116]],[[5974,5372],[319,-97],[787,56]],[[7137,4844],[-208,-33],[8,-228],[-128,-45]],[[6809,4538],[0,138],[-248,1],[1,-139],[247,0]],[[6809,4538],[7,-515],[-149,-121],[-100,48],[-194,-2],[-98,-84],[-232,-6],[-161,-198]],[[5882,3660],[-484,217],[-63,162]],[[5335,4039],[-42,92],[61,205],[189,243],[111,18],[56,192],[132,22],[132,561]],[[6494,7329],[254,158],[170,251],[207,649]],[[7125,8387],[333,-125],[88,-218],[107,-36],[117,75],[266,-131],[175,2]],[[8211,7954],[-298,-387],[17,-624],[-142,-57],[-38,63],[-118,-43],[-124,-131],[-225,-89],[-129,-304],[37,-358]],[[7191,6024],[-148,36],[-48,105],[-118,179],[62,164],[82,13],[-14,113],[-130,-30],[-161,194],[78,250],[-34,200],[-266,81]],[[8194,3323],[-19,-45],[-34,1],[-68,-172],[14,-23],[-199,-95],[-67,29],[-358,-110]],[[7463,2908],[-407,-128],[-283,748],[-898,17]],[[5875,3545],[7,115]],[[7134,4750],[467,250],[1085,-449]],[[5875,3545],[-380,-578],[-163,-105]],[[5332,2862],[-126,-89],[-93,-129],[-75,-154]],[[5038,2490],[-113,35],[-168,-25],[-124,443],[-541,16],[7,318],[-83,259],[199,521]],[[4215,4057],[199,152],[186,44],[219,-125],[255,6],[107,112],[-1,-117],[-96,-91],[251,1]],[[3397,5141],[213,358],[2,332],[-439,5],[2,559]],[[4037,6777],[360,-535],[1668,-112]],[[6065,6130],[-131,-409],[40,-349]],[[4215,4057],[-217,169],[0,257],[-473,-1],[-3,196],[-100,112],[84,-4],[-5,124],[-33,149],[-71,82]],[[6494,7329],[-53,-48],[143,-59],[-139,-293],[-76,-20],[-89,-202],[56,-59],[-271,-518]],[[3849,8723],[6,259]],[[3855,8982],[444,162],[287,10],[-11,134],[298,-2]],[[6087,8820],[40,-84],[96,8],[298,-157],[5,-63],[120,-42],[77,60],[402,-155]],[[9960,6990],[39,-272]],[[9999,6718],[-63,39],[-105,-17],[-15,-49],[-119,-45],[-62,10],[-87,-35],[-7,-55],[-97,-44],[-84,97],[92,122],[-80,49],[-177,-118],[-190,-6]],[[9041,7023],[118,-34],[216,129],[24,-39],[-79,-138],[198,-78],[83,131],[359,-4]],[[9999,6718],[-77,-342]],[[8355,6434],[181,152],[-1,62],[-43,16],[1,75],[43,18]],[[8211,7954],[127,-48]],[[5332,2862],[851,-121],[143,-388],[301,-170]],[[6627,2183],[-147,-192]],[[6480,1991],[-146,0],[-90,-58],[-97,48],[-174,-2],[-35,-51],[-138,-19],[-30,-85],[-577,95]],[[5193,1919],[-79,159],[-163,12],[87,400]],[[7465,2663],[-31,91],[163,59],[-21,50],[-69,-22],[-44,67]],[[8439,3189],[-36,-55],[23,-120],[-63,-36],[-85,-28],[-110,-92],[30,-33],[-40,-56],[-254,-6],[-143,-22],[-67,34],[-193,-67],[11,-31],[-47,-14]],[[9365,7418],[161,-68],[182,9],[152,-44],[100,-325]],[[3397,5141],[-92,49],[-212,-8],[-79,90],[-419,197],[-101,-39],[-281,219],[1,464],[-330,2]],[[2703,9217],[-4,55],[-149,-1],[-57,298],[-163,167],[23,19],[49,-43],[117,-7],[33,-50],[204,9],[51,-85],[69,20],[-29,72],[127,52],[73,-19],[338,175],[-3,116],[183,4],[6,-185],[93,-36],[4,-150],[-90,-206],[5,-163],[51,-18],[1,-108],[129,-130],[91,-21]],[[5143,1686],[528,-63],[306,-244],[184,-48],[-45,-133],[68,-60]],[[6184,1138],[-135,-303],[-133,-178],[-99,-87],[-222,-158],[-1,77],[49,0],[120,85],[185,255],[-129,25],[-123,-212],[-152,-152],[40,-23],[0,-60],[-59,-68],[-52,-150],[-56,-69],[-157,-120],[-40,34],[30,90],[102,123],[55,-33],[53,110],[-45,29],[-109,-69],[-594,445],[-114,-51],[-363,270],[448,491],[460,247]],[[6480,1991],[30,-65],[-49,-122],[25,-167],[-2,-126],[-41,-168],[-259,-205]],[[5143,1686],[50,233]],[[9596,5962],[-7,-11],[-28,0],[-96,-66],[-142,-211]],[[7465,2663],[-175,-74],[14,-25],[-36,-24],[-59,19],[-73,-11],[-207,-105],[-302,-260]]],"transform":{"scale":[0.003916405286275154,0.0038999519486388173],"translate":[-73.97741220933203,-33.74579986956992]}}
<!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