Layout final part

com-480-data-visualization · Jun 4, 2023 · ead6cf9 · ead6cf9
1 parent 41b13c4
commit ead6cf9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/website/css/custom.css b/website/css/custom.css
@@ -1165,6 +1165,23 @@ a:hover {
     object-fit: cover;
 }
 
+.box-heatmap {
+    margin:    5px;
+    width: 55%;
+    padding:20px;
+    background-color: #cfcfcf;
+}
+.box-donut {
+    width: 40%;
+    margin:    5px;
+    padding:20px;
+    background-color:  white;
+}
+.box-stacked {
+    margin:    5px;
+    padding:20px;
+}
+
 :root {
     --main1: #fafafa;
     --main2: #a40000;

diff --git a/website/index.html b/website/index.html
@@ -208,7 +208,7 @@ <h1 class="section-heading">How many apps in each category?</h1>
             <div class="container-more-results"> 
                 <div class="row"> 
                     <h1 class="section-heading">More results</h1> 
-                    <div class="column column-left-45"> 
+                    <div class="column column-left-45 box-donut"> 
                         <p class="chart-description">With the huge number of applications, can we find a pattern in the naming convention?  <br>The chart showcases the 10 most used words overall or by category.</p>
                         <p class="chart-description">Simply chose one category in the <b>drop down menu</b> above. <br>You can also change between datasets with the <b>slider</b></p>
                         <div id="slider-container-donut"> 
@@ -229,15 +229,15 @@ <h1 class="section-heading">More results</h1>
                         <div id="donutchart"></div>                         
                         <script src="js/donutchart.js"></script>                         
                     </div>                     
-                    <div class="column column-right-55"> 
+                    <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> 
           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>                         
                     </div>                     
                 </div>                 
-                <div class="row"> 
+                <div class="row box-stacked"> 
                     <div id="category-container-stacked"> 
                         <div id="slider-container-stacked"> 
                             <label for="slider-donut">Select amount:</label>