correct water level vis for months with None

COSI116A-Brandeis-InfoVis-Fall23 · Dec 11, 2023 · e3c5c6e · e3c5c6e
1 parent 2685af1
commit e3c5c6e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/js/visualization.js b/js/visualization.js
@@ -71,16 +71,12 @@
         }
         const wordMonthData = data.filter((row) => row.Month == wordMonth)
         const monthPrecip= wordMonthData[0]['Total Precipitation (Inches)']
-        if (monthPrecip != "None"){
           d3.select("#waterLevelContainer").html("");
             // Generate and display water level vis for each entry
             console.log("Monthly Precipitation is:", monthPrecip); 
             generateWaterLevelVis(monthPrecip)
-
-          } else {
-            console.log(`No data available for ${wordMonth}`);
-          }
         }
+
 
       // Attach click event listener to the table rows
       document.getElementById("table").addEventListener("click", function (event) {

diff --git a/js/waterLevel.js b/js/waterLevel.js
@@ -1,7 +1,8 @@
 function generateWaterLevelVis(waterLevel) {
   // Check if water level is an object and is defined
   console.log("water level data is: ", waterLevel);
-
+  // checking for None, so that it won't create the visualization when the precipitation is None
+  if (waterLevel != "None"){
   // Select the container and append an SVG
   const svg = d3.select("#waterLevelContainer")
       .append("svg")
@@ -11,15 +12,15 @@ function generateWaterLevelVis(waterLevel) {
       .attr("transform", "translate(100,0)")
       .attr("fill", 'black')
 
-      // Append a rectangle representing the water level
+      // Append an outer rectangle to fill based on water level
     svg.append("rect")
     .attr("width", 100)
     .attr("height", 300)
     .attr("fill", "black")
     .attr("transform", "translate(0,50)")
     .attr("fill-opacity", '.2');
 
-    // Append a rectangle representing the water level
+    // Append an inner rectangle representing the water level
    translate_water_level = 300 - (waterLevel * 50) + 50
     svg.append("rect")
     .attr("width", 100)
@@ -37,7 +38,7 @@ function generateWaterLevelVis(waterLevel) {
       .attr("x", 50) // Adjust the x-coordinate for label position
       .attr("y", waterLevel + 30 + 50); // Adjust the y-coordinate for label position
 
-  // Add title
+  // Add title for the visualization
   svg.append("text")
       .attr("x", 50)
       .attr("y", 20)
@@ -46,4 +47,5 @@ function generateWaterLevelVis(waterLevel) {
       .style("font-weight", "bold")
       .style("font-color", "black")
       .text("Monthly Water Level");
+}
 }