Bug fixes + Color by Topic

Fix bugs about floating width/height/size => to remove errors.
Color the Terms by its topic
(data proccessed is ready for the next display as multiple stream
layers instead of one stream)

Author: phamvanvung

d3.layout.wordstream.js

@@ -19,7 +19,46 @@ d3.layout.wordStream = function(){
     cw = 1 << 11,
     ch = 1 << 11;
     wordStream.boxes = function(){
-        //#region sacle for the font size.
+        var boxes = buildBoxes(data);
+        //Can remove data since we've got the boxes.
+        delete data;
+        //Get the sprite for each word
+        getImageData(boxes);
+        //#endregion boxes information
+        //Place
+        var board = buildBoard(boxes);
+        for(var bc = 0; bc < boxes.length; bc++){
+            var box = boxes[bc];
+            var words = box.words;
+            var n = words.length;
+            board.boxWidth = box.width;
+            board.boxHeight = box.height;
+            board.boxX = box.x;
+            board.boxY = box.y;
+            for(var i = 0; i < n; i++){
+                place(words[i], board);
+            }
+        }
+        
+        //return board;
+        delete board.sprite;
+        return boxes;
+    };
+    
+    //#region helper functions
+    //Convert from data to box
+    function buildBoxes(data){
+        var start = new Date().getTime();
+        //Combine terms from each topic
+        d3.map(data, function(row){
+            var words = [];
+            d3.keys(row.words).map(function(topic){
+                words = words.concat(row.words[topic]);
+            });
+            row.words = words;
+        });
+        
+        //#region scale for the font size.
         var maxFrequency = 0;
         var minFrequency = Number.MAX_SAFE_INTEGER;
         d3.map(data, function(d){
@@ -45,49 +84,28 @@ d3.layout.wordStream = function(){
         d3.map(data, function(d, i){
             boxes.push({
                 width: boxWidth, 
-                height: frequencyScale(totalFrequencies[i]),
+                height: ~~frequencyScale(totalFrequencies[i]),
                 x: boxWidth * i,
                 y: (size[1] - frequencyScale(totalFrequencies[i]))/2,
                 words: d.words
             });
         });
-        
-        //Get the sprite for each word
-        getImageData(boxes);
-        //#endregion boxes information
-        //Place
-        var board = buildBoard(boxes);
-        for(var bc = 0; bc < boxes.length; bc++){
-            var box = boxes[bc];
-            var words = box.words;
-            var n = words.length;
-            board.boxWidth = box.width;
-            board.boxHeight = box.height;
-            board.boxX = box.x;
-            board.boxY = box.y;
-            for(var i = 0; i < n; i++){
-                place(words[i], board);
-            }
-        }
-        //return board;
-        delete board.sprite;
         return boxes;
-    };
-    
-    //#region helper functions
+    }
     function place(word, board){
         var bw = board.width,
             bh = board.height,
             maxDelta = ~~Math.sqrt((board.boxWidth*board.boxWidth) + (board.boxHeight*board.boxHeight)),
-            startX =  board.boxX + (board.boxWidth*( Math.random() + .5) >> 1),
-            startY =  board.boxY + (board.boxHeight*( Math.random() + .5) >> 1),
+            startX =  ~~(board.boxX + (board.boxWidth*( Math.random() + .5) >> 1)),
+            startY =  ~~(board.boxY + (board.boxHeight*( Math.random() + .5) >> 1)),
             s = spiral([board.boxWidth, board.boxHeight]), 
             dt = Math.random() < .5 ? 1 : -1,
             t = -dt,
             dxdy, dx, dy;
         word.x = startX;
         word.y = startY;
         word.placed = false;
+        var counter = 0;
         while (dxdy = s(t += dt)) {
             dx = ~~dxdy[0];
             dy = ~~dxdy[1];
@@ -100,9 +118,9 @@ d3.layout.wordStream = function(){
 
             if (word.x + word.x0 < 0 || word.y + word.y0 < 0 || word.x + word.x1 > size[0] || word.y + word.y1 > size[1])
                 continue;
-                
             if(!cloudCollide(word, board)){
                 placeWordToBoard(word, board);
+                counter++
                 word.placed = true;
                 delete word.sprite;
                 break;
@@ -270,7 +288,7 @@ d3.layout.wordStream = function(){
                 d = words[di];
 
                 c.save();
-                d.fontSize = fontScale(d.frequency);
+                d.fontSize = ~~fontScale(d.frequency);
                 d.rotate = (~~(Math.random() * 6) - 3) * 30;
                 c.font = ~~(d.fontSize + 1) + "px " + font;
 
@@ -380,6 +398,7 @@ d3.layout.wordStream = function(){
     wordStream.buildCanvas = buildCanvas;
     wordStream.buildBoard = buildBoard;
     wordStream.placeWordToBoard = placeWordToBoard;
+    wordStream.buildBoxes = buildBoxes;
     //#endregion
     //Exporting the functions to set configuration data
     //#region setter/getter functions

test/emptywheel.csv

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>WordStream</title>
+    <script src="../d3.min.js"></script>
+    <script src="../d3.layout.wordstream.js"></script>
+    <script src="./testutil.js"></script>
+</head>
+<body>
+    <script>
+        var url = "./emptywheel.csv";
+        d3.csv(url, function(error, rawData) {
+            if (error) throw error;
+            var inputFormat = d3.time.format('%Y-%m-%dT%H:%M:%S');
+            var outputFormat = d3.time.format('%b %Y');
+            var topics = d3.keys(rawData[0]).slice(2, 6);
+            //Filter and take only dates in 2013
+            rawData = rawData.filter(function(d){
+                var time = inputFormat.parse(d.time);
+                var starDate =  inputFormat.parse('2013-01-01T00:00:00');
+                var endDate = inputFormat.parse('2014-01-01T00:00:00');
+                return time  >= starDate && time < endDate; 
+            });
+            
+            var data = {};
+            d3.map(rawData, function(d, i){
+                var date = inputFormat.parse(d.time);
+                var date = outputFormat(date);
+                topics.forEach(topic => {
+                    if(!data[date]) data[date] = {};
+                    data[date][topic] += data[date][topic] ? ('|' +d[topic]): (d[topic]); 
+                });
+            });
+            var data = d3.keys(data).map(function(date, i){
+                var words = {};
+                topics.forEach(topic => {
+                    var raw = {};
+                    raw[topic] = data[date][topic].split('|');
+                    //Count word frequencies
+                    var counts = raw[topic].reduce(function(obj, word){
+                        if(!obj[word]){
+                            obj[word] = 0;
+                        }
+                        obj[word]++;
+                        return obj;
+                    }, {});
+                    //Convert to array of objects
+                    words[topic] = d3.keys(counts).map(function(d){
+                        return{
+                            text: d,
+                            frequency: counts[d],
+                            topic: topic
+                        }
+                    }).sort(function(a, b){//sort the terms by frequency
+                        return b.frequency-a.frequency;
+                    }).filter(function(d){return d.text; })//filter out empty words
+                    .slice(0, 5);
+                });
+                return {
+                    date: date,
+                    words: words
+                }
+            }).sort(function(a, b){//sort by date
+                return outputFormat.parse(a.date) - outputFormat.parse(b.date);
+            });
+            draw(data);
+        });
+        function draw(data){
+            var ws = d3.layout.wordStream()
+            .data(data);
+            
+            var board = ws.boxes();
+            
+            var cw = 1 << 11,
+            ch = 1 << 11;
+            var canvas = d3.select('body').append("canvas").attr({
+                width: cw,
+                height: ch,
+            }).style('border', '1px solid black');
+            var c = canvas[0][0].getContext("2d");
+            spriteToScreen(c, board);
+        };
+    </script>
+</body>
+</html>

test/finalboard.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>WordStream</title>
+    <script src="../d3.min.js"></script>
+    <script src="../d3.layout.wordstream.js"></script>
+</head>
+<body>
+    <script>
+        var url = "./emptywheel.csv";
+        d3.csv(url, function(error, rawData) {
+            if (error) throw error;
+            var inputFormat = d3.time.format('%Y-%m-%dT%H:%M:%S');
+            var outputFormat = d3.time.format('%b %Y');
+            var topics = d3.keys(rawData[0]).slice(2, 6);
+            //Filter and take only dates in 2013
+            rawData = rawData.filter(function(d){
+                var time = inputFormat.parse(d.time);
+                var starDate =  inputFormat.parse('2013-01-01T00:00:00');
+                var endDate = inputFormat.parse('2014-01-01T00:00:00');
+                return time  >= starDate && time < endDate; 
+            });
+            
+            var data = {};
+            d3.map(rawData, function(d, i){
+                var date = inputFormat.parse(d.time);
+                var date = outputFormat(date);
+                topics.forEach(topic => {
+                    if(!data[date]) data[date] = {};
+                    data[date][topic] += data[date][topic] ? ('|' +d[topic]): (d[topic]); 
+                });
+            });
+            var data = d3.keys(data).map(function(date, i){
+                var words = {};
+                topics.forEach(topic => {
+                    var raw = {};
+                    raw[topic] = data[date][topic].split('|');
+                    //Count word frequencies
+                    var counts = raw[topic].reduce(function(obj, word){
+                        if(!obj[word]){
+                            obj[word] = 0;
+                        }
+                        obj[word]++;
+                        return obj;
+                    }, {});
+                    //Convert to array of objects
+                    words[topic] = d3.keys(counts).map(function(d){
+                        return{
+                            text: d,
+                            frequency: counts[d],
+                            topic: topic
+                        }
+                    }).sort(function(a, b){//sort the terms by frequency
+                        return b.frequency-a.frequency;
+                    }).filter(function(d){return d.text; })//filter out empty words
+                    .slice(0, 5);
+                });
+                return {
+                    date: date,
+                    words: words
+                }
+            }).sort(function(a, b){//sort by date
+                return outputFormat.parse(a.date) - outputFormat.parse(b.date);
+            });
+            draw(data);
+        });
+        function draw(data){
+            var ws = d3.layout.wordStream()
+            .data(data)
+            .minFontSize(6)
+            .maxFontSize(24);
+            //var boxes = ws.boxes();
+            var cw = 1 << 11,
+            ch = 1 << 11;
+            var canvas = d3.select('body').append("canvas").attr({
+                width: cw,
+                height: ch,
+            }).style('border', '1px solid black');
+            var c = canvas[0][0].getContext("2d");
+            var boxes = ws.buildBoxes(data);
+            var imageData = ws.getImageData(boxes);
+            c.putImageData(imageData, 0, 0);
+            //Draw the boxes to see the x and y and width, height coordinate is right or not
+            for(var bc =0; bc< boxes.length; bc++){
+                var words = boxes[bc].words;
+                for(var i =0; i< words.length; i++){
+                    var word = words[i];
+                    c.rect(word.x, word.y, word.width, word.height);
+                }
+            }
+            c.stroke();
+        };
+    </script>
+</body>
+</html>

test/sprite.html

@@ -0,0 +1,30 @@
+function spriteToScreen(c, word){
+    var imageData = c.getImageData(word.x, word.y, word.width, word.height);
+    for(var i=0; i<<2 < imageData.data.length; i++){
+        if(word.sprite[i]!=0){
+            imageData.data[i<<2] = word.sprite[i];
+            imageData.data[(i<<2)+1] = 0;
+            imageData.data[(i<<2)+2] = 0;
+            //Set alpha to 1
+            imageData.data[(i<<2)+3] = 255;
+        }
+    }
+    c.putImageData(imageData, word.x, word.y);
+}
+function buildSprite(width, height){
+    var canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    var c = canvas.getContext("2d");
+    c.fillStyle = 'red';
+    c.fillRect(0, 0, width, height);
+    var pixels = c.getImageData(0, 0, width, height).data;
+    var sprite = [];
+    for(var i =0; i < width*height; i++){
+        sprite[i] = 0;
+    }
+    for(var i = 0; i< width*height; i++){
+        sprite[i] = pixels[i<<2];
+    }
+    return sprite;
+}