Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Created March 5, 2018 13:17
Show Gist options
  • Save aaizemberg/cb097bdda83c6521ef3c75bea965d42e to your computer and use it in GitHub Desktop.
Save aaizemberg/cb097bdda83c6521ef3c75bea965d42e to your computer and use it in GitHub Desktop.
Download ZIP
ejercicio nro 1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="viz"></div>
<script>
var data = [
{"provincia":"BUENOS AIRES","poblacion":15625084},
{"provincia":"CORDOBA","poblacion":3308876},
{"provincia":"SANTA FE","poblacion":3194537},
{"provincia":"CABA","poblacion":2890151},
{"provincia":"MENDOZA","poblacion":1738929},
{"provincia":"TUCUMAN","poblacion":1448188},
{"provincia":"ENTRE RIOS","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":"RIO NEGRO","poblacion":638645},
{"provincia":"NEUQUEN","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 svg = d3.select("div#viz")
.append("svg")
.attr("width",800)
.attr("height",600);
svg.selectAll("text")
.data(data).enter()
.append("text")
.attr("x",10)
.attr("y",function(d,i) { return 12+i*20})
.text( function(d,i) {return d.provincia;} );
svg.selectAll("rect")
.data(data).enter()
.append("rect")
.attr("x",200)
.attr("y",function(d,i) { return i*20;})
.attr("width",0)
.attr("height",19)
.attr("fill","white");
svg.selectAll("rect").transition()
.duration(500)
.attr("fill","steelblue")
.attr("width",function(d,i){
return (d.poblacion / 15625084) * 400;
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment