Add wordCloud in front page

R/laboWordCloud.R

@@ -0,0 +1,76 @@
+################################################
+## Integrative Ecology Lab wordCloud
+##
+## first version: October, 14 2017
+## last modification: October, 14 2017
+## Willian Vieira
+##
+## R version 3.4.0 (2017-04-21)
+## Platform: x86_64-apple-darwin15.6.0
+## Running under: OS X 10.12.5 (Sierra)
+################################################
+
+library(bibtex)
+library(tm)
+library(wordcloud2)
+library(extrafont)
+library(grDevices)
+library(htmlwidgets)
+
+# data
+  refs <- read.bib(file = "_bibliography/labo.bib")
+
+# keywords
+  keyw <- lapply(refs, function(x) tolower(as.character(x[1]$keywords))) # select keywords and transfor low case
+
+  keyList <- as.list("NA")
+  for(i in 1: length(refs)) {
+    keyList[[i]] <- strsplit(keyw[[i]], split = ",") # split keywords
+  }
+
+  keyw <- unlist(keyList)
+  keyw <- stringr::str_replace_all(keyw, "[^a-zA-Z0-9\\s]", "") #remove everything is not a number or letter
+
+# title
+  title <- tolower(as.character(refs$title))
+  title <- unlist(strsplit(title, split = " "))
+  title <- stringr::str_replace_all(title, "[^a-zA-Z0-9\\s]", "") #remove everything is not a number or letter
+  # stop words
+  stopWords <- stopwords(kind = "en")
+  title <- title[! title %in% stopWords]
+
+# abstract
+  abst <- tolower(as.character(refs$abstract))
+  abst <- unlist(strsplit(abst, split = " "))
+  abst <- stringr::str_replace_all(abst, "[^a-zA-Z0-9\\s]", "") #remove everything is not a number or letter
+  # stop words
+  abst <- abst[! abst %in% stopWords]
+
+# merging title and keywords
+  titleKeyw <- table(c(title, keyw))
+  titleKeyw <- titleKeyw[which(titleKeyw > 3)]
+
+  # color
+col1 <- c(rgb(159, 33, 31, maxColorValue = 255), # style 1
+          rgb(226, 133, 72, maxColorValue = 255),
+          rgb(79, 92, 70, maxColorValue = 255))
+col2 <- c(rgb(159, 33, 31, maxColorValue = 255), # style 2
+          rgb(79, 92, 70, maxColorValue = 255),
+          rgb(231, 187, 42, maxColorValue = 255))
+
+colFunc <- colorRampPalette(col2)
+
+my_graph <-
+wordcloud2(rev(sort(titleKeyw)),
+                       fontFamily = "Fira Sans",
+                       color = colFunc(nrow(titleKeyw)),
+                       size = 0.55,
+                       gridSize = 1,
+                       backgroundColor = rgb(255, 255, 255, maxColorValue = 255),
+                       rotateRatio = 0,
+                       ellipticity = 0.3
+)
+
+# export
+  # html
+saveWidget(my_graph, "keyword_cloud.html", selfcontained = F)

_includes/head.html

@@ -6,13 +6,20 @@
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
   <meta name="author" content="IELab">
   <meta name="keywords" content="{% if page.tags %}{{ page.tags | join: ', ' | escape }}{% else %}{{ site.keys | join: ', ' | escape }}{% endif %}">
-  
+
   <link rel="stylesheet" href="/css/foundation.css"/>
   <link rel="stylesheet" href="/css/foundation-icons.css" />
   <!-- This is how you would link your custom stylesheet -->
   <link rel="stylesheet" href="/css/app.css"/>
 
 
   <script src="/js/vendor/modernizr.js"></script>
+  <script src="/js/htmlwidgets.js"></script>
+  <link href="/css/wordcloud.css" rel="stylesheet" />
+  <script src="/js/wordcloud2-all.js"></script>
+  <script src="/js/hover.js"></script>
+  <script src="/js/wordcloud2.js"></script>
+
+
 
 </head>

_includes/keyword_cloud.html

