Treemap word cloud (adapted from this example and keeping into account the bugfix used in this example). It shows the volume of messages with those keywords retrieved from Twitter. The technique used to color the words is taken from this example.
This is a visualization for the European project CASSANDRA.
| svg = d3.select('svg') | |
| width = svg.node().getBoundingClientRect().width | |
| height = svg.node().getBoundingClientRect().height | |
| treemap = d3.layout.treemap() | |
| .size([width, height]) | |
| .value((node) -> node.freq) | |
| .sort((a,b) -> a.freq-b.freq) | |
| .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})" | |
| #d3.json 'http://wafi.iit.cnr.it/cas-twmon/statistics/api/getVolumes.php', (data) -> | |
| d3.csv 'kw_twitter.csv', (data) -> | |
| data.forEach (d) -> d.freq = +d.freq | |
| 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.keyword, 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.keyword.toUpperCase()) | |
| .attr | |
| dy: '0.35em' | |
| fill: (node) -> color(node.keyword, 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' | |
| 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; | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="description" content="Word cloud treemap (flare)" /> | |
| <title>Cassandra word cloud</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> |
| // Generated by CoffeeScript 1.4.0 | |
| (function() { | |
| var color, correct_x, correct_y, height, svg, treemap, vis, width, zoom, zoomable_layer; | |
| 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.freq; | |
| }).sort(function(a, b) { | |
| return a.freq - b.freq; | |
| }).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) + ")" | |
| }); | |
| d3.csv('kw_twitter.csv', function(data) { | |
| var enter_labels, labels, nodes_data, tree; | |
| data.forEach(function(d) { | |
| return d.freq = +d.freq; | |
| }); | |
| 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.keyword.toUpperCase(); | |
| }).attr({ | |
| dy: '0.35em', | |
| fill: function(node) { | |
| return color(node.keyword, 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); |
| keyword | freq | |
|---|---|---|
| codeine | 99131 | |
| viagra | 74354 | |
| steroids | 60804 | |
| adderall | 41047 | |
| panadol | 26691 | |
| morphine | 24860 | |
| mdma | 21251 | |
| nutmeg | 20751 | |
| xanax | 19356 | |
| melatonin | 14337 | |
| lithium | 11014 | |
| shroom | 7332 | |
| kanna | 7227 | |
| valium | 5485 | |
| peyote | 5356 | |
| promethazine | 4550 | |
| benadryl | 4227 | |
| khat | 4087 | |
| kava | 3911 | |
| methadone | 3588 | |
| ghb | 3140 | |
| tramadol | 2939 | |
| acetone | 2721 | |
| sizzurp | 2708 | |
| clonazepam | 2395 | |
| psilocybin | 2392 | |
| ayahuasca | 2318 | |
| diazepam | 2217 | |
| oxycodone | 1801 | |
| vicodin | 1656 | |
| kratom | 1639 | |
| hydrocodone | 1513 | |
| pregabalin | 1500 | |
| naloxone | 1326 | |
| fentanyl | 1317 | |
| ritalin | 1294 | |
| paracet | 1217 | |
| nitrous oxide | 1206 | |
| percocet | 1145 | |
| modafinil | 1133 | |
| klonopin | 931 | |
| lorazepam | 814 | |
| cocodamol | 800 | |
| alprazolam | 640 | |
| dxm | 594 | |
| codis | 571 | |
| kapake | 555 | |
| suboxone | 542 | |
| oxandrolone | 540 | |
| dabiq | 532 | |
| midazolam | 490 | |
| dextromethorphan | 463 | |
| oxycontin | 461 | |
| diphenhydramine | 397 | |
| gabapentin | 383 | |
| neurofen | 374 | |
| bromazepam | 360 | |
| salvia divinorum | 325 | |
| feminax | 323 | |
| buprenorphine | 295 | |
| zolpidem | 276 | |
| datura | 244 | |
| mephedrone | 236 | |
| naltrexone | 209 | |
| baclofen | 201 | |
| zopiclone | 201 | |
| iboga | 189 | |
| temazepam | 178 | |
| trazodone | 178 | |
| hydromorphone | 174 | |
| methylphenidate | 149 | |
| loperamide | 122 | |
| solpadeine | 119 | |
| subutex | 110 | |
| solpadol | 90 | |
| mdai | 90 | |
| nandrolone | 87 | |
| dihydrocodeine | 86 | |
| migraleve | 86 | |
| panadeine | 82 | |
| ascodan | 78 | |
| etizolam | 75 | |
| ethylphenidate | 64 | |
| nitrazepam | 62 | |
| syndol | 56 | |
| zapain | 52 | |
| paramol | 51 | |
| etizolam | 47 | |
| phenibut | 46 | |
| librium | 43 | |
| algidol | 35 | |
| gogaine | 33 | |
| woodrose | 28 | |
| codydramol | 26 | |
| clonazolam | 25 | |
| flunitrazepam | 23 | |
| methoxphenidine | 23 | |
| flurazepam | 21 | |
| veganin | 19 | |
| fubinaca | 19 | |
| methiopropamine | 18 | |
| pinaca | 17 | |
| boldenone | 16 | |
| 1p-lsd | 16 | |
| synthacaine | 15 | |
| acamprosate | 13 | |
| diphenidine | 8 | |
| flubromazolam | 8 | |
| paracodol | 7 | |
| acetylfentanyl | 7 | |
| natterman | 6 | |
| pyrazolam | 6 | |
| methoxetamine | 5 | |
| nitracaine | 5 | |
| clorazepate | 4 | |
| chminaca | 4 | |
| nalmefene | 3 | |
| isopropylphenidate | 3 | |
| paderyl | 2 | |
| phenazepam | 2 | |
| codipar | 1 | |
| flubromazolam | 1 | |
| remedeine | 1 | |
| sedaspir | 1 | |
| chmica | 1 | |
| aceffein | 0 | |
| cocodaprin | 0 | |
| copralgir | 0 | |
| coproxamol | 0 | |
| dypracet | 0 | |
| kodamid | 0 | |
| kodimagnyl | 0 | |
| maxilief | 0 | |
| medocodene | 0 | |
| novacetol | 0 | |
| paracofdal | 0 | |
| parcoten | 0 | |
| zolpiden | 0 | |
| 2c-tfm | 0 | |
| 4-eec | 0 | |
| 4metmp | 0 | |
| 5-bpdi | 0 | |
| db-mdbp | 0 | |
| deschloroketamine | 0 | |
| ethylethcathinone | 0 | |
| methylnaphthidate | 0 | |
| nm2ai | 0 | |
| ocfentanil | 0 | |
| propylphenidate | 0 |
