Grafico de barras de la Población por Provincias, usando D3 con SVG
Last active
August 29, 2015 14:25
-
-
Save nachomezzadra/7f3d2db4bbcf46b51ae1 to your computer and use it in GitHub Desktop.
Población Por Provincias
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="http://d3js.org/d3.v3.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>Poblacion Por Provincias</title> | |
| </head> | |
| <body> | |
| <svg width="800" height="600"> | |
| </svg> | |
| <script id="jsbin-javascript"> | |
| var datos = [ | |
| {"p":"Capital Federal","h":"2891082"}, | |
| {"p":"Buenos Aires","h":"12703346"}, | |
| {"p":"Catamarca","h":"367829"}, | |
| {"p":"Córdoba","h":"3304825"}, | |
| {"p":"Corrientes","h":"993338"}, | |
| {"p":"Chaco","h":"1053466"}, | |
| {"p":"Chubut","h":"506668"}, | |
| {"p":"Entre Ríos","h":"1236300"}, | |
| {"p":"Formosa","h":"527000"}, | |
| {"p":"Jujuy","h":"672260"}, | |
| {"p":"La Pampa","h":"340000"}, | |
| {"p":"La Rioja","h":"331847"}, | |
| {"p":"Mendoza","h":"1720000"}, | |
| {"p":"Misiones","h":"1097829"}, | |
| {"p":"Neuquén","h":"550344"}, | |
| {"p":"Río Negro","h":"633664"}, | |
| {"p":"Salta","h":"1215207"}, | |
| {"p":"San Juan","h":"680427"}, | |
| {"p":"San Luis","h":"431588"}, | |
| {"p":"Santa Cruz","h":"272524"}, | |
| {"p":"Santa Fe","h":"3200736"}, | |
| {"p":"Santiago del Estero","h":"896461"}, | |
| {"p":"Tierra del Fuego","h":"126190"}, | |
| {"p":"Tucumán","h":"1448200"} | |
| ]; | |
| datos.sort(function(a, b) { | |
| return (parseFloat(a.h) - parseFloat(b.h)) * -1 ; | |
| }); | |
| d3.select("svg").selectAll("provinciasText").data(datos).enter().append("text") | |
| .attr("fill", "black") | |
| .attr("x", "0") | |
| .attr("y", function(data, index) {return index*17 +11;}) | |
| .attr("font-family", "Verdana") | |
| .attr("font-size", "12px") | |
| .text(function(data) { return data.p;} ); | |
| d3.select("svg").selectAll("rectangulos").data(datos).enter().append("rect") | |
| .attr("width", function(data, index) {return data.h / 10000; }) | |
| .attr("height", "12") | |
| .attr("fill", "blue") | |
| .attr("x", "130") | |
| .attr("y", function(data, index) {return index*17;}); | |
| d3.select("svg").selectAll("habitantesText").data(datos).enter().append("text") | |
| .attr("fill", "black") | |
| .attr("font-family", "Verdana") | |
| .attr("font-size", "12px") | |
| .attr("x", function(data, index) {return ((data.h/10000)+140) ;}) | |
| .attr("y", function(data, index) {return index*17 +12;}) | |
| .text(function(data) { return data.h;} ); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> var datos = [ | |
| {"p":"Capital Federal","h":"2891082"}, | |
| {"p":"Buenos Aires","h":"12703346"}, | |
| {"p":"Catamarca","h":"367829"}, | |
| {"p":"Córdoba","h":"3304825"}, | |
| {"p":"Corrientes","h":"993338"}, | |
| {"p":"Chaco","h":"1053466"}, | |
| {"p":"Chubut","h":"506668"}, | |
| {"p":"Entre Ríos","h":"1236300"}, | |
| {"p":"Formosa","h":"527000"}, | |
| {"p":"Jujuy","h":"672260"}, | |
| {"p":"La Pampa","h":"340000"}, | |
| {"p":"La Rioja","h":"331847"}, | |
| {"p":"Mendoza","h":"1720000"}, | |
| {"p":"Misiones","h":"1097829"}, | |
| {"p":"Neuquén","h":"550344"}, | |
| {"p":"Río Negro","h":"633664"}, | |
| {"p":"Salta","h":"1215207"}, | |
| {"p":"San Juan","h":"680427"}, | |
| {"p":"San Luis","h":"431588"}, | |
| {"p":"Santa Cruz","h":"272524"}, | |
| {"p":"Santa Fe","h":"3200736"}, | |
| {"p":"Santiago del Estero","h":"896461"}, | |
| {"p":"Tierra del Fuego","h":"126190"}, | |
| {"p":"Tucumán","h":"1448200"} | |
| ]; | |
| datos.sort(function(a, b) { | |
| return (parseFloat(a.h) - parseFloat(b.h)) * -1 ; | |
| }); | |
| d3.select("svg").selectAll("provinciasText").data(datos).enter().append("text") | |
| .attr("fill", "black") | |
| .attr("x", "0") | |
| .attr("y", function(data, index) {return index*17 +11;}) | |
| .attr("font-family", "Verdana") | |
| .attr("font-size", "12px") | |
| .text(function(data) { return data.p;} ); | |
| d3.select("svg").selectAll("rectangulos").data(datos).enter().append("rect") | |
| .attr("width", function(data, index) {return data.h / 10000; }) | |
| .attr("height", "12") | |
| .attr("fill", "blue") | |
| .attr("x", "130") | |
| .attr("y", function(data, index) {return index*17;}); | |
| d3.select("svg").selectAll("habitantesText").data(datos).enter().append("text") | |
| .attr("fill", "black") | |
| .attr("font-family", "Verdana") | |
| .attr("font-size", "12px") | |
| .attr("x", function(data, index) {return ((data.h/10000)+140) ;}) | |
| .attr("y", function(data, index) {return index*17 +12;}) | |
| .text(function(data) { return data.h;} ); | |
| </script></body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment