tarea: filtrar las barras mostradas, según el slider by aaizemberg

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Slider</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
</head>
<body>
  <!-- tarea, usar este slider, para filtrar el grafico de barras -->
  <input id="rango" type="range" min="0" max="15625084" value="15625084" />  

  <!-- dentro de este DIV, esta el SVG generado desde D3.js -->
  <div id="viz"></div>

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

app.js

var w = 500, h = 600;

var svg = d3.select("div#viz")
              .append("svg")
                .attr("width",w)
                .attr("height",h);

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}];

// cargar el JSON desde un archivo externo, usar d3.json(...)

// selectAll, select, data, enter, append

var data_filtered  = _.filter(data, function(o) { return o.poblacion > 1; });

// Tutoriales JS para gatos
// http://jsforcats.com/ ,  https://jsparagatos.com/
// http://learnjsdata.com/

svg.append("g").style("font-weight","normal").style("fill","grey")
  .selectAll("text.lprov").data(data_filtered).enter().append("text")
  .attr("class","lprov")
  .attr("x",230)
  .attr("y",  function(d,i) { return (i+1)*15;}  )
  .text( function(d,i) { return d.provincia;} )
  .attr("text-anchor","end");


var max = d3.max(data.map(function(o) { return o.poblacion; }));

var escala = d3.scaleLinear()
                    .domain([0, max  ])
                    .range([10, w-240]);

var color = d3.scaleOrdinal(d3.schemeCategory20);

svg.append("g")
  .selectAll("rect").data(data_filtered).enter().append("rect")
  .attr("x",240)
  .attr("y",  function(d,i) { return (i*15)+2;}  )
  .attr("width",  0 )
  .attr("height", 14)
  .attr("fill",function (d,i) { return color(i); } )
    .append("title")
    .text( function(d,i) { return d.poblacion.toLocaleString() + ' habitantes';} );

d3.selectAll("rect")
  .transition().duration(1000)
  .delay( function(d,i) {return Math.sqrt(i*10000);} )
  .attr("width",  function(d,i) { return escala(d.poblacion);}  )