Created
March 16, 2017 16:02
-
-
Save aaizemberg/89b0ab60eaf7fcf2497e5001f84f90ad to your computer and use it in GitHub Desktop.
ejercicio 2
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> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script> | |
</head> | |
<body> | |
<div id="viz"></div> | |
<script> | |
var data = [{"provincia":"Buenos Aires","poblacion":15625084}, | |
{"provincia":"Córdoba","poblacion":3308876}, | |
{"provincia":"Santa Fe","poblacion":3194537}, | |
{"provincia":"Ciudad Autónoma de Buenos Aires","poblacion":2890151}, | |
{"provincia":"Mendoza","poblacion":1738929}, | |
{"provincia":"Tucumán","poblacion":1448188}, | |
{"provincia":"Entre Ríos","poblacion":1235994}, | |
{"provincia":"Salta","poblacion":1214441}, | |
{"provincia":"Misiones","poblacion":1101593}, | |
{"provincia":"Chaco","poblacion":1055259}, | |
{"provincia":"Corrientes","poblacion":992595}, | |
{"provincia":"Santiago del Estero","poblacion":874006}, | |
{"provincia":"San Juan","poblacion":681055}, | |
{"provincia":"Jujuy","poblacion":673307}, | |
{"provincia":"Río Negro","poblacion":638645}, | |
{"provincia":"Neuquén","poblacion":551266}, | |
{"provincia":"Formosa","poblacion":530162}, | |
{"provincia":"Chubut","poblacion":509108}, | |
{"provincia":"San Luis","poblacion":432310}, | |
{"provincia":"Catamarca","poblacion":367828}, | |
{"provincia":"La Rioja","poblacion":333642}, | |
{"provincia":"La Pampa","poblacion":318951}, | |
{"provincia":"Santa Cruz","poblacion":273964}, | |
{"provincia":"Tierra del Fuego","poblacion":127205}]; | |
var w=800, h=600 , pad=250; | |
var svg = d3.select("div#viz").append("svg").attr("width",w).attr("height",h); | |
svg.selectAll("text").data(data).enter().append("text") | |
.attr("x",10) | |
.attr("y", function(d,i) {return 15+(i*20);} ) | |
.text( function(d,i) {return d.provincia;} ) | |
var escala = d3.scaleLinear().domain([0,15625084]).range([0,w-pad]); | |
svg.selectAll("rect").data(data).enter().append("rect") | |
.attr("x",250) | |
.attr("y", function(d,i) {return (i*20);} ) | |
.attr("width", function(d,i) { return escala(d.poblacion)} ) | |
.attr("height",18) | |
.append("title") | |
.text( function(d,i) {return d.provincia + ": " + d.poblacion.toLocaleString();} ); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment