From 89181d7e3432473f9b4e29da1c2354eb3fcb0b35 Mon Sep 17 00:00:00 2001
From: Adrien Vauthey <adrien.vauthey@epfl.ch>
Date: Sun, 4 Jun 2023 14:10:42 +0200
Subject: [PATCH] adjusted font-size, reduced treemap height

---
 website/css/custom.css | 2 +-
 website/index.html     | 2 +-
 website/js/treemap.js  | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/website/css/custom.css b/website/css/custom.css
index 8ceedbd..069ba4e 100755
--- a/website/css/custom.css
+++ b/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;
 }
diff --git a/website/index.html b/website/index.html
index 4af733a..e575e79 100755
--- a/website/index.html
+++ b/website/index.html
@@ -183,7 +183,7 @@ <h1 class="section-heading">How many apps in each category?</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"> 
diff --git a/website/js/treemap.js b/website/js/treemap.js
index 1fed662..78be38a 100644
--- a/website/js/treemap.js
+++ b/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")