Cassandra word cloud IV (with search keyword)

README.md

index.coffee

svg = d3.select('svg')
width = svg.node().getBoundingClientRect().width
height = svg.node().getBoundingClientRect().height

keyword = 'flakka'
forum = 'drugsforum'

treemap = d3.layout.treemap()
  .size([width, height])
  .value((node) -> node.count)
  .sort((a,b) -> d3.ascending(a.count,b.count))
  .ratio(4)
  .round(false) # bugfix: d3 wrong ordering
  
correct_x = d3.scale.linear()
  .domain([0, width])
  .range([0, width*1.05])
correct_y = d3.scale.linear()
  .domain([0, height])
  .range([0, height*3/4])
  
color = (txt, light) ->
  Math.seedrandom(txt+'abcdef')
  noise = (W) -> Math.random()*W - W/2
  d3.hcl(0+noise(360), 40, 40)

# translate the viewBox to have (0,0) at the center of the vis
svg
  .attr
    viewBox: "#{-width/2} #{-height/2} #{width} #{height}"
    
# append a group for zoomable content
zoomable_layer = svg.append('g')
 
# define a zoom behavior
zoom = d3.behavior.zoom()
  .scaleExtent([1,30]) # min-max zoom
  .on 'zoom', () ->
    # GEOMETRIC ZOOM
    zoomable_layer
      .attr
        transform: "translate(#{zoom.translate()})scale(#{zoom.scale()})"

# bind the zoom behavior to the main SVG
svg.call(zoom)

# group the visualization
vis = zoomable_layer.append('g')
  .attr
    transform: "translate(#{-width/2},#{-height/2})"

redraw = () ->
  d3.select('body').classed 'wait', true
  d3.json "http://wafi.iit.cnr.it/cas-scraper2/api/wordcloud/mkcloud.php?db=#{forum}&term=#{keyword}", (result) ->
    result.data.sort (a,b) -> d3.descending(a.count, b.count)
    result.data = result.data[0...500]
    #console.log result
    tree = {children: result.data, name: "cassandra"}
    nodes_data = treemap.nodes(tree)
    d3.select('body').classed 'wait', false


    #nodes = vis.selectAll('.node')
    #  .data(nodes_data.filter((node) -> node.depth is 1))
    #  
    #enter_nodes = nodes.enter().append('rect')
    #  .attr
    #    class: 'node'
    #    x: (node) -> node.x
    #    y: (node) -> node.y
    #    width: (node) -> node.dx
    #    height: (node) -> node.dy
    #    fill: (node) -> color(node.keyword, true)
    
    vis.selectAll('*').remove()
    console.log result

    labels = vis.selectAll('.label')
        .data(nodes_data.filter((node) -> node.depth is 1))

    enter_labels = labels.enter().append('svg')
        .attr
          class: 'label'

    enter_labels.append('text')
        .text((node) -> node.term.toUpperCase())
        .attr
          dy: '0.35em'
          fill: (node) -> color(node.term, false)
        .each (node) ->
          bbox = this.getBBox()
          bbox_aspect = bbox.width / bbox.height

          node_bbox = {width: node.dx, height: node.dy}
          node_bbox_aspect = node_bbox.width / node_bbox.height

          rotate = bbox_aspect >= 1 and node_bbox_aspect < 1 or bbox_aspect < 1 and node_bbox_aspect >= 1
          node.label_bbox = {
            x: bbox.x+(bbox.width-correct_x(bbox.width))/2,
            y: bbox.y+(bbox.height-correct_y(bbox.height))/2,
            width: correct_x(bbox.width),
            height: correct_y(bbox.height)
          }

          if rotate
            node.label_bbox = {
              x: node.label_bbox.y,
              y: node.label_bbox.x,
              width: node.label_bbox.height,
              height: node.label_bbox.width
            }
            d3.select(this).attr('transform', 'rotate(-90)')


    enter_labels
      .attr
        x: (node) -> node.x
        y: (node) -> node.y
        width: (node) -> node.dx
        height: (node) -> node.dy
        viewBox: (node) -> "#{node.label_bbox.x} #{node.label_bbox.y} #{node.label_bbox.width} #{node.label_bbox.height}"
        preserveAspectRatio: 'none'

d3.select("#keyword").node().value = keyword

d3.select("#keyword").on 'keyup', () ->
  if(d3.event.keyCode == 13)
    keyword = this.value
      .replace(/ and /gi, "%2BAND%2B") # URL encoding of queries
      .replace(/ or /gi, "%2BOR%2B")
      .replace(/-/g, "%2D")
      .replace(/ /g, "%2B")
    redraw()
    
  
d3.select "#forum_ctrl"
   .on "change", () ->
      forum = this.options[this.selectedIndex].value
      redraw()
    
    
redraw()

index.css

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: sans-serif;
  font-size: 12px;
}
body.wait {
  cursor: progress;
}
body {
  display: flex;
  flex-direction: column;
}
#forum_bar, #search {
  height: 20px;
  padding: 2px;
}
svg {
  flex-grow: 1;
  height: 0;
  margin: 6px;
}
.node {
  shape-rendering: crispEdges;
  vector-effect: non-scaling-stroke;
  stroke: white;
  stroke-width: 2;
}
.label {
  pointer-events: none;
  text-anchor: middle;
  font-family: Impact;
}
input{
  padding : 0 2px;
  margin  : 0;
  width   : 240px;
}

index.html

