Merge branch 'master' of https://github.com/com-480-data-visualizatio…

…n/project-2023-insightsquad

website/css/custom.css

@@ -189,7 +189,7 @@ footer {
 
 .chart-description {
     text-align: justify;
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 200;
     margin-top: 10px;
 }

website/index.html

@@ -190,7 +190,7 @@ <h1 class="section-heading">Size matters</h1>
         With a glimpse of an eye, you henceforth know it.</p> 
                     <p class="chart-description">Each tile size represents the proportion of applications in the category, <b>click on a tile</b> to display the 10 most downloaded/reviewed 
         applications for that specific category. <br><b>Hover a tile</b> to display its name, the number of applications and the percentage it represents.
-        Use the <b>slider</b> to change between datasets. You can also <b>click on an app</b> in the top at the right to show more information about it.</p> 
+        Use the <b>slider</b> to change between datasets. <br>You can also <b>click on an app</b> in the top at the right to show more information about it.</p> 
                     <div id="slider-container-treemap"> 
                         <label for="slider-treemap">Select Data:</label>                         
                         <input type="range" min="1" max="3" value="1" id="slider-treemap" list="slider-treemap-labels"> 

website/js/treemap.js

@@ -2,7 +2,7 @@
 var marginTreemap = {top: 50, right: 30, bottom: 0, left: 0},
   marginTreemapLabel = 10,
   widthTreemap = document.getElementsByClassName("column-left-75")[0].offsetWidth,
-  heightTreemap = 900,
+  heightTreemap = 800,
   tile = d3.treemapResquarify,
   fontSizeTreemap = "20px",
   colorsAndroid = d3.scaleOrdinal()
@@ -192,7 +192,7 @@ function updateTreemap(data, dataType) {
         tooltip.style("visibility", "visible")
       })
       .on("mousemove", function() {
-        tooltip.style("top", (d3.event.pageY+10)+"px").style("left",(d3.event.pageX+10)+"px")
+        tooltip.style("top", (d3.event.pageY-100)+"px").style("left",(d3.event.pageX+15)+"px")
       })
       .on("mouseout", function() {
         tooltip.style("visibility", "hidden")