D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
Palabras con más frecuencia en los titulares de los diarios de Argentina (implementado con D3plus, treemap)
<!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 = 'https://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>
https://d3plus.org/js/d3.js
https://d3plus.org/js/d3plus.js