Skip to content

Instantly share code, notes, and snippets.

@nachomezzadra

nachomezzadra/README.md

Last active August 29, 2015 14:25
Show Gist options
  • Save nachomezzadra/7f3d2db4bbcf46b51ae1 to your computer and use it in GitHub Desktop.
Save nachomezzadra/7f3d2db4bbcf46b51ae1 to your computer and use it in GitHub Desktop.
Download ZIP
Población Por Provincias
Raw
README.md

Grafico de barras de la Población por Provincias, usando D3 con SVG

Raw
index.html
<!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