Cassandra word cloud III (stemming)

README.md

Treemap word cloud (similar to this example) showing the most used words in a forum about drugs. Thanks to the stemming process, the problem of counting singular and plural forms of the same word as different words is avoided, but the side effect is that some stems are no longer readable words with a meaning. Important keywords are emphasized (those not affected by the stemming).

This is a visualization for the European project CASSANDRA.

index.coffee

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

treemap = d3.layout.treemap()
  .size([width, height])
  .value((node) -> node.count)
  .sort((a,b) -> a.count-b.count)
  .ratio(2)
  .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])

# 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,10]) # 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})"

d3.csv 'kw_twitter.csv', (keywords_data) ->
  keywords=keywords_data.map (d) -> d.keyword
  #console.log keywords
  
  color = (txt, light) ->
    Math.seedrandom(txt+'abcdef')
    noise = (W) -> Math.random()*W - W/2
    d3.hcl(0+noise(360), 40, if txt in keywords then 10 else 70)  
  
  d3.csv 'word_count_drugsforum.csv', (data) ->
    data.forEach (d) -> d.count = +d.count
    tree = {children: data, name: "cassandra"}
    nodes_data = treemap.nodes(tree)
    #console.log data
    
    #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.tag, true)
    
    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.stem.toUpperCase())
      .attr
        dy: '0.35em'
        fill: (node) -> color(node.stem, 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'
      

index.css

svg {
  background: white;
}
.node {
  shape-rendering: crispEdges;
  vector-effect: non-scaling-stroke;
  stroke: white;
  stroke-width: 2;
}
.label {
  pointer-events: none;
  text-anchor: middle;
  font-family: Impact;
}

index.html

<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
        <title>Cassandra word cloud III (stemming)</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>
        <svg height="500" width="960"></svg>
        <script src="index.js"></script>
	</body>
</html>

index.js

// Generated by CoffeeScript 1.4.0
(function() {
  var correct_x, correct_y, height, svg, treemap, vis, width, zoom, zoomable_layer,
    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

  svg = d3.select('svg');

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

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

  treemap = d3.layout.treemap().size([width, height]).value(function(node) {
    return node.count;
  }).sort(function(a, b) {
    return a.count - b.count;
  }).ratio(2).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]);

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

  zoomable_layer = svg.append('g');

  zoom = d3.behavior.zoom().scaleExtent([1, 10]).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) + ")"
  });

  d3.csv('kw_twitter.csv', function(keywords_data) {
    var color, keywords;
    keywords = keywords_data.map(function(d) {
      return d.keyword;
    });
    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, __indexOf.call(keywords, txt) >= 0 ? 10 : 70);
    };
    return d3.csv('word_count_drugsforum.csv', function(data) {
      var enter_labels, labels, nodes_data, tree;
      data.forEach(function(d) {
        return d.count = +d.count;
      });
      tree = {
        children: data,
        name: "cassandra"
      };
      nodes_data = treemap.nodes(tree);
      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.stem.toUpperCase();
      }).attr({
        dy: '0.35em',
        fill: function(node) {
          return color(node.stem, 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'
      });
    });
  });

}).call(this);

kw_twitter.csv

keyword
codeine
viagra
steroids
adderall
panadol
morphine
mdma
nutmeg
xanax
melatonin
lithium
shroom
kanna
valium
peyote
promethazine
benadryl
khat
kava
methadone
ghb
tramadol
acetone
sizzurp
clonazepam
psilocybin
ayahuasca
diazepam
oxycodone
vicodin
kratom
hydrocodone
pregabalin
naloxone
fentanyl
ritalin
paracet
nitrous oxide
percocet
modafinil
klonopin
lorazepam
cocodamol
alprazolam
dxm
codis
kapake
suboxone
oxandrolone
dabiq
midazolam
dextromethorphan
oxycontin
diphenhydramine
gabapentin
neurofen
bromazepam
salvia divinorum
feminax
buprenorphine
zolpidem
datura
mephedrone
naltrexone
baclofen
zopiclone
iboga
temazepam
trazodone
hydromorphone
methylphenidate
loperamide
solpadeine
subutex
solpadol
mdai
nandrolone
dihydrocodeine
migraleve
panadeine
ascodan
etizolam
ethylphenidate
nitrazepam
syndol
zapain
paramol
etizolam
phenibut
librium
algidol
gogaine
woodrose
codydramol
clonazolam
flunitrazepam
methoxphenidine
flurazepam
veganin
fubinaca
methiopropamine
pinaca
boldenone
1p-lsd
synthacaine
acamprosate
diphenidine
flubromazolam
paracodol
acetylfentanyl
natterman
pyrazolam
methoxetamine
nitracaine
clorazepate
chminaca
nalmefene
isopropylphenidate
paderyl
phenazepam
codipar
flubromazolam
remedeine
sedaspir
chmica
aceffein
cocodaprin
copralgir
coproxamol
dypracet
kodamid
kodimagnyl
maxilief
medocodene
novacetol
paracofdal
parcoten
zolpiden
2c-tfm
4-eec
4metmp
5-bpdi
db-mdbp
deschloroketamine
ethylethcathinone
methylnaphthidate
nm2ai
ocfentanil
propylphenidate

thumbnail.png

word_count_drugsforum.csv