make stripe fill for unknown

src/App.vue

@@ -93,7 +93,7 @@ body {
   background-color: white;
   margin: 0;
   padding: 0;
-  line-height: 1.2;
+  line-height: 1.35;
   font-size: 1.75rem;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;

src/components/BeeswarmChart.vue

@@ -2,7 +2,7 @@
     <section id="beeswarm">
       <div id="text1" class="text-container">
         <p>
-          Everyone needs access to clean water. Water insecurity is influenced by a number of social vulnerability indicators. This includes 
+          Everyone needs access to clean water. People may be more vulnerable to water insecurity due to  
           <span 
             :class="['highlight', 'Demographiccharacteristics', { checked: isChecked.Demographiccharacteristics }]" 
             @click="toggleCategory('Demographiccharacteristics')"
@@ -50,6 +50,9 @@
       <div id="beeswarm-chart-container">
         <div id="tooltip" style="position: absolute; opacity: 0;"></div>
       </div>
+      <caption>
+        A meta-analysis by Drakes et al. (2024) evaluated how water insecurity in the Western U.S. is influenced by social determinants. Interact with the chart and the highlighted text above to see what they found.
+      </caption>
     </section>
   </template>
   
@@ -191,43 +194,44 @@
 
         tooltip.html('')
         tooltip.append('div')
-          //.style('opacity', 1)
           .html(`<strong>${d.determinant}</strong><br>appeared in ${d.evidence_val} ${d.evidence_val === 1 ? 'study' : 'studies'}`);
-          //.style('left', (x + 10) + 'px')
-          //.style('top', (y - 28) + 'px');
 
           // add stacked bar chart
           const barData = [
             { name: 'positive', value: d.pos_related_total, stroke: dimensionColors[d.dimension.replace(' ', '')], fill: dimensionColors[d.dimension.replace(' ', '')]  },
             { name: 'negative', value: d.neg_related_total, stroke: dimensionColors[d.dimension.replace(' ', '')], fill: 'white'  },
-            { name: 'unknown', value: d.unk_related_total, pattern: true, stroke: dimensionColors[d.dimension.replace(' ', '')], fill: 'white' }
+            { name: 'unknown', value: d.unk_direction_total, pattern: true, stroke: dimensionColors[d.dimension.replace(' ', '')], fill: 'white' }
           ];
 
           // Set dimensions for the bar chart
-          const barWidth = 100;
+          const barWidth = 130;
           const barHeight = 10;
 
           // Create an SVG element for the bar chart
           const svgBar = tooltip.append('svg')
-            .attr('width', barWidth + 20)
-            .attr('height', barHeight + 20);
+            .attr('width', barWidth + 10)
+            .attr('height', barHeight + 10);
 
             const defs = svgBar.append('defs');
 
-          // Define pattern fill
-          defs.append('pattern')
+            const pattern = defs.append('pattern')
             .attr('id', 'pattern-stripe')
             .attr('patternUnits', 'userSpaceOnUse')
-            .attr('width', 4)
-            .attr('height', 4)
-            .append('path')
-            .attr('d', 'M 0 0 L 4 0 L 4 4')
-            .attr('fill', 'none')
+            .attr('width', 8)  // Adjusted to make pattern larger
+            .attr('height', 8)
+
+          pattern.append('rect')
+            .attr('width', 8)
+            .attr('height', 8)
+            .attr('fill', 'white');
+
+          pattern.append('path')
+            .attr('d', 'M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4') // Adjusted path for thicker stripes
             .attr('stroke', dimensionColors[d.dimension.replace(' ', '')])
-            .attr('stroke-width', 1);
+            .attr('stroke-width', 3);  // Thicker stripes
 
           const g = svgBar.append('g')
-            .attr('transform', 'translate(10, 10)');
+            .attr('transform', 'translate(8, 8)');
 
           // Create a scale for the x-axis
           const xBar = d3.scaleLinear()
@@ -437,7 +441,7 @@
   background: rgba(250, 250, 250, 0.93);
   padding: 2px;
  // border: 2px solid black;
-  border-radius: 5px;
+  border-radius: 10px;
   pointer-events: none; /* Prevent tooltip from blocking mouse events */
 }