@@ -0,0 +1,10 @@
+
+<div class="row">
+    <div class="large-12 columns" style="height: 300px; width: 100%;">
+        <div id="htmlwidget_container">
+          <div id="htmlwidget-c7b3dfeee56ccc955a30" style="width:960px;height:300px;" class="wordcloud2 html-widget"></div>
+        </div>
+  </div>
+</div>
+
+<script type="application/json" data-for="htmlwidget-c7b3dfeee56ccc955a30">{"x":{"word":["species","models","interactions","dynamics","ecosystem","diversity","biodiversity","networks","food","trait","structure","niche","metacommunity","functioning","food web","ecology","ecological","dispersal","biogeography","effect","connectance","community","coexistence","webs","tree","theory","neutral","model","metaecosystems","interaction","forest","evolution","distribution","biotic","using","trophic","spatial","size","relationships","relationship","range","northern hardwoods","niche model","metaweb","metaecosystem","growth","food webs","ecosystems","ecological networks","complex","climate change","canada","biological","assembly","acer",""],"freq":[21,12,11,11,10,9,9,8,8,7,7,7,7,7,7,7,7,7,7,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4],"fontFamily":"Fira Sans","fontWeight":"bold","color":["#9F211F","#9C2320","#992521","#962723","#932924","#902B26","#8D2D27","#8A3028","#87322A","#84342B","#81362D","#7F382E","#7C3A30","#793C31","#763F32","#734134","#704335","#6D4537","#6A4738","#674939","#644B3B","#614E3C","#5F503E","#5C523F","#595441","#565642","#535843","#505A45","#515D45","#576144","#5C6443","#626842","#676B41","#6D6E40","#72723F","#78753E","#7D793D","#837C3C","#89803B","#8E833A","#948739","#998A38","#9F8E37","#A49136","#AA9435","#AF9834","#B59B33","#BA9F32","#C0A231","#C5A630","#CBA92F","#D0AD2E","#D6B02D","#DBB42C","#E1B72B","#E7BB2A"],"minSize":0,"weightFactor":4.71428571428572,"backgroundColor":"#FFFFFF","gridSize":1,"minRotation":-0.785398163397448,"maxRotation":0.785398163397448,"shuffle":true,"rotateRatio":0,"shape":"circle","ellipticity":0.3,"figBase64":null,"hover":null},"evals":[],"jsHooks":[]}</script>

css/app.css

@@ -50,6 +50,7 @@ body {
     height: 100% !important;
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
+    overflow: auto !important;
 }
 
 ol {

css/wordcloud.css

@@ -0,0 +1,19 @@
+
+#wcLabel {
+  position: absolute;
+  border: 2px solid #fff;
+  box-shadow: 0 0 4px 0 #008;
+  padding: 2px;
+  /*margin: -4px 0 0 -4px;*/
+  pointer-events: none; }
+
+#wcSpan {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  color: #333;
+  margin-top: 6px;
+  padding: 0 0.5em;
+  border-radius: 0.5em;
+  white-space: nowrap; }

home.md

@@ -26,11 +26,6 @@ weight: 1
   </div>
 </div>
 
-
-<div class="row">
-<div class="large-12 columns">
-    <img src="/assets/img/sarracenie.jpg" alt="pitcher"/>
-</div>
-</div>
+{% include keyword_cloud.html %}
 
 {% include network.html %}

js/hover.js

