minor changes

jordanlleslie · Nov 2, 2023 · 1b61153 · 1b61153
1 parent b4a47a4
commit 1b61153
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <!-- TODO: Replace title -->
-    <title>Jordan's Poem</title>
+    <title>Data Driven Poetry</title>
     <link rel="stylesheet" type="text/css" href="./styles.css" />
     <script src="https://d3js.org/d3.v7.min.js"></script>
   </head>
@@ -11,17 +10,14 @@
       <h1 class="title">Static Vis Implementation</h1>
     </header>
     <div class="svg-container">
-        <svg id="svg"></svg>
+      <svg id="svg"></svg>
+      <!-- TODO: Poem Layout -->
+      <!-- TODO: Add Poem -->
     </div>
     <div id="selection-bar">
       <button id="select-numeracy" class="selection-btn active-button">Numeracy Chart</button>
       <button id="select-pie" class="selection-btn">Pie Chart</button>
-      <!-- <button id="select-parallel" class="selection-btn">Parallel Coordinates Plot</button> -->
     </div>
-    <p >I decided to scrap my idea for a parallel coordinates plot because I didn't feel that there were enough variables 
-      for it to be an effective use of the data, and I had more ideas for interactive elements in the above two visualizations 
-      which I expect to take some heavy lifting.</p>
-    <p >I also included the interactive arrows to click through the statements in the numeracy plot, but the vis itself is static.</p>
     <script type="module" src="./main.js"></script>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -34,13 +34,13 @@ body {
   }
 }
 
-/* .numeracy-category:hover {
+.numeracy-category:hover {
   cursor: pointer;
-} */
+}
 
-/* .numeracy-category:hover rect {
+.numeracy-category:hover rect {
   opacity: 0.1;
-} */
+}
 
 #svg {
   background-color: #eee;

diff --git a/utils/numeracyChart.js b/utils/numeracyChart.js
@@ -106,18 +106,16 @@ function singleNumeracyChart(statement, chart) {
       .text(value)
       .attr("y", chartHeight - padding * 3)
       .attr("x", xPosition)
-      .style("visibility", "visible")
-      //   .style("visibility", "hidden")
+      .style("visibility", "hidden")
       .style("fill", colors[key]);
     // Show label when hovering
-    // TODO: uncomment for interactive vis
-    // category
-    //   .on("mouseover", () => {
-    //     category.selectAll(".label").style("visibility", "visible");
-    //   })
-    //   .on("mouseout", () => {
-    //     category.selectAll(".label").style("visibility", "hidden");
-    //   });
+    category
+      .on("mouseover", () => {
+        category.selectAll(".label").style("visibility", "visible");
+      })
+      .on("mouseout", () => {
+        category.selectAll(".label").style("visibility", "hidden");
+      });
     xPosition += rowSize * iconSize;
   }
 }
@@ -126,7 +124,6 @@ let statementIndex;
 let statements;
 
 async function interactiveNumeracyChart(chart) {
-  //   await loadImages();
   // updateTitle("Experiences of Linguistic Discrimination in Germany");
 
   // implement interactive element (statement with forward and backward buttons)