Old school D3 from simpler times

All examples By author By category About

aaizemberg

Full window Github gist

ejercicio 2

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js