@@ -0,0 +1,167 @@
+// create element
+function newlabel(el){
+  var newDiv = document.createElement("div");
+  var newSpan = document.createElement("span");
+  newDiv.id = 'wcLabel'
+  newSpan.id = "wcSpan"
+  el.appendChild(newDiv);
+  document.getElementById("wcLabel").appendChild(newSpan)
+}
+
+// hover function
+function cv_handleHover(item,
+                                                           dimension, evt) {
+  var el = document.getElementById("wcLabel");
+  if (!item) {
+    el.setAttribute('hidden', true);
+
+    return;
+  }
+
+  el.removeAttribute('hidden');
+  // console.log(evt.srcElement.offsetLeft);
+
+  el.style.left = dimension.x + evt.srcElement.offsetLeft + 'px';
+  el.style.top = dimension.y + evt.srcElement.offsetTop + 'px';
+  el.style.width = dimension.w + 'px';
+  el.style.height = dimension.h + 'px';
+
+  this.hoverDimension = dimension;
+
+  document.getElementById("wcSpan").setAttribute(
+    'data-l10n-args', JSON.stringify({ word: item[0], count: item[1] }));
+  document.getElementById("wcSpan").innerHTML =item[0]+":" + item[1];
+
+};
+
+//mask function
+function maskInit(el,x){
+  str = x.figBase64;
+  var newImg = document.createElement("img");
+  newImg.src = str;
+  newImg.style.position = 'absolute';
+  newImg.style.left = 0;
+  // console.log(el.clientHeight);
+  newImg.width = el.clientWidth;
+  newImg.height = el.clientHeight;
+  // maskCanvas = init(el, x, newImg);
+
+  vvalue = 128
+
+
+  maskCanvas = null;
+  // var img = new Image();
+  // img.src = x.figBase64;
+
+
+
+    maskCanvas = document.createElement('canvas');
+    maskCanvas.width = newImg.width;
+    maskCanvas.height = newImg.height;
+
+    var ctx = maskCanvas.getContext('2d');
+    ctx.drawImage(newImg, 0, 0, newImg.width, newImg.height);
+
+    var imageData = ctx.getImageData(
+      0, 0, maskCanvas.width, maskCanvas.height);
+    var newImageData = ctx.createImageData(imageData);
+
+    // M = 0
+    for (var i = 0; i < imageData.data.length; i += 4) {
+
+      var tone = imageData.data[i] +
+        imageData.data[i + 1] +
+        imageData.data[i + 2];
+      var alpha = imageData.data[i + 3];
+
+      if (alpha < vvalue || tone > vvalue * 3) {
+        // Area not to draw
+        newImageData.data[i] =
+          newImageData.data[i + 1] =
+          newImageData.data[i + 2] = 255;
+        newImageData.data[i + 3] = 0;
+      } else {
+        // Area to draw
+        newImageData.data[i] =
+          newImageData.data[i + 1] =
+          newImageData.data[i + 2] = 0;
+        newImageData.data[i + 3] = 255;
+      }
+
+    }
+
+    ctx.putImageData(newImageData, 0, 0);
+
+  mask(el, x, maskCanvas);
+
+}
+
+
+
+function mask(el,x,maskCanvas){
+  // options.clearCanvas = false;
+
+  /* Determine bgPixel by creating
+     another canvas and fill the specified background color. */
+  var bctx = document.createElement('canvas').getContext('2d');
+
+  bctx.fillStyle = x.backgroundColor || '#fff';
+  bctx.fillRect(0, 0, 1, 1);
+  var bgPixel = bctx.getImageData(0, 0, 1, 1).data;
+  // console.log(bgPixel)
+  var maskCanvasScaled =
+    document.createElement('canvas');
+
+  maskCanvasScaled.width = el.clientWidth;
+  maskCanvasScaled.height = el.clientHeight;
+  var ctx = maskCanvasScaled.getContext('2d');
+  console.log(maskCanvasScaled)
+  ctx.drawImage(maskCanvas,
+    0, 0, maskCanvas.width, maskCanvas.height,
+    0, 0, maskCanvasScaled.width, maskCanvasScaled.height);
+
+  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+  var newImageData = ctx.createImageData(imageData);
+  for (var i = 0; i < imageData.data.length; i += 4) {
+    if (imageData.data[i + 3] > vvalue) {
+      newImageData.data[i] = bgPixel[0];
+      newImageData.data[i + 1] = bgPixel[1];
+      newImageData.data[i + 2] = bgPixel[2];
+      newImageData.data[i + 3] = bgPixel[3];
+    } else {
+      // This color must not be the same w/ the bgPixel.
+      newImageData.data[i] = bgPixel[0];
+      newImageData.data[i + 1] = bgPixel[1];
+      newImageData.data[i + 2] = bgPixel[2];
+      newImageData.data[i + 3] = bgPixel[3] ? (bgPixel[3] - 1) : 0;
+    }
+  }
+
+  ctx.putImageData(newImageData, 0, 0);
+
+  ctx = el.firstChild.getContext('2d');
+  ctx.drawImage(maskCanvasScaled, 0, 0);
+
+  maskCanvasScaled = ctx = imageData = newImageData = bctx = bgPixel = undefined;
+
+
+  WordCloud(el.firstChild, { list: listData,
+                  fontFamily: x.fontFamily,
+                  fontWeight: x.fontWeight,
+                  color: x.color,
+                  minSize: x.minSize,
+                  weightFactor: x.weightFactor,
+                  backgroundColor: x.backgroundColor,
+                  gridSize: x.gridSize,
+                  minRotation: x.minRotation,
+                  maxRotation: x.maxRotation,
+                  shuffle: x.shuffle,
+                  shape: x.shape,
+                  rotateRatio: x.rotateRatio,
+                  ellipticity: x.ellipticity,
+                  clearCanvas: false,
+                  hover: x.hover || cv_handleHover,
+                  abortThreshold: 3000
+                  });
+}