Palabras con más frecuencia en los titulares de los diarios de Argentina (implementado con D3plus, treemap) by aaizemberg

index.html

<!doctype html>
<meta charset="utf-8">
<style type="text/css">
body {
    overflow:hidden;
}
</style>
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<input id="date" type="date" onchange="change_date(event);">
<input id="word" type="text" disabled>
<div id="viz"></div>
<script>
  var visualization;
  var fecha = new Date().toISOString().slice(0,10);
  d3.select("input#date").attr("value",fecha);
  var url = '//pf2.it.itba.edu.ar/api/nube-de-palabras?limit=10&';
  draw( url );

  function draw( url ) {
    d3.json( url, function(json) {
      visualization = d3plus.viz()
                            .container("#viz")
                            .data(json.data)  
                            .type("tree_map")   
                            .id("word")         
                            .size("word_count")
                            .mouse({
                                "move": false,
                                "click": function(d) { update_word(d.word); }
                            })    
                            .draw();
    })
  }

  function redraw( url ) {
    d3.json( url, function(json) {
      visualization.data(json.data).draw();
    })
  }
  
  function get_word() {
    return d3.select("input#word").property("value");
  }
  
  function set_word(w) {
    d3.select("input#word").attr("value",w);
  }
  
  function update_word(w) {
    set_word(w);
    redraw( url + "d_to=" + fecha + "&words=" + get_word() );
  }

  function change_date(e){
    fecha = e.target.value;
    set_word("");
    if (e.target.value.length == 10) {
      redraw( url + "d_to=" + fecha );
    }
  }
  
</script>