fixed heatmap, treemap labels and changed cursor

com-480-data-visualization · Jun 4, 2023 · 85bb5ce · 85bb5ce
1 parent 486cb1b
commit 85bb5ce
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/website/css/custom.css b/website/css/custom.css
@@ -27,6 +27,11 @@ p {
     line-height: 1.5;
 }
 
+p.clickable:hover {
+    color: #2072F3;
+    cursor: pointer;
+}
+
 b {
     font-weight: 600;
     color: #2072F3;
@@ -491,10 +496,6 @@ section {
     text-decoration: none;
 }
 
-p.clickable:hover {
-    color: #2072F3;
-}
-
 .promo-item {
     height: 200px;
     line-height: 180px;

diff --git a/website/js/heatmap.js b/website/js/heatmap.js
@@ -1,7 +1,7 @@
 // set the dimensions and margins of the graph
 var marginHeatmap = {top: 20, right: 25, bottom: 30, left: 40},
-  widthHeatmap = 800 - marginHeatmap.left - marginHeatmap.right,
-  heightHeatmap = 450 - marginHeatmap.top - marginHeatmap.bottom;
+  widthHeatmap = 850 - marginHeatmap.left - marginHeatmap.right,
+  heightHeatmap = 800 - marginHeatmap.top - marginHeatmap.bottom;
 
 
 // set the color scale
@@ -73,8 +73,8 @@ function updateHeatmapChart(data) {
     d3.select("#heatmap").selectAll("svg").remove();
     var svg = d3.select("#heatmap")
     .append("svg")
-      .attr("width", width + marginHeatmap.left + marginHeatmap.right)
-      .attr("height", height + marginHeatmap.top + marginHeatmap.bottom)
+      .attr("width", widthHeatmap + marginHeatmap.left + marginHeatmap.right)
+      .attr("height", heightHeatmap + marginHeatmap.top + marginHeatmap.bottom)
     .append("g")
       .attr("transform",
             "translate(" + marginHeatmap.left + "," + marginHeatmap.top + ")");
@@ -88,7 +88,7 @@ function updateHeatmapChart(data) {
 
       // Build X scales and axis:
       var x = d3.scaleBand()
-        .range([ 0, width ])
+        .range([ 0, widthHeatmap ])
         .domain(myGroups)
         .padding(0.05);
       svg.append("g")

diff --git a/website/js/treemap.js b/website/js/treemap.js
@@ -1,5 +1,6 @@
 // set the dimensions and margins of the graph
-var marginTreemap = {top: 50, right: 50, bottom: 0, left: 0},
+var marginTreemap = {top: 50, right: 30, bottom: 0, left: 0},
+  marginTreemapLabel = 10,
   widthTreemap = document.getElementsByClassName("column-left-75")[0].offsetWidth,
   heightTreemap = 900,
   tile = d3.treemapResquarify,
@@ -211,27 +212,27 @@ function updateTreemap(data, dataType) {
   textLabels
     .enter()
     .append("text")
-      .attr("x", function(d){ return d.x0 + 10})    // +8 to adjust position (more right)
+      .attr("x", function(d){ return d.x0 + 10})    // +10 to adjust position (more right)
       .attr("y", function(d){ return d.y0 + 25})    // +20 to adjust position (lower)
       .attr("opacity", 0)
       .transition()
       .duration(500)
       .attr("opacity", 1)
-      .attr("x", function(d){ return d.x0 + 10})    // +8 to adjust position (more right)
+      .attr("x", function(d){ return d.x0 + 10})    // +10 to adjust position (more right)
       .attr("y", function(d){ return d.y0 + 25})    // +20 to adjust position (lower)
       .text(function(d){ 
         var name = d.data.name
         var widthTemp = d.x1 - d.x0
         var heightTemp = d.y1 - d.y0
-        var textWidth = getTextWidth(name, fontSizeTreemap) + marginTreemap.right
-        var textHeight = parseInt(fontSizeTreemap.substring(0, 2)) + 12
+        var textWidth = getTextWidth(name, fontSizeTreemap) + 2 * marginTreemapLabel
+        var textHeight = parseInt(fontSizeTreemap.substring(0, 2)) + marginTreemapLabel
         var truncatedName = name
 
         if (textWidth > widthTemp) {
-          var substringLength = findMaxSubstringLength(name, widthTemp - marginTreemap.right, fontSizeTreemap)
+          var substringLength = findMaxSubstringLength(name, widthTemp - marginTreemapLabel, fontSizeTreemap)
 
           if (substringLength > 1) {
-            truncatedName = name.substring(0, findMaxSubstringLength(name, widthTemp - marginTreemap.right, fontSizeTreemap)) + "..."
+            truncatedName = name.substring(0, findMaxSubstringLength(name, widthTemp - marginTreemapLabel, fontSizeTreemap)) + "..."
           }
           else {
             truncatedName = ""
@@ -260,7 +261,7 @@ function findMaxSubstringLength(text, desiredWidth, fontSize) {
   while (low <= high) {
     var mid = Math.floor((low + high) / 2);
     var substr = text.substr(0, mid + 1);
-    var width = getTextWidth(substr, fontSize) + marginTreemap.right + marginTreemap.left;
+    var width = getTextWidth(substr, fontSize) + 2 * marginTreemapLabel;
 
     if (width <= desiredWidth) {
       maxSubstrLength = mid + 1;