barras svg d3.js argentina censo 2010 by aaizemberg

index.html

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <meta charset="utf-8">
  <title>barras</title>
  
  <style>
    text {
      font-family: Ubuntu, Helvetica, Arial, sans-serif;
      font-size: 90%;
}
 </style>
    
  
</head>
<body>
  <div id="barras"></div>

  <script src="barras.js"></script>  
</body>
</html>

barras.js

var data;  

//  d3.tsv("https://gist.githubusercontent.com/aaizemberg/0abd47713294498766e8/raw/351229e180af58f7ea4ab499d937134db004b082/p1p.tsv", function(tsv) {
d3.tsv("p1p.tsv", function(tsv) {    
  
  tsv.forEach(function(d) {
      d.poblacion = +d.poblacion;
  });
    
  data = tsv;
    
  barras();
});

function barras() {
  var w = 700, h = 500, p = 15;
  var ancho = d3.scale.linear()
                .domain( [0 , d3.max(d3.extent(data, function(d) { return d.poblacion; })) ] )
                .range( [0 , w/1.9 ] );
  var yScale = d3.scale.linear().domain( [0, data.length ] ).range( [p+12 , h] );
  
  d3.select("div#barras")
    .append("svg")
    .attr("width",w)
    .attr("height",h);

  var svg = d3.select("svg");

  svg.selectAll("tProv").data(data).enter().append("text")
   .attr("x",240)
   .attr("y" , function(d,i) {return yScale(i); }  )
   .attr("text-anchor","end")
   .attr("fill","grey")
   .text(function(d,i) {return d.provincia; });

   svg.selectAll("rect").data(data).enter().append("rect")
   .style("fill","grey")
   .attr("x", 245)
   .attr("y" , function(d,i) {return yScale(i)-12; }  )
   .attr("rx",4).attr("ry",4)
   .attr("height", 15)
   .attr("width", function(d,i) {return ancho(d.poblacion); }  )
   .on("mouseover", function() { d3.select(this).style("fill", "black");} )
   .on("mouseout", function() { d3.select(this).style("fill", "grey");} )
   .append("title").text(function(d,i) {return "La provincia de " + d.provincia + " tiene " + d.poblacion.toLocaleString() + " habitantes."; });

  svg.selectAll("tValues").data(data).enter().append("text")
   .attr("x", function(d,i) {return 235 + p +  ancho(d.poblacion); })
   .attr("y" , function(d,i) {return yScale(i); }  )
   .attr("fill","grey")
   .text(function(d,i) {return d.poblacion.toLocaleString(); });
}

p1p.tsv

provincia	poblacion
Buenos Aires	15625084
Córdoba	3308876
Santa Fe	3194537
Ciudad Autónoma de Buenos Aires	2890151
Mendoza	1738929
Tucumán	1448188
Entre Ríos	1235994
Salta	1214441
Misiones	1101593
Chaco	1055259
Corrientes	992595
Santiago del Estero	874006
San Juan	681055
Jujuy	673307
Río Negro	638645
Neuquén	551266
Formosa	530162
Chubut	509108
San Luis	432310
Catamarca	367828
La Rioja	333642
La Pampa	318951
Santa Cruz	273964
Tierra del Fuego	127205