Fixed issue with scaling of the layers.

Author: phamvanvung

javascripts/main.js

@@ -12,7 +12,7 @@ let fileList = ["WikiNews", "Huffington", "CrooksAndLiars", "EmptyWheel","Esquir
 let initialDataset = "EmptyWheel";
 let categories = ["person","location","organization","miscellaneous"];
 
-let fileName;
+var fileName;
 
 
 addDatasetsOptions();
@@ -81,7 +81,7 @@ function loadNewData(event) {
 function draw(data){
     //Layout data
     let font = "Arial";
-    let interpolation = "cardinal";
+    let interpolation = "linear";
     let axisPadding = 10;
     let margins = {left: 20, top: 20, right: 10, bottom: 30};
     let ws = d3.layout.wordStream()

lib/d3.layout.wordstream.js

@@ -11,12 +11,12 @@ d3.layout.wordStream = function(){
         frequencyScale = d3.scale.linear(),
         spiral = achemedeanSpiral,
         canvas = cloudCanvas,
-        interpolation = "cardinal";
+        interpolation = "linear";
     let wordStream = {};
-    
+
     let cloudRadians = Math.PI / 180,
-    cw = 1 << 11,
-    ch = 1 << 11;
+        cw = 1 << 11,
+        ch = 1 << 11;
 
     wordStream.boxes = function(){
         let boxWidth = size[0]/data.length;
@@ -47,10 +47,10 @@ d3.layout.wordStream = function(){
         }
         return boxes;
     };
-    
+
     //#region helper functions
     function buildFontScale(data){
-        
+
         let topics = d3.keys(data[0].words);
         //#region scale for the font size.
         let maxFrequency = 0;
@@ -80,9 +80,7 @@ d3.layout.wordStream = function(){
             });
             if(total > max) max = total;
         });
-        frequencyScale = d3.scale.linear()
-        .domain([0, max])
-        .range([0, size[1]]);
+        frequencyScale.domain([0, max]).range([0, size[1]]);
     }
     //Convert from data to box
     function buildBoxes(data){
@@ -98,23 +96,17 @@ d3.layout.wordStream = function(){
         topics.forEach(topic=>{
             let dataPerTopic = [];
             //Push the first point
-            dataPerTopic.push({x: 0, y:totalFrequencies[0][topic]});
+            dataPerTopic.push({x: 0, y:frequencyScale(totalFrequencies[0][topic])});
             totalFrequencies.forEach((frq, i) =>{
-                dataPerTopic.push({x: (i*boxWidth) + (boxWidth>>1), y: frq[topic]});
+                dataPerTopic.push({x: (i*boxWidth) + (boxWidth>>1), y: frequencyScale(frq[topic])});
             });
             //Push the last point
-            dataPerTopic.push({x: size[0], y:totalFrequencies[totalFrequencies.length-1][topic]});
+            dataPerTopic.push({x: size[0], y:frequencyScale(totalFrequencies[totalFrequencies.length-1][topic])});//TODO:
             allPoints.push(dataPerTopic);
         });
-        let layers = d3.layout.stack().offset('wiggle')(allPoints);
-        //Process the scale of each box here.
-        layers.forEach(layer=>{
-            layer.forEach(point=>{
-                point.y0 = frequencyScale(point.y0);
-                point.y = frequencyScale(point.y);
-            });
-        });
-        let innerBoxes = {};
+        var layers = d3.layout.stack().offset('silhouette')(allPoints);
+
+        var innerBoxes = {};
         topics.forEach((topic, i)=>{
             innerBoxes[topic] = [];
             for(let j = 1; j< layers[i].length-1; j++){
@@ -140,7 +132,7 @@ d3.layout.wordStream = function(){
             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)),
-            s = spiral([board.boxWidth, board.boxHeight]), 
+            s = spiral([board.boxWidth, board.boxHeight]),
             dt = Math.random() < .5 ? 1 : -1,
             t = -dt,
             dxdy, dx, dy;
@@ -180,21 +172,21 @@ d3.layout.wordStream = function(){
 
                 let bsi = (j+word.y+word.y0)*bw + i+(word.x + word.x0);//board sprite index
                 let boardPixel = board.sprite[bsi];
-                
+
                 if(boardPixel!=0 && wordPixel!=0){
                     return true;
                 }
             }
-        } 
+        }
         return false;
     }
     function placeWordToBoard(word, board){
         //Add the sprite
         let y0 = word.y + word.y0,
-        x0 = word.x + word.x0,
-        bw = board.width,
-        ww = word.width,
-        wh = word.height;
+            x0 = word.x + word.x0,
+            bw = board.width,
+            ww = word.width,
+            wh = word.height;
         for(let j=0; j< wh; j++){
             for(let i = 0; i< ww; i++){
                 let wsi = j*ww + i;
@@ -206,7 +198,7 @@ d3.layout.wordStream = function(){
 
     function buildSvg(boxes, topic){
         streamPath1 = Array(),
-        streamPath2 = Array();
+            streamPath2 = Array();
         let width = size[0],
             height = size[1];
         let svg = d3.select(document.createElement('svg')).attr({
@@ -215,38 +207,38 @@ d3.layout.wordStream = function(){
         });
         let graphGroup = svg.append('g');
         let n = boxes.length;
-        
+
         let catIndex = boxes.topics.indexOf(topic);
-        
+
         let area1 = d3.svg.area()
-        .interpolate(interpolation)
-        .x(function(d){return d.x; })
-        .y0(0)
-        .y1(function(d){return d.y0; });
-        
+            .interpolate(interpolation)
+            .x(function(d){return d.x; })
+            .y0(0)
+            .y1(function(d){return d.y0; });
+
 
         let area2 = d3.svg.area()
-        .interpolate('cardinal')
-        .x(function(d){return d.x; })
-        .y0(function(d){return (d.y + d.y0); })
-        .y1(height);
+            .interpolate(interpolation)
+            .x(function(d){return d.x; })
+            .y0(function(d){return (d.y + d.y0); })
+            .y1(height);
 
         graphGroup.append('path').datum(boxes.layers[catIndex])
-        .attr({
-            d: area1,
-            stroke: 'red',
-            'stroke-width': 2,
-            fill :'red',
-            id: 'path1'
-        });
+            .attr({
+                d: area1,
+                stroke: 'red',
+                'stroke-width': 2,
+                fill :'red',
+                id: 'path1'
+            });
         graphGroup.append('path').datum(boxes.layers[catIndex])
-        .attr({
-            d: area2,
-            stroke: 'red',
-            'stroke-width': 2,
-            fill :'red',
-            id: 'path2'
-        });
+            .attr({
+                d: area2,
+                stroke: 'red',
+                'stroke-width': 2,
+                fill :'red',
+                id: 'path2'
+            });
         return svg;
     }
     function buildCanvas(boxes, topic){
@@ -313,32 +305,32 @@ d3.layout.wordStream = function(){
                     d.fontSize = ~~fontScale(d.frequency);
                     d.rotate = (~~(Math.random() * 6) - 3) * rotateCorner;
                     c.font = ~~(d.fontSize + 1) + "px " + font;
-                    
+
                     let w = ~~(c.measureText(d.text).width),
                         h = d.fontSize;
                     if (d.rotate) {
-                      let sr = Math.sin(d.rotate * cloudRadians),
-                          cr = Math.cos(d.rotate * cloudRadians),
-                          wcr = w * cr,
-                          wsr = w * sr,
-                          hcr = h * cr,
-                          hsr = h * sr;
-                      w = ~~Math.max(Math.abs(wcr + hsr), Math.abs(wcr - hsr));
-                      h = ~~Math.max(Math.abs(wsr + hcr), Math.abs(wsr - hcr));
-                    } 
+                        let sr = Math.sin(d.rotate * cloudRadians),
+                            cr = Math.cos(d.rotate * cloudRadians),
+                            wcr = w * cr,
+                            wsr = w * sr,
+                            hcr = h * cr,
+                            hsr = h * sr;
+                        w = ~~Math.max(Math.abs(wcr + hsr), Math.abs(wcr - hsr));
+                        h = ~~Math.max(Math.abs(wsr + hcr), Math.abs(wsr - hcr));
+                    }
                     if (h > maxh) maxh = h;
                     if (x + w >= cw) {
-                      x = 0;
-                      y += maxh;
-                      maxh = 0;
+                        x = 0;
+                        y += maxh;
+                        maxh = 0;
                     }
                     if (y + h >= ch) break;
                     c.translate((x + (w >> 1)) , (y + (h >> 1)));
                     if (d.rotate) c.rotate(d.rotate * cloudRadians);
                     c.fillText(d.text, 0, 0);
                     if (d.padding) c.lineWidth = 2 * d.padding, c.strokeText(d.text, 0, 0);
                     c.restore();
-                    
+
                     d.width = w;
                     d.height = h;
                     d.x = x;
@@ -350,7 +342,7 @@ d3.layout.wordStream = function(){
                     d.timeStep = i;
                     d.streamHeight = frequencyScale(d.frequency);
                     x += w;
-                }     
+                }
             });
         }
         for(let bc = 0; bc < data.length; bc++){
@@ -365,13 +357,13 @@ d3.layout.wordStream = function(){
                         h = d.height,
                         x = d.x,
                         y = d.y;
-                    
-                        let pixels = c.getImageData(d.x, d.y, d.width, d.height).data;
-                        d.sprite = Array();
-                        for(let i = 0; i<<2 < pixels.length; i++){
-                            d.sprite.push(pixels[i<<2]);
-                        }
-                } 
+
+                    let pixels = c.getImageData(d.x, d.y, d.width, d.height).data;
+                    d.sprite = Array();
+                    for(let i = 0; i<<2 < pixels.length; i++){
+                        d.sprite.push(pixels[i<<2]);
+                    }
+                }
             });
         }
         //Only return this to test if needed
@@ -403,9 +395,9 @@ d3.layout.wordStream = function(){
     };
     function rectangularSpiral(size){
         let dy = 4,
-        dx = dy *size[0]/size[1],
-        x = 0,
-        y = 0;
+            dx = dy *size[0]/size[1],
+            x = 0,
+            y = 0;
         return function(t){
             let sign = t < 0 ? -1 : 1;
             switch((Math.sqrt(1 + 4*sign*t) - sign) & 3){

test/buildboard.html

@@ -10,34 +10,34 @@
 </head>
 <body>
     <script>
-        var url = "../data/emptywheel.csv";
-        var topics = [];
-        d3.csv(url, function(error, rawData) {
+        var fileName = "../data/VIS_papers.tsv";
+        categories = categories = ["Vis","VAST","InfoVis","SciVis"];
+        var topics = categories;
+        d3.tsv(fileName, 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');
-            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; 
+            //Filter
+            var startYear = 2011;
+            var endYear = 2016;
+            if(fileName.indexOf("PopCha")>=0 || fileName.indexOf("Cards_Fries")>=0 || fileName.indexOf("Cards_PC")>=0){
+                startYear = 2007;
+                endYear = 2013;
+            }
+            rawData = rawData.filter(d=>{
+                return d.Year >= startYear && d.Year <= endYear;
             });
-            var data = {};
+            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 year = +d["Year"];
+                var topic = d["Conference"];
+                if(!data[year]) data[year] = {};
+                data[year][topic] = (data[year][topic]) ? ((data[year][topic])+";" + d["Author Names"]): (d["Author Names"]);
             });
-            var data = d3.keys(data).map(function(date, i){
+            var data = d3.keys(data).map(function(year, i){
                 var words = {};
                 topics.forEach(topic => {
                     var raw = {};
-                    raw[topic] = data[date][topic].split('|');
+                    if(!data[year][topic]) data[year][topic] = "";
+                    raw[topic] = data[year][topic].split(";");
                     //Count word frequencies
                     var counts = raw[topic].reduce(function(obj, word){
                         if(!obj[word]){
@@ -56,14 +56,14 @@
                     }).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, 15);
+                        .slice(0, 45);
                 });
                 return {
-                    date: date,
+                    date: year,
                     words: words
                 }
             }).sort(function(a, b){//sort by date
-                return outputFormat.parse(a.date) - outputFormat.parse(b.date);
+                return a.date - b.date;
             });
             draw(data);
         });