aaizemberg/index.html

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