<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
        <meta name="description" content="Word cloud treemap (flare)" />
        <title>Cassandra word cloud IV (with search keyword)</title>
		<link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="http://davidbau.com/encode/seedrandom-min.js"></script>
        <script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
        <div id="forum_bar">
          <label>Select source:</label>
          <select id="forum_ctrl">
            <option value="drugsforum">Drugs-forum</option>
            <option value="bluelight">Bluelight</option>
            <option value="tweets_NPS">Tweets</option>
          </select>
        </div>
        <div id="search">
          <label>Keyword:</label>
          <input type="search" id="keyword">
        </div>
        <svg></svg>
        <script src="index.js"></script>
	</body>
</html>

index.js

// Generated by CoffeeScript 1.10.0
(function() {
  var color, correct_x, correct_y, forum, height, keyword, redraw, svg, treemap, vis, width, zoom, zoomable_layer;

  svg = d3.select('svg');

  width = svg.node().getBoundingClientRect().width;

  height = svg.node().getBoundingClientRect().height;

  keyword = 'flakka';

  forum = 'drugsforum';

  treemap = d3.layout.treemap().size([width, height]).value(function(node) {
    return node.count;
  }).sort(function(a, b) {
    return d3.ascending(a.count, b.count);
  }).ratio(4).round(false);

  correct_x = d3.scale.linear().domain([0, width]).range([0, width * 1.05]);

  correct_y = d3.scale.linear().domain([0, height]).range([0, height * 3 / 4]);

  color = function(txt, light) {
    var noise;
    Math.seedrandom(txt + 'abcdef');
    noise = function(W) {
      return Math.random() * W - W / 2;
    };
    return d3.hcl(0 + noise(360), 40, 40);
  };

  svg.attr({
    viewBox: (-width / 2) + " " + (-height / 2) + " " + width + " " + height
  });

  zoomable_layer = svg.append('g');

  zoom = d3.behavior.zoom().scaleExtent([1, 30]).on('zoom', function() {
    return zoomable_layer.attr({
      transform: "translate(" + (zoom.translate()) + ")scale(" + (zoom.scale()) + ")"
    });
  });

  svg.call(zoom);

  vis = zoomable_layer.append('g').attr({
    transform: "translate(" + (-width / 2) + "," + (-height / 2) + ")"
  });

  redraw = function() {
    d3.select('body').classed('wait', true);
    return d3.json("http://wafi.iit.cnr.it/cas-scraper2/api/wordcloud/mkcloud.php?db=" + forum + "&term=" + keyword, function(result) {
      var enter_labels, labels, nodes_data, tree;
      result.data.sort(function(a, b) {
        return d3.descending(a.count, b.count);
      });
      result.data = result.data.slice(0, 500);
      tree = {
        children: result.data,
        name: "cassandra"
      };
      nodes_data = treemap.nodes(tree);
      d3.select('body').classed('wait', false);
      vis.selectAll('*').remove();
      console.log(result);
      labels = vis.selectAll('.label').data(nodes_data.filter(function(node) {
        return node.depth === 1;
      }));
      enter_labels = labels.enter().append('svg').attr({
        "class": 'label'
      });
      enter_labels.append('text').text(function(node) {
        return node.term.toUpperCase();
      }).attr({
        dy: '0.35em',
        fill: function(node) {
          return color(node.term, false);
        }
      }).each(function(node) {
        var bbox, bbox_aspect, node_bbox, node_bbox_aspect, rotate;
        bbox = this.getBBox();
        bbox_aspect = bbox.width / bbox.height;
        node_bbox = {
          width: node.dx,
          height: node.dy
        };
        node_bbox_aspect = node_bbox.width / node_bbox.height;
        rotate = bbox_aspect >= 1 && node_bbox_aspect < 1 || bbox_aspect < 1 && node_bbox_aspect >= 1;
        node.label_bbox = {
          x: bbox.x + (bbox.width - correct_x(bbox.width)) / 2,
          y: bbox.y + (bbox.height - correct_y(bbox.height)) / 2,
          width: correct_x(bbox.width),
          height: correct_y(bbox.height)
        };
        if (rotate) {
          node.label_bbox = {
            x: node.label_bbox.y,
            y: node.label_bbox.x,
            width: node.label_bbox.height,
            height: node.label_bbox.width
          };
          return d3.select(this).attr('transform', 'rotate(-90)');
        }
      });
      return enter_labels.attr({
        x: function(node) {
          return node.x;
        },
        y: function(node) {
          return node.y;
        },
        width: function(node) {
          return node.dx;
        },
        height: function(node) {
          return node.dy;
        },
        viewBox: function(node) {
          return node.label_bbox.x + " " + node.label_bbox.y + " " + node.label_bbox.width + " " + node.label_bbox.height;
        },
        preserveAspectRatio: 'none'
      });
    });
  };

  d3.select("#keyword").node().value = keyword;

  d3.select("#keyword").on('keyup', function() {
    if (d3.event.keyCode === 13) {
      keyword = this.value.replace(/ and /gi, "%2BAND%2B").replace(/ or /gi, "%2BOR%2B").replace(/-/g, "%2D").replace(/ /g, "%2B");
      return redraw();
    }
  });

  d3.select("#forum_ctrl").on("change", function() {
    forum = this.options[this.selectedIndex].value;
    return redraw();
  });

  redraw();

}).call(this);

kw_twitter.csv

thumbnail.png