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

…n/project-2023-insightsquad

website/index.html

@@ -108,7 +108,7 @@ <h1 class="section-heading">Sankey Diagram</h1>
                     <div class="col-12 column-full text-justify"> 
                         <p class="chart-description text-justify">Sometimes it is cool to have an overview of a category, that let you know how many applications have less than 1,000 downloads, 
           if they are free or not and whether they have ads and/or in-app purchases.</p> 
-                        <p class="chart-description"><b>Hover</b> one of the link to display from and to which label we are going, and how many applications are concerned.
+                        <p class="chart-description"><b>Hover one of the link</b> to display from and to which label we are going, and how many applications are concerned.
             Use the <b>slider</b> to change between datasets and the <b>drop down menu</b> to change the category.</p> 
                         <p class="chart-description"><em>IAP: In-App Purchases</em></p> 
                     </div>                     
@@ -145,7 +145,7 @@ <h1 class="section-heading">Number of apps created each year</h1>
                     <div class="column-full" style="text-align: justify;"> 
                         <p class="chart-description">Each year, lots of applications are born but it is not necessarily uniform across all categories and age rating. 
           We focused our attention to the 10 biggest categories otherwise the smaller ones would be crushed and we would not see anything.</p> 
-                        <p class="chart-description"><b>Hover</b> one of the area to display the name of the correspond category or age rating on the top left of the chart. 
+                        <p class="chart-description"><b>Hover one of the area</b> to display the name of the correspond category or age rating on the top left of the chart. 
           Use the first <b>slider</b> to change between datasets and the second one to change the way we split applications.</p> 
                     </div>                     
                     <div class="column"> 
@@ -181,9 +181,9 @@ <h1 class="section-heading">Number of apps created each year</h1>
                     <h1 class="section-heading">How many apps in each category?</h1> 
                     <p class="chart-description">You ever wondered which category was the biggest in terms of applications? Wonder no more as this visualization was made for you. 
         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</b> on one of them to display the 10 most downloaded/reviewed 
-        applications for that specific category. <br><b>Hover</b> a tile to display its name, the number of applications and the percentage it represents.
-        Use the <b>slider</b> to change between datasets.</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> 
                     <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"> 
@@ -231,7 +231,7 @@ <h1 class="section-heading">More results</h1>
                     </div>                     
                     <div class="column column-right-55 box-heatmap"> 
                         <p class="chart-description">Heatmap of the number of apps in each category and rating. Unfortunately, we don't have the data for the Apple dataset.</p> 
-                        <p class="chart-description"><b>Hover</b> the cell to display the number of applications there is for that category and rating. <br> 
+                        <p class="chart-description"><b>Hover the cell</b> to display the number of applications there is for that category and rating. <br> 
           Select a category with the <b>drop down menu</b> and change between datasets with the <b>slider</b>.</p> 
                         <div id="heatmap"></div>                         
                         <script src="js/heatmap.js"></script>                         
@@ -256,7 +256,7 @@ <h1 class="section-heading">More results</h1>
                         <div class="column column-right-55"> 
                             <p class="chart-description">We had a preview of applications that contained a mean of remuneration, be it in-app purchases or ads, in the Sankey diagram. 
             But here we focus solely on that information! Unfortunately, we don't have the data for the Apple dataset.</p> 
-                            <p class="chart-description"><b>Hover</b> the area of the bar you are interested in to display the number of applications it contains.
+                            <p class="chart-description"><b>Hover the area</b> of the bar you are interested in to display the number of applications it contains.
             Select a category with the <b>drop down menu</b> and change between datasets with the <b>slider</b>.</p> 
                             <p class="chart-description"><em>IAP: In-App Purchases</em></p> 
                         </div>                         

website/js/treemap.js

@@ -334,7 +334,7 @@ function updateCategoryInfoOverall(data, sliderValueTreemap) {
 
   data.forEach(function(app, index) {
     topAppsHtml += "<a id='category_app_" + index + "'>" 
-    topAppsHtml += "<p class='clickable'><strong>" + (index + 1) + ".</strong> " + app.App_Name + "</p></a>"
+    topAppsHtml += "<p class='clickable chart-description'><strong>" + (index + 1) + ".</strong> " + app.App_Name + "</p></a>"
   })
 
   d3.select("#category-info")
@@ -378,7 +378,7 @@ function updateCategoryInfo(dataType, categoryName) {
 
   topApps.forEach(function(app, index) {
     topAppsHtml += "<a id='category_app_" + index + "'>" 
-    topAppsHtml += "<p class='clickable'><strong>" + (index + 1) + ".</strong> " + app.App_Name + "</p></a>"
+    topAppsHtml += "<p class='clickable chart-description'><strong>" + (index + 1) + ".</strong> " + app.App_Name + "</p></a>"
   })
   d3.select("#category-info")
     .html(topAppsHtml).style("opacity", 0).transition().duration(500).style("opacity", 1)