D3 Examples - nube de palabras - los temas del día

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>nube de palabras</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/jasondavies/d3-cloud/v1.2.1/build/d3.layout.cloud.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:500" rel="stylesheet">
  <style>
    a:link { 
      font-weight: normal;
      text-decoration: none;
    }    
    a:hover, a:focus {
      font-weight: bold;
      text-decoration: underline;
    }
  </style>
  </head>
<body>
​
<script>
var colores = d3.schemeCategory20;
function fill(i, vector) {
  return vector[i % vector.length];
}
​
var scale = d3.scaleLinear();
​
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
if (dd < 10) { dd = '0'+dd } 
if (mm < 10) { mm = '0'+mm } 
today = yyyy + "-" + mm + "-" + dd; // today en formato 'YYYY-MM-DD'
​
var width   = 750, height = 500;
var limit   = 200; // cantidad de palabras a recuperar
var d_from  = today; // fecha desde formato 'yyyy-mm-dd'
var d_to    = today; // fecha hasta formato 'yyyy-mm-dd'
var search  = "";
var url     = "https://pf2.it.itba.edu.ar/api/nube-de-palabras?d_from="+d_from+"&d_to="+d_to+"&words="+search+"&limit="+limit;  
var font    = "Montserrat";
var datos;
​
function hex2a(hexx) {
  var hex = hexx.toString();
  var str = '';
  for (var i = 0; i < hex.length; i += 2) str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
  return str;
}
​
function draw(words) {
  d3.select("body").append("svg")
      .attr("width", width )
      .attr("height", height )
    .append("g")
      .attr("transform", "translate(" + width/2 + "," + height/2 + ")")
    .selectAll("text")
    .data(words)
    .enter()
      .append("a")
        .attr("xlink:href", function(d) { return ( d.text==hex2a('6d61637269') ? "//goo.gl/dzsVGa" : "//news.google.com/news/search/section/q/" + d.text + "/" + d.text + "?hl=es-419&gl=AR&ned=es_ar" ); })
        .attr("target", "_blank")
      .append("text")
      .style("font-size", function(d) { return d.size + "px"; })
      .style("font-family", font)
      .style("fill", function(d, i) { return fill(i,colores); })
      .attr("text-anchor", "middle")
      .attr("transform", function(d) {
        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
      })
      .text(function(d) { return d.text; });
}
​
var layout;
​
d3.json(url, function(data) {
  if (data.status == "success") {
    datos = data.data;
    datos.forEach(function(d) {
      d.text = d.word;
      d.size = d.word_count;
    });
    
    scale
      .domain([1, d3.max(datos.map(function(d){return d.size;})) ])
      .range([4,50]); 
    
    layout = d3.layout.cloud()
      .size( [width, height] )
      .words(datos)     
      .padding(1)
      .rotate(function() { return ~~(Math.random() * 2) * 90; })
      .font( font )
      .fontSize(function(d) { return scale(d.word_count); })
      .on("end", draw);
​
    layout.start();
​
  }
});
</script>  
</body>
</html>
    