test new color scale

src/App.vue

@@ -80,14 +80,6 @@ a, button {
   touch-action: manipulation; /* Element doesn't want double-tap on mobile to zoom */
 }
 
-// svg {
-//   /* SVGs fit the parent container by default */
-//   height: 100%;
-//   width: 100%;
-//   fill: currentColor;
-//   pointer-events: none;
-// }
-
 iframe, video {
   /* Make iframes & videos fit the parent container by default */
   height: 100%;
@@ -99,8 +91,8 @@ body {
       background-color: white;
       margin: 0;
       padding: 0;
-      line-height: 1.2;
-      font-size: 1.95rem;
+      line-height: 1.35;
+      font-size: 1.9rem;
       font-weight: 400;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;

src/components/BeeswarmChart.vue

 <template>
-<section id="beeswarm">
-    <div id="toggle-container" > 
-        <div id="checkbox1-container">
-            <input type="checkbox" id="checkbox1" v-model="checkboxStates[0]" @change="handleCheckboxChange(0)">
-            <label for="checkbox1">Evidence</label>
+    <section id="beeswarm">
+        <div id="text1" class="text-container">
+            <p>Everyone needs access to clean water. In the western U.S., water insecurity is influenced by a number of social vulnerability indicators. This includes 
+                <span class="highlight demographicCharacteristics" id="demographicCharacteristics" >demographic characteristics</span>,
+                <span class="highlight health" id="health" >health</span>, 
+                <span class="highlight livingConditions" id="livingConditions">living conditions</span>, 
+                <span class="highlight socioeconomicStatus" id="socioeconomicStatus" >socioeconomic status</span>,
+                <span class="highlight landTenure" id="landTenure" >land tenure</span>,
+                <span class="highlight riskPerception" id="riskPerception" >risk perception</span>, and 
+                <span class="highlight exposureToStressors" id="exposureToStressors">exposure to stressors</span> (like drought or pollution).
+            </p>
         </div>
-        <div id="checkbox2-container">
-            <input type="checkbox" id="checkbox2" v-model="checkboxStates[1]" @change="handleCheckboxChange(1)">
-            <label for="checkbox2">Agreement</label>
+        <div id="toggle-container" > 
+            <div id="checkbox1-container">
+                <input type="checkbox" id="checkbox1" v-model="checkboxStates[0]" @change="handleCheckboxChange(0)">
+                <label for="checkbox1">Evidence</label>
+            </div>
+            <div id="checkbox2-container">
+                <input type="checkbox" id="checkbox2" v-model="checkboxStates[1]" @change="handleCheckboxChange(1)">
+                <label for="checkbox2">Agreement</label>
+            </div>
+            <div id="checkbox3-container">
+                <input type="checkbox" id="checkbox3" v-model="checkboxStates[2]" @change="handleCheckboxChange(2)">
+                <label for="checkbox3">Direction</label>
+            </div>
         </div>
-        <div id="checkbox3-container">
-            <input type="checkbox" id="checkbox3" v-model="checkboxStates[2]" @change="handleCheckboxChange(2)">
-            <label for="checkbox3">Direction</label>
-        </div>
-    </div>
-    <div id="beeswarm-chart-container"></div>
-</section>
+        <div id="beeswarm-chart-container"></div>
+    </section>
 </template>
   
 <script setup>
@@ -41,13 +52,13 @@ let margin = {top: 30, right: 20, bottom: 20, left: 30}
 
 // set colors for bubble charts
 const dimensionColors = {
-    Demographiccharacteristics: "#625D0B",
-    Landtenure: "#5C0601",
-    Livingconditions: "#0B4E8B",
-    Socioeconomicstatus: "#DC8260",
-    Health: "#7F4A89",
-    Riskperception: "#249CB1",
-    Exposure: "#B47D83"
+    Demographiccharacteristics: "#092836",
+    Landtenure: "#2a468f",
+    Livingconditions: "#7a5195",
+    Socioeconomicstatus: "#1b695e",
+    Health: "#ef5675",
+    Riskperception: "#ff764a",
+    Exposure: "#ffa600"
 }
 
 // load data and then make chart
@@ -132,7 +143,7 @@ function createScales(data) {
     // set radius based on evidence value
     const radiusScale = d3.scaleLinear()
         .domain([d3.min(data.value, d => d.evidence_val), d3.max(data.value, d => d.evidence_val)])
-        .range([10, 50]);
+        .range([20, 60]);
 
     return { xScale, radiusScale}
 }
@@ -342,6 +353,14 @@ function sortByDirection() {
   
 <style scoped lang="scss">
 $switchWidth: 12rem;
+$Demographiccharacteristics: "#625D0B";
+$Landtenure: "#5C0601";
+$Livingconditions: "#0B4E8B";
+$Socioeconomicstatus: "#DC8260";
+$Health: "#7F4A89";
+$Riskperception: "#249CB1";
+$Exposure: "#B47D83";
+
 #toggle-container {
     display: flex;
     justify-content: center;
@@ -493,5 +512,34 @@ $switchWidth: 12rem;
 text.xLabel  {
     font-weight: 600;
 }
+
+.highlight {
+    color: white;
+    padding: 0.25px 5px;
+    border-radius: 10px;
+    white-space: nowrap;
+}
+.demographicCharacteristics {
+    background-color: #092836;
+}
+.landTenure {
+    background-color: #2a468f;
+}
+.livingConditions {
+    background-color: #7a5195;
+}
+.socioeconomicStatus {
+    background-color: #1b695e;
+}
+.health {
+    background-color: #ef5675;
+}
+.riskPerception {
+    background-color: #ff6b4a;
+}
+.exposureToStressors {
+    background-color: #ffa600;
+}
+
 </style>
   
\ No newline at end of file

src/views/VisualizationView.vue

 <template>
   <section id="visualization">
     <VizTitle />
-    <Beeswarm /> 
+    <BeeswarmChart /> 
     <NarrativeIntro />
     <BubbleChart />
     <Dendrogram />