block by aaizemberg cb097bdda83c6521ef3c75bea965d42e

ejercicio nro 1

Full Screen

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>