wordcloud debug 1

Persona.html

@@ -362,7 +362,7 @@
 								<div class="row">
 									<div class="col-9">
 										<div id="person_map" style="background-color: #fff; min-height:300px; margin-left:15px; margin-right:15px;">
-											<div id="myWordCloud">
+											<div id="myWordCloud"/>
 												<div id="word_loader" class="loader"></div>
 											</div>
 										</div>

js/word_cloud.js

@@ -139,7 +139,7 @@ function doListPersonNetwork(tempArray){
 
     tempArray.forEach(element => {
         ArrayNames += "<div class='item-place-person'><div class='item-place-person-label'>" +
-        element['text'] + "<br /><span class='num_occ'>[Co-occorrenze: " + element['num'] + "]</span></div><div class='item-place-person-action'><div class='persona' id='" +
+        element['text'] + "<br /><span class='num_occ'>[Co-occorrenze: " + element['count'] + "]</span></div><div class='item-place-person-action'><div class='persona' id='" +
         element['hlink'] + "'><i class='fa fa-user' style='cursor:pointer'></i></div></div></div></div>";            
     });
 
@@ -158,9 +158,18 @@ function doWordCloud(myWords){
     // OVERALL GRAPHIC SETTINGS for the cloud container -- id, dimensions, position
 
     // set the dimensions and margins of the graph
-    let margin = {top: 10, right: 10, bottom: 10, left: 10},
-        width = 850 - margin.left - margin.right,
-        height = 500 - margin.top - margin.bottom;
+    let modifierWidth = 0.4;
+    let modifierHeigth = 0.4;
+    let marginHeight = 0;
+    let marginWidth = 0;;
+
+    let margin = {
+        top: marginHeight,
+        right: marginWidth,
+        bottom: marginHeight,
+        left: marginWidth};
+    let width = modifierWidth*window.innerWidth;
+    let height = modifierHeigth*window.innerHeight;
   
     // append the svg object to the body of the page
     let svg = d3.select("#myWordCloud")
@@ -168,8 +177,10 @@ function doWordCloud(myWords){
         .attr("id", "wordcloudNetwork")
         .attr("width", width + margin.left + margin.right)
         .attr("height", height + margin.top + margin.bottom)
+        .attr("style", "border:1px solid black")
         .append("g")
-        .attr("transform", "translate(" + (width/2-50) + "," + (height/2+20) + ")");
+        .attr("transform", "translate(" + (width*0.75) + "," + (height*0.78) + ")")
+        .attr("overflow","scroll");
 
     // In case of empty cloud, draw special page and exit
     if (myWords.length == 0){
@@ -184,7 +195,7 @@ function doWordCloud(myWords){
     // Wordcloud features that are different from one word to the other must be here
 
     let layout = d3.layout.cloud() // Constructs the cloud
-                          .size([width, height]) // Sets width and height
+                          .size([1.5*width, 1.2*height]) // Sets width and height
                           .words(myWords) // put words in; expects an array of objects. Format is free, it all depends on the definition of the functions that are applied to define the cloud structure.
                           //
                           // A js curiosity: ~ is a bitwise not operator. On a number, the double bitwise not ~~ has the net effect of giving the integer part, that is: floor on positives and ceiling on negatives.