Last active
November 25, 2015 19:47
-
-
Save aaizemberg/0abd47713294498766e8 to your computer and use it in GitHub Desktop.
barras svg d3.js argentina censo 2010
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
| var data; | |
| // d3.tsv("https://gist.githubusercontent.com/aaizemberg/0abd47713294498766e8/raw/351229e180af58f7ea4ab499d937134db004b082/p1p.tsv", function(tsv) { | |
| d3.tsv("p1p.tsv", function(tsv) { | |
| tsv.forEach(function(d) { | |
| d.poblacion = +d.poblacion; | |
| }); | |
| data = tsv; | |
| barras(); | |
| }); | |
| function barras() { | |
| var w = 700, h = 500, p = 15; | |
| var ancho = d3.scale.linear() | |
| .domain( [0 , d3.max(d3.extent(data, function(d) { return d.poblacion; })) ] ) | |
| .range( [0 , w/1.9 ] ); | |
| var yScale = d3.scale.linear().domain( [0, data.length ] ).range( [p+12 , h] ); | |
| d3.select("div#barras") | |
| .append("svg") | |
| .attr("width",w) | |
| .attr("height",h); | |
| var svg = d3.select("svg"); | |
| svg.selectAll("tProv").data(data).enter().append("text") | |
| .attr("x",240) | |
| .attr("y" , function(d,i) {return yScale(i); } ) | |
| .attr("text-anchor","end") | |
| .attr("fill","grey") | |
| .text(function(d,i) {return d.provincia; }); | |
| svg.selectAll("rect").data(data).enter().append("rect") | |
| .style("fill","grey") | |
| .attr("x", 245) | |
| .attr("y" , function(d,i) {return yScale(i)-12; } ) | |
| .attr("rx",4).attr("ry",4) | |
| .attr("height", 15) | |
| .attr("width", function(d,i) {return ancho(d.poblacion); } ) | |
| .on("mouseover", function() { d3.select(this).style("fill", "black");} ) | |
| .on("mouseout", function() { d3.select(this).style("fill", "grey");} ) | |
| .append("title").text(function(d,i) {return "La provincia de " + d.provincia + " tiene " + d.poblacion.toLocaleString() + " habitantes."; }); | |
| svg.selectAll("tValues").data(data).enter().append("text") | |
| .attr("x", function(d,i) {return 235 + p + ancho(d.poblacion); }) | |
| .attr("y" , function(d,i) {return yScale(i); } ) | |
| .attr("fill","grey") | |
| .text(function(d,i) {return d.poblacion.toLocaleString(); }); | |
| } |
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> | |
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>barras</title> | |
| <style> | |
| text { | |
| font-family: Ubuntu, Helvetica, Arial, sans-serif; | |
| font-size: 90%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="barras"></div> | |
| <script src="barras.js"></script> | |
| </body> | |
| </html> |
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
| provincia | poblacion | |
|---|---|---|
| Buenos Aires | 15625084 | |
| Córdoba | 3308876 | |
| Santa Fe | 3194537 | |
| Ciudad Autónoma de Buenos Aires | 2890151 | |
| Mendoza | 1738929 | |
| Tucumán | 1448188 | |
| Entre Ríos | 1235994 | |
| Salta | 1214441 | |
| Misiones | 1101593 | |
| Chaco | 1055259 | |
| Corrientes | 992595 | |
| Santiago del Estero | 874006 | |
| San Juan | 681055 | |
| Jujuy | 673307 | |
| Río Negro | 638645 | |
| Neuquén | 551266 | |
| Formosa | 530162 | |
| Chubut | 509108 | |
| San Luis | 432310 | |
| Catamarca | 367828 | |
| La Rioja | 333642 | |
| La Pampa | 318951 | |
| Santa Cruz | 273964 | |
| Tierra del Fuego | 127205 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment