diff --git a/src/App.vue b/src/App.vue
index 7286728917805e20bb5a4cb93ff871e0e562088e..b37282dad9b22e06e7ad6a9fb1005e34c5a45f37 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,6 +42,8 @@
 /* Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;500;600;700;800&display=swap');
 $SourceSans: 'Source Sans Pro', sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
+$Dosis: 'Inter Tight', sans-serif;
 $textcolor: #000000;
 $linkcolor: #d66853;
 
@@ -80,14 +82,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%;
@@ -95,28 +89,29 @@ iframe, video {
 }
 
 body {
-      height: 100%;
-      background-color: white;
-      margin: 0;
-      padding: 0;
-      line-height: 1.2;
-      font-size: 1.75rem;
-      font-weight: 400;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      width: 100%;
-      @media screen and (max-width: 600px) {
-        font-size: 1.6rem;
-      }
+  height: 100%;
+  background-color: white;
+  margin: 0;
+  padding: 0;
+  line-height: 1.2;
+  font-size: 1.75rem;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  width: 100%;
+  @media screen and (max-width: 600px) {
+    font-size: 1.6rem;
   }
+}
 h1{
-  font-size: 6rem;
+  font-size: 9rem;
   font-weight: 700;
-  font-family: $SourceSans;
+  font-family: $Dosis;
   line-height: 1;
+  padding-top: 0.25em;
   text-align: left;
-  text-shadow: 1px 1px 100px rgba(0,0,0,.8);
-    color: $textcolor;
+  //text-shadow: 2px 2px 2px rgba(0,0,0,.1);
+  color: $textcolor;
   @media screen and (max-width: 600px) {
     font-size: 4.75rem;
   }
@@ -136,10 +131,10 @@ h2{
 }
 h3{
   font-size: 3rem;
-  padding-top: 1em;
+  padding-top: 0.5em;
   padding-bottom: .25em;
-  font-family: $SourceSans;
-  font-weight: 600;
+  font-family: $Dosis;
+  font-weight: 400;
   color: $textcolor;
   @media screen and (max-width: 600px) {
       font-size: 3.2rem;
diff --git a/src/assets/components/References.vue b/src/assets/components/References.vue
deleted file mode 100644
index 0e7cde3b41d33f03e11ed7fd518f5846f8823d4b..0000000000000000000000000000000000000000
--- a/src/assets/components/References.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <section id="references">
-    <div class="text-content">
-      <h3>{{ text.title }}</h3>
-      <div>
-        <div v-for="reference in text.references" :key="reference.subTitle">
-          <p>
-            <span v-html="reference.num" />.
-            <span v-html="reference.authors" />
-            <a :href="reference.link" target="_blank"><span v-html="reference.title" /></a
-            ><span v-html="reference.ref" />
-          </p>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-  import referencesText from '@/assets/text/referencesText'
-  export default {
-    name: 'ReferencesSection',
-    data() {
-      return {
-        text: referencesText.referencesContent
-      }
-    }
-  }
-</script>
-
-/*Scope USWDS styles*/
-<style scoped src="../../node_modules/uswds/dist/css/uswds.min.css"></style>
-<style scoped lang="scss"></style>
diff --git a/src/assets/images/med_income_census_2022 copy.png b/src/assets/images/med_income_census_2022 copy.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2db8e8237bd7561cec13a06207f55b663fb764e
Binary files /dev/null and b/src/assets/images/med_income_census_2022 copy.png differ
diff --git a/src/assets/images/med_income_census_2022.png b/src/assets/images/med_income_census_2022.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2db8e8237bd7561cec13a06207f55b663fb764e
Binary files /dev/null and b/src/assets/images/med_income_census_2022.png differ
diff --git a/src/assets/images/median_rent_2022.png b/src/assets/images/median_rent_2022.png
new file mode 100644
index 0000000000000000000000000000000000000000..639fa053d993cbb537b86e0e130f775b6e17f033
Binary files /dev/null and b/src/assets/images/median_rent_2022.png differ
diff --git a/src/assets/images/perc_latino_census_2022.png b/src/assets/images/perc_latino_census_2022.png
new file mode 100644
index 0000000000000000000000000000000000000000..edfbfb273c13a68a0176c335a4e3e2747fdf8d01
Binary files /dev/null and b/src/assets/images/perc_latino_census_2022.png differ
diff --git a/src/assets/images/sepia_no-circles.png b/src/assets/images/sepia_no-circles.png
new file mode 100644
index 0000000000000000000000000000000000000000..37b5a3daaeb931017d243018af08689046b0de32
Binary files /dev/null and b/src/assets/images/sepia_no-circles.png differ
diff --git a/src/assets/images/tot_female_households_2022 copy.png b/src/assets/images/tot_female_households_2022 copy.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bcd9619db16fabbc780f1ce440d21d02d442be4
Binary files /dev/null and b/src/assets/images/tot_female_households_2022 copy.png differ
diff --git a/src/assets/images/tot_female_households_2022.png b/src/assets/images/tot_female_households_2022.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bcd9619db16fabbc780f1ce440d21d02d442be4
Binary files /dev/null and b/src/assets/images/tot_female_households_2022.png differ
diff --git a/src/assets/images/tot_households_2022.png b/src/assets/images/tot_households_2022.png
new file mode 100644
index 0000000000000000000000000000000000000000..637c545b430cbb337a49a6a56f25d8dc364a22ab
Binary files /dev/null and b/src/assets/images/tot_households_2022.png differ
diff --git a/src/assets/images/tot_latino_census_2022.png b/src/assets/images/tot_latino_census_2022.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6ba856f0f40d800dea66dddd1021f70d8b7feef
Binary files /dev/null and b/src/assets/images/tot_latino_census_2022.png differ
diff --git a/src/assets/text/agVsMunicipalText.js b/src/assets/text/agVsMunicipalText.js
deleted file mode 100644
index 86f9ba18d740ff3bfcd053f9e8a8049d937a97b7..0000000000000000000000000000000000000000
--- a/src/assets/text/agVsMunicipalText.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  agVersusMunicipalText: {
-    title: "Social vulnerabilities in agricultural versus municipal sectors",
-    paragraph1: "Agricultural and municipal water use are the two largest water-use sectors in the western United States. Studies of social vulnerability to water insecurity in these two sectors tend to focus on different determinants. For the agricultural sector, studies have mostly looked at exposure to external stressors (where water insecurity is happening) and living conditions. On the other hand, studies of the municipal sector have focused on demographic characteristics and socioeconomic status. Many studies of the municipal sector have emphasized exposure, as well. Because of the different focuses of these studies, we understand the influence of determinants like demographics and socioeconomics better in the municipal sector than we do in the agricultural sector. Which brings us to an important point…"
-  }
-}
\ No newline at end of file
diff --git a/src/assets/text/authors.js b/src/assets/text/authors.js
index 0161b028adde7129f8ecd11f3789967189d7019c..c03e96feaa33fb99435e62fb87d0fe125c10a2e5 100644
--- a/src/assets/text/authors.js
+++ b/src/assets/text/authors.js
@@ -10,7 +10,7 @@ export default {
       initials: 'EA',
       profile_link: 'https://www.usgs.gov/staff-profiles/elmera-azadpour',
       role: 'contributor',
-      contribution: 'led the design and development of the site, and developed interactive and static data visualizations of vulerability indicators data'
+      contribution: 'led the development of data visualization content'
     }
   ],
   // do not delete section. delete any or all individuals as needed. modify content as needed
@@ -23,7 +23,7 @@ export default {
       initials: 'AMC',
       profile_link: 'https://www.usgs.gov/staff-profiles/aileen-m-clarke',
       role: 'developer',
-      contribution: 'aided in development of the site, and developed the interactive bubble charts of vulnerability indicators data'
+      contribution: 'developed the site and the interactive charts'
     },
     {
       firstName: 'Mandie',
@@ -33,7 +33,7 @@ export default {
       profile_link: 'https://www.usgs.gov/staff-profiles/amanda-carr',
       role: 'contributor',
       contribution:
-        'wrote the narrative for the site and created the illustrations and infographics'
+        'wrote the narrative'
     },
     {
       firstName: 'Oronde',
@@ -42,7 +42,7 @@ export default {
       initials: 'OD',
       profile_link: 'https://www.usgs.gov/staff-profiles/oronde-drakes',
       role: 'SME',
-      contribution: 'advised on site content as a subject matter expert'
+      contribution: 'provided subject matter expertise'
     },
     {
       firstName: 'Diana',
@@ -51,7 +51,7 @@ export default {
       initials: 'DRO',
       profile_link: 'https://www.usgs.gov/staff-profiles/diana-l-restrepo-osorio',
       role: 'SME',
-      contribution: 'advised on site content as a subject matter expert'
+      contribution: 'provided subject matter expertise'
     },
     {
       firstName: 'Cee',
@@ -60,7 +60,7 @@ export default {
       initials: 'CN',
       profile_link: 'https://www.usgs.gov/staff-profiles/cee-nell',
       role: 'team lead',
-      contribution: 'provided review and contributed to site design and development'
+      contribution: 'provided editorial review and led site development'
     }
   ]
 }
diff --git a/src/assets/text/bubbleChartText.js b/src/assets/text/bubbleChartText.js
deleted file mode 100644
index 33e1c1029f18a5ce53e9f74a051bcc9c658181c0..0000000000000000000000000000000000000000
--- a/src/assets/text/bubbleChartText.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
-  bubbleChartText: {
-    title: "What do we know about how social factors affects water insecurity?",
-    paragraph1: "Color = dimension of social vulnerability to water insecurity<br>Bubble = determinant (nested within dimension)<br>Details = indicator (nested within determinant)<br>Size = how much evidence do we have that the determinant contributes to water insecurity<br>Evidence = how much research has been done to assess the effect of the determinant on water insecurity<br>Agreement = how many studies agreed that the determinant increased water insecurity<br><br>Hover on a bubble to learn more",
-    paragraph2: "Who we are and where we live affect our access to clean, plentiful water. Certain categories of social factors (called “dimensions”) make us more vulnerable to water insecurity. These dimensions—demographic characteristics, living conditions, socioeconomic status, and exposure to external stressors like drought or pollution—have been studied by many researchers, most of whom agree the dimensions affect water insecurity. But certain aspects of those dimensions of social vulnerability (called “determinants”) are better studied than others. How much do we know about the effects of these determinants on water insecurity? Which determinants are we confident about, and which do we need to understand better? The Socioeconomic Drivers Program of the USGS Water Resources Mission Area is working to find out. "
-  }
-}
\ No newline at end of file
diff --git a/src/assets/text/mapText.js b/src/assets/text/mapText.js
deleted file mode 100644
index a7e892174c7538ca1e3e1c5812ca14318e2ad8e2..0000000000000000000000000000000000000000
--- a/src/assets/text/mapText.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  mapText: {
-    title: "Demographic characteristics and socioeconomic status across the Western states ",
-    paragraph1: "Factors associated with social vulnerability to water insecurity are not equally distributed across the Western United States. Certain races and ethnicities are more heavily concentrated in some geographic areas than in others. Similarly, some counties have much higher median household incomes than other counties do. Understanding where these vulnerable populations live is important information for water-resource managers to make equitable decisions about water availability and use."
-  }
-}
\ No newline at end of file
diff --git a/src/assets/text/metaAnalysisText.js b/src/assets/text/metaAnalysisText.js
deleted file mode 100644
index a5018365121fb90f15947ac9a8bc3c4cbaac2ff1..0000000000000000000000000000000000000000
--- a/src/assets/text/metaAnalysisText.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export default {
-  metaAnalysisText: {
-    title: "Meta-analysis of social vulnerability to water insecurity ",
-    paragraph1: "Line thickness = how much evidence do we have that the determinant or indicator contributes to water insecurity ",
-    paragraph2: "In 2023, the USGS Social and Economic Drivers Program (SED, for short) and partners in the USGS Integrated Information Dissemination Division (IIDD) conducted a meta-analysis of studies that measured factors of social vulnerability associated with conditions of water insecurity. A meta-analysis is a type of review study, where researchers combine data from many different studies to try to identify bigger patterns across all the results. The team focused their analysis on studies published between 2000 and 2022 that took place in the conterminous United States (lower 48 states) west of the Mississippi River. The Western states face a slew of water availability challenges, including increasing population growth, dependence on groundwater, and generally low precipitation (see <a href='https://pubs.usgs.gov/circ/2005/circ1261/pdf/C1261.pdf' target='_blank'>Anderson and Woosley 2005</a> for a discussion of water availability in the Western United States). But not all populations across the West  experience the same levels of water insecurity.",
-    paragraph3: "“The goal of our meta-analysis was to provide baseline metrics supporting the development of a set of indicators describing social vulnerability of key water-use sectors (agricultural and municipal) to conditions of water insecurity,” explains Oronde Drakes, social geographer and lead author of the meta-analysis. “This includes understanding the inherent vulnerabilities of populations dependent on these water-use sectors as well as those decision-making processes that can exacerbate vulnerabilities.”",
-    paragraph4: "What the SED-IIDD team found was that a small subset of social vulnerability indicators was not only studied a lot but was consistently associated with water insecurity. Multiple demographic characteristics (age, race/ethnicity, family structure, gender, and language proficiency), dependence on specific sources and uses of water, wealth, and exposure to water-related hazards all had large amounts of evidence and high levels of agreement for their influence on water insecurity."
-  }
-}
\ No newline at end of file
diff --git a/src/assets/text/referencesText.js b/src/assets/text/referencesText.js
index 3693bd3523e54b23ceed368da82fa3a8c8630bc3..2449968f083554031c555a86fe531e11aa4c0645 100644
--- a/src/assets/text/referencesText.js
+++ b/src/assets/text/referencesText.js
@@ -3,24 +3,84 @@ export default {
     title: 'References',
     references: [
       {
-        reference: 'Reference TKTK',
+        reference: 'Draining: The Economic Impact of Americas Hidden Water Crisis',
         num: '1',
         authors: 'DIGDEEP',
         year: 2024,
-        title: 'DRAINING THE ECONOMIC IMPACT OF AMERICAS HIDDEN WATER CRISIS',
+        title: 'Draining: The Economic Impact of Americas Hidden Water Crisis',
         link: 'https://www.digdeep.org/draining',
         type: '',
         ref: ''
       },
       {
-        reference: 'Reference TKTK',
+        reference: 'Literature Summary of Indicators of Water Vulnerability in the Western US 2000-2022',
         num: '2',
+        authors: 'Hines, M.K., Drakes, O.O., Restrepo-Osorio., D.L., and Powlen, K.A.',
+        year: '2023',
+        title: 'Literature Summary of Indicators of Water Vulnerability in the Western US 2000-2022',
+        link: 'https://www.sciencebase.gov/catalog/item/63f79d49d34e4f7eda456572',
+        type: 'U.S. Geological Survey data release',
+        ref: 'https://doi.org/10.5066/P93IDTUZ'
+      },
+      {
+        reference: 'Social vulnerability and water insecurity in the western United States: A systematic review of framings, indicators, and uncertainty',
+        num: '3',
+        authors: 'Drakes, O.O., Restrepo-Osorio., D.L., Powlen, K.A. and Hines, M.K.',
+        year: '(in review)',
+        title: 'Social vulnerability and water insecurity in the western United States: A systematic review of framings, indicators, and uncertainty',
+        link: '',
+        type: '',
+        ref: ''
+      },
+      {
+        reference: 'Water availability for the western United States: key scientific challenges',
+        num: '4',
         authors: 'Anderson, M. T., & Woosley, L. H',
         year: '2005',
         title: 'Water availability for the western United States: key scientific challenges',
         link: 'https://pubs.usgs.gov/circ/2005/circ1261/pdf/C1261.pdf',
-        type: '',
+        type: 'U.S. Geological Survey publication',
         ref: 'https://doi.org/10.3133/cir1261'
+      },
+      {
+        reference: 'Exposing the myths of household water insecurity in the global north: A critical review',
+        num: '5',
+        authors: 'Meehan, K., Jepson, W., Harris, L. M., Wutich, A., Beresford, M., Fencl, A., ... and Young, S',
+        year: '2020',
+        title: 'Exposing the myths of household water insecurity in the global north: A critical review',
+        link: 'https://doi.org/10.1002/wat2.1486',
+        type: '',
+        ref: 'https://doi.org/10.1002/wat2.1486'
+      },
+      {
+        reference: 'Geographies of insecure water access and the housing–water nexus in US cities',
+        num: '6',
+        authors: 'Meehan, K., Jurjevich, J. R., Chun, N. M., and Sherrill, J.',
+        year: '2020',
+        title: 'Geographies of insecure water access and the housing–water nexus in US cities',
+        link: 'https://www.pnas.org/doi/full/10.1073/pnas.2007361117',
+        type: '',
+        ref: 'https://doi.org/10.1073/pnas.2007361117'
+      },
+      {
+        reference: 'Social vulnerability and short-term disaster assistance in the United States',
+        num: '7',
+        authors: 'Drakes, O., Tate, E., Rainey, J., and Brody, S',
+        year: '2021',
+        title: 'Social vulnerability and short-term disaster assistance in the United States',
+        link: 'https://www.sciencedirect.com/science/article/pii/S2212420920315120?via%3Dihub',
+        type: '',
+        ref: 'https://doi.org/10.1016/j.ijdrr.2020.102010'
+      },
+      {
+        reference: 'Plumbing Poverty: Mapping Hot Spots of Racial and Geographic Inequality in U.S. Household Water Insecurity',
+        num: '8',
+        authors: 'Deitz, S., and Meehan, K.',
+        year: '2019',
+        title: 'Plumbing Poverty: Mapping Hot Spots of Racial and Geographic Inequality in U.S. Household Water Insecurity',
+        link: 'https://www.tandfonline.com/doi/full/10.1080/24694452.2018.1530587',
+        type: '',
+        ref: 'https://doi.org/10.1016/j.ijdrr.2020.102010'
       }
     ]
   }
diff --git a/src/assets/text/socialVulnerabilityText.js b/src/assets/text/socialVulnerabilityText.js
deleted file mode 100644
index cae9ff3b3e207fb87694ee4eb186f891c7d40805..0000000000000000000000000000000000000000
--- a/src/assets/text/socialVulnerabilityText.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-  socialVulnerabilityText: {
-    title: "How we think about social vulnerability matters",
-    paragraph1: "There are two main ways to frame social vulnerability. In one framing, we understand social vulnerability as an outcome of events produced by external stressors (for example, exposure and socioeconomic status). In another framing, we view social vulnerability as a preexisting condition from which water insecurity arises as an outcome of unequal social conditions (for example, health, perception of water-related risk, and living conditions). Which frame we choose affects which determinants and locations we invest time and resources in studying.",
-    paragraph2: "In general, studies have approached social vulnerability more commonly as a product of external stressors rather than a preexisting condition for water insecurity. In other words, they’ve focused more on where water insecurity happens than who experiences it and why. This focus has the potential to misdirect well-intentioned decision makers. For example, the SED-IIDD team found that exposure to external stressors was one of the most frequently measured dimensions in the scientific literature. Of the 8 determinants of exposure assessed, however, only hazard extent had high levels of agreement among studies. That is to say, exposure may be studied a lot, but there isn’t much agreement on which elements of exposure are the most important predictors of social vulnerability to water insecurity.",
-    paragraph3: "There is a lot of uncertainty around other potentially important social factors for water insecurity. For example, disability status has been found to be strongly associated with water insecurity but has only been assessed by two studies in our sample. Similarly, multiple health indicators, like sanitation and life expectancy, appear to have strong relationships with water insecurity but have only been measured by a single study."
-  }
-}
\ No newline at end of file
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
new file mode 100644
index 0000000000000000000000000000000000000000..7bc46a06cff0cd5d7212ac944e399a98f8be2da9
--- /dev/null
+++ b/src/assets/text/text.js
@@ -0,0 +1,44 @@
+export default {
+  pageTitle: "Unequal access to water",
+  components: {
+    introNarrative: {
+      title: "",
+      paragraph1: `Imagine you live in a big house in the suburbs where clean water flows out of every faucet. There’s enough water for you and your family to grow a nice garden every year. The public water supplier treats the water and maintains the distribution system regularly, so you know the water is safe for you to drink. A small, clean stream flows through town, offering a cool place to swim and play during the hot summer months.`,
+      paragraph2: `Now imagine you live in a small rural community on the outskirts of town. You have your own well, but in recent years, you and your neighbors have had to dig deeper and deeper to reach water. Dangerous metals are leaching into the water belowground, but you have no way of treating your water before your family drinks it. Because of an ongoing drought, the sparse vegetation surrounding your house has turned a crispy brown. A nearby pond shrinks each summer and acquires a ghastly green hue as it’s choked by harmful algae blooms.`,
+      paragraph3: `This nightmarish scene may sound like the backdrop of a post-apocalyptic movie, but this nightmare is the unfortunate reality for many Americans. More than 2.2 million Americans lack running water and basic plumbing in their homes, and millions more experience other elements of water insecurity, or insufficient access to clean water for livelihoods, development, and human and ecosystem health. Populations cannot maintain access to adequate quantities of water at an acceptable quality to sustain livelihoods, development, and human and ecosystem health.`,
+      paragraph4: `Everyone needs and deserves sufficient access to clean water, but some are more likely to experience <span class="tooltip-span">water insecurity<span class="tooltiptext">Water insecurity tooltip text</span></span> than others. <span class="tooltip-span">Social vulnerabilities<span class="tooltiptext">Conditions in which societal factors shape exposure to hazards, susceptibility to suffer harm, and ability to cope and recover from losses.</span></span>, characterized by demographic characteristics, living conditions, socioeconomic status, and exposure to stressors (like drought or pollution) influence access to clean water.`,
+      paragraph5: `How do these social determinants influence water insecurity? To begin answering this question takes us one step closer to equitable water access for all.`,
+    },
+    agVersusMunicipalText: {
+      title: "Social vulnerabilities in agricultural versus municipal sectors",
+      paragraph1: "Agricultural and municipal water use are the two largest water-use sectors in the western United States. Studies of social vulnerability to water insecurity in these two sectors tend to focus on different determinants. For the agricultural sector, studies have mostly looked at exposure to external stressors (where water insecurity is happening) and living conditions. On the other hand, studies of the municipal sector have focused on demographic characteristics and socioeconomic status. Many studies of the municipal sector have emphasized exposure, as well. Because of the different focuses of these studies, we understand the influence of determinants like demographics and socioeconomics better in the municipal sector than we do in the agricultural sector. Which brings us to an important point…"
+    },
+    bubbleChartText: {
+      title: "What do we know about how social factors affects water insecurity?",
+      paragraph1: "Color = dimension of social vulnerability to water insecurity<br>Bubble = determinant (nested within dimension)<br>Details = indicator (nested within determinant)<br>Size = how much evidence do we have that the determinant contributes to water insecurity<br>Evidence = how much research has been done to assess the effect of the determinant on water insecurity<br>Agreement = how many studies agreed that the determinant increased water insecurity<br><br>Hover on a bubble to learn more",
+      paragraph2: "Who we are and where we live affect our access to clean, plentiful water. Certain categories of social factors (called “dimensions”) make us more vulnerable to water insecurity. These dimensions—demographic characteristics, living conditions, socioeconomic status, and exposure to external stressors like drought or pollution—have been studied by many researchers, most of whom agree the dimensions affect water insecurity. But certain aspects of those dimensions of social vulnerability (called “determinants”) are better studied than others. How much do we know about the effects of these determinants on water insecurity? Which determinants are we confident about, and which do we need to understand better? The Socioeconomic Drivers Program of the USGS Water Resources Mission Area is working to find out. "
+    },
+    mapText: {
+      title: "Vulnerability indicators across the Western states ",
+      paragraph1: "Infrastructure and institutional factors are major determinants of access to and reliability of water delivery in the United States (Drakes and others., in review). <a href='https://wires.onlinelibrary.wiley.com/doi/10.1002/wat2.1486' target='_blank'>Meehan and others (2020)</a> found 471,000 households or 1.1 million people lacked piped water access between 2013 and 2017, with the majority (73%) of these households located in metropolitan areas, and nearly half (47%) in the 50 largest urban areas. The reviewed literature showed indicators of household size, female-headed households, female population, and percentage of females in the labor force were all predominantly positively related and statistically significant/important to water insecurity conditions. Displayed below are county level maps, using 2022 U.S. Census Bureau data, of total households and total female householders where counties with the greatest total households and female householders, in dark orange, include Los Angeles County, California, Harris County, Texas, and Maricopa County, Arizona.",
+      paragraph2: "The meta-analysis identified income to be positively correlated to to water insecure conditions with a medium level of agreement and large amount of evidence. Income inequality is a highly significant predictor of plumbing poverty. Research shows that neighborhoods with higher rates of income inequality—relative to the metropolitan area as a whole—are more likely to be plumbing poor <a href='https://www.pnas.org/doi/abs/10.1073/pnas.2007361117' target='_blank'>(Meehan and others, 2020)</a>. The county level map below displays median household income in the past 12 months (in 2022 inflation-adjusted dollars) where counties with the greatest median household income, in dark orange, include Santa Clara County, California, San Mateo County, California, and Marin County, California.",
+      paragraph3: "The meta-analysis identified that median rent was negatively correlated with water insecurity, likely reflecting greater access to resources for wealthier populations <a href='https://www.sciencebase.gov/catalog/item/63f79d49d34e4f7eda456572' target='_blank'>(Hines and others, 2023)</a>. Additionally, high levels of agreement aligned with medium amounts of evidence for the influence of median rent costs, and house value. Research have shown disaster recovery programs place renters at a disadvantage versus homeowners. Renters are more likely to relocate, are less likely to apply for and receive less assistance post disaster. Renters also often lack the authority and means to enact structural changes to their domiciles for hazard mitigation, response, or recovery, which raises the hazard exposure and susceptibility of renters while lowering their capacity to cope <a href='https://doi.org/10.1016/j.ijdrr.2020.102010' target='_blank'>(Drakes and others, 2021) </a>. The county level map below displays median gross rent where counties with the greatest median gross rent, in dark blue, include San Mateo County, California, Santa Clara County, California, and Marin County, California.",
+      paragraph4: "There was a large amount of evidence for the influence of Hispanic populations as well as was high agreement that measures of Hispanic populations were significant and positively correlated to water insecure conditions <a href='https://www.sciencebase.gov/catalog/item/63f79d49d34e4f7eda456572' target='_blank'>(Hines and others, 2023)</a>. Hispanic households are likely to lack adequate plumbing, with much of this ‘plumbing poverty’ clustered in the western United States. In fact, research shows Hispanic-headed households make up 12.5 percent of all U.S. households and 16.7 percent of those with incomplete plumbing <a href='https://doi.org/10.1080/24694452.2018.1530587' target='_blank'>(Deitz & Meehan, 2019)</a>. Displayed below county level maps, using 2022 U.S. Census Bureau data, of total Hispanic or Latino and percent of Hispanic or Latino where counties with the greatest total latino, in dark orange, include Los Angeles County, California, Harris County, Texas, and Maricopa County, Arizona and greatest percent Latino counties include Kenedy County, Texas, Starr County, Texas, and Webb County, Texas.",
+      paragraph5: "Factors associated with social vulnerability to water insecurity are not equally distributed across the Western United States. Certain races and ethnicities are more heavily concentrated in some geographic areas than in others. Similarly, some counties have much higher median household incomes than other counties do. Understanding where these vulnerable populations live is important information for water-resource managers to make equitable decisions about water availability and use."
+    },
+    metaAnalysisText: {
+      title: "Meta-analysis of social vulnerability to water insecurity ",
+      paragraph1: "Line thickness = how much evidence do we have that the determinant or indicator contributes to water insecurity ",
+      paragraph2: "In 2023, the USGS Social and Economic Drivers Program (SED, for short) and partners in the USGS Integrated Information Dissemination Division (IIDD) conducted a meta-analysis of studies that measured factors of social vulnerability associated with conditions of water insecurity. A meta-analysis is a type of review study, where researchers combine data from many different studies to try to identify bigger patterns across all the results. The team focused their analysis on studies published between 2000 and 2022 that took place in the conterminous United States (lower 48 states) west of the Mississippi River <a href='https://www.sciencebase.gov/catalog/item/63f79d49d34e4f7eda456572' target='_blank'>(Hines and others, 2023)</a>. The Western states face a slew of water availability challenges, including increasing population growth, dependence on groundwater, and generally low precipitation (see <a href='https://pubs.usgs.gov/circ/2005/circ1261/pdf/C1261.pdf' target='_blank'>Anderson and Woosley, 2005</a> for a discussion of water availability in the Western United States). But not all populations across the West  experience the same levels of water insecurity.",
+      paragraph3: "“The goal of our meta-analysis was to provide baseline metrics supporting the development of a set of indicators describing social vulnerability of key water-use sectors (agricultural and municipal) to conditions of water insecurity,” explains Oronde Drakes, social geographer and lead author of the meta-analysis. “This includes understanding the inherent vulnerabilities of populations dependent on these water-use sectors as well as those decision-making processes that can exacerbate vulnerabilities.” (Drakes and others, in review)",
+      paragraph4: "What the SED-IIDD team found was that a small subset of social vulnerability indicators was not only studied a lot but was consistently associated with water insecurity. Multiple demographic characteristics (age, race/ethnicity, family structure, gender, and language proficiency), dependence on specific sources and uses of water, wealth, and exposure to water-related hazards all had large amounts of evidence and high levels of agreement for their influence on water insecurity."
+    },  
+    socialVulnerabilityText: {
+      title: "How we think about social vulnerability matters",
+      paragraph1: "There are two main ways to frame social vulnerability. In one framing, we understand social vulnerability as an outcome of events produced by external stressors (for example, exposure and socioeconomic status). In another framing, we view social vulnerability as a preexisting condition from which water insecurity arises as an outcome of unequal social conditions (for example, health, perception of water-related risk, and living conditions). Which frame we choose affects which determinants and locations we invest time and resources in studying.",
+      paragraph2: "In general, studies have approached social vulnerability more commonly as a product of external stressors rather than a preexisting condition for water insecurity. In other words, they’ve focused more on where water insecurity happens than who experiences it and why. This focus has the potential to misdirect well-intentioned decision makers. For example, the SED-IIDD team found that exposure to external stressors was one of the most frequently measured dimensions in the scientific literature. Of the 8 determinants of exposure assessed, however, only hazard extent had high levels of agreement among studies. That is to say, exposure may be studied a lot, but there isn’t much agreement on which elements of exposure are the most important predictors of social vulnerability to water insecurity.",
+      paragraph3: "There is a lot of uncertainty around other potentially important social factors for water insecurity. For example, disability status has been found to be strongly associated with water insecurity but has only been assessed by two studies in our sample. Similarly, multiple health indicators, like sanitation and life expectancy, appear to have strong relationships with water insecurity but have only been measured by a single study."
+    }
+
+  }
+}
\ No newline at end of file
diff --git a/src/components/Beeswarm.vue b/src/components/Beeswarm.vue
deleted file mode 100644
index 6355b34a9a31dead5bc38e3d9fe35f6bfba3cb47..0000000000000000000000000000000000000000
--- a/src/components/Beeswarm.vue
+++ /dev/null
@@ -1,547 +0,0 @@
-<template>
-<section id="beeswarm">
-        <div
-            id="title"
-            class="text-container title-text"
-        >
-            <h3 v-html="agVsMunText.title" />
-        </div>
-        <div
-            id="text1"
-            class="text-container"
-        >
-            <p v-html="agVsMunText.paragraph1" />
-        </div>
-        <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="beeswarm-chart-container"></div>
-        <div
-            id="title2"
-            class="text-container title-text"
-        >
-            <h3 v-html="vulnerabilityText.title" />
-        </div>
-        <div
-            id="text2"
-            class="text-container"
-        >
-            <p v-html="vulnerabilityText.paragraph1" />
-        </div>
-        <div
-            id="text3"
-            class="text-container"
-        >
-            <p v-html="vulnerabilityText.paragraph2" />
-        </div>
-        <div
-            id="text4"
-            class="text-container"
-        >
-            <p v-html="vulnerabilityText.paragraph3" />
-        </div>
-    </section>
-</template>
-  
-<script setup>
-    import { onMounted, ref, watch } from "vue";
-    import { isMobile } from 'mobile-device-detect';
-    import * as d3 from 'd3';
-    import agVersusMunicipalText from "./../assets/text/agVsMunicipalText";
-    import socialVulnerabilityText from "./../assets/text/socialVulnerabilityText"
-    
-
-    // global variables 
-    const publicPath = import.meta.env.BASE_URL;
-    const agVsMunText = agVersusMunicipalText.agVersusMunicipalText;
-    const vulnerabilityText= socialVulnerabilityText.socialVulnerabilityText;
-    const dataSet1 = ref([]); 
-    const dataSet2 = ref([]); 
-    const selectedDataSet = ref('dataSet1');
-    const checkboxStates = ref([false, false, false]);
-    const checkboxFunctions = [sizeByEvidence, positionByAgreement, sortByDirection];
-    const categoryCenters = {}
-    let data = dataSet1;
-    let simulation;
-    
-    // set up svg
-    let svg;
-    const height = 600;
-    const width = 1000;
-    let margin = {top: 100, right: 20, bottom: 20, left: 40}
-
-    // set colors for bubble charts
-    const dimensionColors = {
-      Demographiccharacteristics: "#625D0B",
-      Landtenure: "#5C0601",
-      Livingconditions: "#0B4E8B",
-      Socioeconomicstatus: "#DC8260",
-      Health: "#7F4A89",
-      Riskperception: "#249CB1",
-      Exposure: "#B47D83"
-    }
-
-    // load data and then make chart
-    onMounted(() => {
-      console.log("component mounted");
-        loadDatasets().then(() => {
-            if (selectedDataSet.value.length > 0) {
-                createBeeswarmChart(selectedDataSet);
-            } else {
-                console.error('Error loading data:', error)
-            }
-        });
-    });
-
-    async function loadDatasets() {
-        dataSet1.value = await loadData('determinant_uncertainty.csv');
-        dataSet2.value = await loadData('indicator_uncertainty.csv')
-        // console.log(dataSet1.value);
-        // console.log(dataSet2.value);
-    }
-
-    async function loadData(fileName) {
-        return await d3.csv(publicPath + fileName, d => { 
-            d.level_agreement = +(+d.level_agreement).toFixed(2); 
-            d.evidence_val = +d.evidence_val; 
-            d.sig_value = +d.sig_value; 
-            return d;
-        });
-    };
-
-    // helper function to set up mouse events
-    function createMouseEvents() {
-        const tooltip = d3.selectAll('#beeswarm-chart-container')
-        // const tooltip = d3.select("body")
-            .append("div")
-            .attr("class", "tooltip")
-            .style("opacity", 0);
-
-        function handleMouseOver(event, d) {
-            tooltip
-                .transition().duration(200)
-                .style("opacity", 1);
-        }
-
-        function handleMouseMove(event, d) {
-            const [x, y] = d3.pointer(event); 
-            // console.log(x, y);
-            tooltip
-                .html(`${d.determinant}, Level of Agreement: ${d.level_agreement}`) 
-                .style("left", x + "px")
-                .style("top", y + "px");
-                // console.log("left/X: ", x, " right/Y: ", y);
-            d3.selectAll(".bubble")
-                .filter(function(e) { return e.dimension !== d.dimension; }) // change the opacity of bubbles that do not have the same dimension as the selected bubble
-                .style("opacity", 0.3);
-        }
-
-        function handleMouseOut(d) {
-            tooltip
-                .transition().duration(200)
-                .style("opacity", 0);
-            d3.selectAll(".bubble")
-                .filter(function(e) { return e.dimension !== d.dimension; })
-                .style("opacity", 1);
-        }
-
-        return {handleMouseOver, handleMouseMove, handleMouseOut}
-    }
-    
-    function handleCheckboxChange(index) {
-      // console.log(checkboxStates);
-      // console.log(checkboxStates.value[index]);
-      // Call the corresponding function based on the index
-      checkboxFunctions[index](checkboxStates.value[index]);    
-    }
-
-    // call helper function
-    const { handleMouseOver, handleMouseMove, handleMouseOut } = createMouseEvents();
-
-    function createScales(data) {
-        // set x axis scale based on level of agreement
-        const xScale = d3.scaleLinear()
-            .domain([40, d3.max(data.value, d => d.level_agreement)])
-            .range([margin.left+ 125, width-100]);
-                
-        // 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]);
-
-        return { xScale, radiusScale}
-    }
-
-    function createBeeswarmChart() {
-      svg = d3
-        .selectAll('#beeswarm-chart-container')
-        .append('svg') 
-        .attr('class', 'beeswarmSvg')
-        .attr('width', width)
-        .attr('height', height)
-
-      const radius = 10
-
-      const categories = Array.from(new Set(data.value.map((d) => d.dimension)))
-      // console.log(categories)
-      // const categoryCenters = {}
-
-      const numRows = 2 //Math.ceil(Math.sqrt(categories.length)); // Number of rows for grid layout
-      const numCols = 4 //Math.ceil(categories.length / numRows); // Number of columns
-      const colWidth = width / numCols
-      const rowHeight = height / numRows
-
-      categories.forEach((category, index) => {
-        let col = index % numCols // Column index
-        let row = Math.floor(index / numCols) // Row index
-
-        // Offset columns in the second row
-        if (row === 1) {
-          col += 0.5 // Offset by half a column width
-        }
-
-        // Calculate the center position
-        categoryCenters[category] = {
-          x: colWidth * col + colWidth / 2,
-          y: rowHeight * row + rowHeight / 2
-        }
-      })
-
-      data.value.forEach((d) => {
-        // Add randomness to the initial positions
-        const center = categoryCenters[d.dimension]
-        d.x = center.x + (Math.random() - 0.5) * 50 // Adjust randomness factor (50 here) as needed
-        d.y = center.y + (Math.random() - 0.5) * 50
-      })
-
-      // define forces that control the bubbles
-      const forceX = d3.forceX((d) => categoryCenters[d.dimension].x).strength(0.2)
-      const forceY = d3.forceY((d) => categoryCenters[d.dimension].y).strength(0.1)
-      const forceCollide = d3.forceCollide(radius + 2)
-      const forceManyBody = d3.forceManyBody().strength(-15) // Adjust the strength as needed
-
-      // add bubbles to the page
-      const bubbles = svg
-        .selectAll('.bubble')
-        .data(data.value)
-        .enter()
-        .append('circle')
-        .attr('class', 'bubble')
-        .attr('r', radius)
-        .style('fill', (d) => dimensionColors[d.dimension.replace(' ', '')])
-
-      const simulation = d3
-        .forceSimulation()
-        .force('x', forceX)
-        .force('y', forceY)
-        .force('collide', forceCollide)
-        .force('charge', forceManyBody)
-        .nodes(data.value)
-        .on('tick', ticked)
-        .alpha(0.2)
-        .restart()
-
-      bubbles
-        .on('mouseover', handleMouseOver)
-        .on('mousemove', handleMouseMove)
-        .on('mouseout', handleMouseOut)
-
-      function ticked() {
-        bubbles.attr('cx', (d) => d.x).attr('cy', (d) => d.y)
-      }
-    }
-
-    function sizeByEvidence(checked) {
-      if (checked){
-        const { radiusScale } = createScales(data)
-        
-        const forceCollide = d3.forceCollide((d) => radiusScale(d.evidence_val) + 2)
-        const forceManyBody = d3.forceManyBody().strength(15) // Adjust the strength as needed
-
-        const bubbles = svg.selectAll('.bubble')
-          .attr('r', d => radiusScale(d.evidence_val)) // size bubbles based on evidence_val
-        
-        const simulation = d3
-          .forceSimulation()
-          // .force('x', forceX)
-          // .force('y', forceY)
-          .force('collide', forceCollide)
-          .force('charge', forceManyBody)
-          .nodes(data.value)
-          .on('tick', ticked)
-          .alpha(0.2)
-          .restart()
-        
-        function ticked() {
-          bubbles.attr('cx', (d) => d.x).attr('cy', (d) => d.y)
-        }
-      } else {
-        const radius = 10
-
-        const forceX = d3.forceX((d) => categoryCenters[d.dimension].x).strength(0.2)
-        const forceY = d3.forceY((d) => categoryCenters[d.dimension].y).strength(0.1)
-        const forceCollide = d3.forceCollide(radius + 2)
-        const forceManyBody = d3.forceManyBody().strength(-15) // Adjust the strength as needed
-        
-        const bubbles = svg.selectAll('.bubble')
-          .attr('r', radius)
-        
-          const simulation = d3
-          .forceSimulation()
-          .force('x', forceX)
-          .force('y', forceY)
-          .force('collide', forceCollide)
-          .force('charge', forceManyBody)
-          .nodes(data.value)
-          .on('tick', ticked)
-          .alpha(0.2)
-          .restart()
-        
-        function ticked() {
-          bubbles.attr('cx', (d) => d.x).attr('cy', (d) => d.y)
-        }
-      }
-    }
-
-    function positionByAgreement(checked) {
-      if (checked) {      
-        const { xScale, radiusScale} = createScales(data);
-
-        const xAxis = svg.append('g')
-          .attr("transform", "translate(0," + (height - 50) + ")")
-          .call(d3.axisBottom(xScale))
-
-        // add label to x axis
-        svg.append('text')
-          .attr("class", "xLabel")
-          .attr("text-anchor", "middle")
-          .attr("x", width/2)
-          .attr("y", height-10)
-          .text("Level of Agreement");
-        
-        const forceX = d3.forceX(d => xScale(d.level_agreement)).strength(1);
-        const forceY = d3.forceY((height/1.5) - (margin.bottom/2))//.strength(0.1);
-        const forceCollide = d3.forceCollide(d => radiusScale(d.evidence_val) + 2); //forceCollide for bubbles sized by evidence_val
-        const forceManyBody = d3.forceManyBody().strength(-15); // Adjust the strength as needed
-        
-        const bubbles = svg.selectAll(".bubble")
-
-        simulation = d3.forceSimulation()
-          .force("x", forceX)
-          .force("y", forceY)
-          .force("collide", forceCollide)
-          .force("charge", forceManyBody)
-          .nodes(data.value)
-          .on("tick", ticked)
-          .alpha(.2)
-          .restart();
-
-        function ticked() {
-          bubbles
-            .attr("cx", d => d.x)
-            .attr("cy", d => d.y);
-        }
-      } else {
-
-      }  
-    }
-
-    function sortByDirection() {
-      const { xScale, radiusScale} = createScales(data);
-      
-      var yScale = d3.scaleBand()
-        .domain(data.value.map(function(d) { return d.sig_name; }))
-        .range([margin.top, height])
-
-      const bubbles = svg.selectAll(".bubble")
-
-      // const forceX = d3.forceX(d => xScale(d.level_agreement)).strength(.4);
-      const forceY = d3.forceY(d => yScale(d.sig_name)).strength(.4)
-      const forceCollide = d3.forceCollide(d => radiusScale(d.evidence_val) + 1); //forceCollide for bubbles sized by evidence_val
-      const forceManyBody = d3.forceManyBody().strength(-15); // Adjust the strength as needed
-      
-      simulation = d3.forceSimulation()
-        // .force("x", forceX)
-        .force("y", forceY)
-        .force("collide", forceCollide)
-        .force("charge", forceManyBody)
-        .nodes(data.value)
-        .on("tick", ticked)
-        .alpha(.2)
-        .restart();
-
-      function ticked() {
-        bubbles
-          .attr("cx", d => d.x)
-          .attr("cy", d => d.y);
-      }
-    }
-
-</script>
-  
-<style scoped lang="scss">
-$switchWidth: 12rem;
-#toggle-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    margin: 20px 0; /* Add some margin to give space around the toggle container */
-}
-
-#checkbox1-container,
-#checkbox2-container,
-#checkbox3-container {
-    display: flex;
-    align-items: center;
-    margin: 0 10px; /* Add some space between the checkboxes */
-}
-
-#checkbox1-container label,
-#checkbox2-container label,
-#checkbox3-container label {
-    margin-left: 5px; /* Add space between the checkbox and the label */
-    font-size: 2rem; /* Increase label font size if needed */
-}
-
-#checkbox1,
-#checkbox2,
-#checkbox3 {
-    transform: scale(1.5); /* Adjust the scale to make checkboxes bigger */
-    margin-right: 10px; /* Add some space between checkbox and label */
-}
-
-.graph-buttons-switch {
-    display: flex;
-    height: 2.8rem;
-    width: $switchWidth * 2.03;
-    border-radius: 0.2rem;
-    position: relative;
-    margin: 0rem 0.5rem 0rem 0.5rem;
-    background: rgba(0, 0, 0, 0.3);
-    -webkit-box-shadow: inset 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1), 0 0.1remx rgba(255, 255, 255, 0.1);
-    box-shadow: inset 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1), 0 0.1rem rgba(255, 255, 255, 0.1);
-
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror HTML */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
-
-    @media screen and (max-width: 600px) {
-        height: 2.6rem;
-    }
-}
-
-.graph-buttons-switch-label {
-    position: relative;
-    z-index: 2;
-    float: left;
-    width: $switchWidth;
-    line-height: 2.4rem;
-    text-align: center;
-    cursor: pointer;
-
-    @media screen and (max-width: 600px) {
-        line-height: 2.2rem;
-        width: $switchWidth * 1.02;
-    }
-}
-
-.graph-buttons-switch-label-off {
-    padding-left: 0.2rem;
-    padding-right: 0.2rem;
-}
-
-.graph-buttons-switch-label-on {
-    padding-left: 0.2rem;
-    padding-right: 0.2rem;
-}
-
-.graph-buttons-switch-input {
-    display: none;
-}
-
-.graph-buttons-switch-input:checked + .graph-buttons-switch-label {
-    font-weight: bold;
-    -webkit-transition: 0.3s ease-out;
-    -moz-transition: 0.3s ease-out;
-    -o-transition: 0.3s ease-out;
-    transition: 0.3s ease-out;
-}
-
-.graph-buttons-switch-input:checked + .graph-buttons-switch-label-on ~ .graph-buttons-switch-selection {
-    left: $switchWidth;
-}
-
-.graph-buttons-switch-selection {
-    display: block;
-    position: absolute;
-    z-index: 1;
-    top: 0.2rem;
-    left: 0.2rem;
-    width: $switchWidth;
-    height: 2.4rem;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 0.2rem;
-    -webkit-box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.6), 0 0 0.2rem rgba(0, 0, 0, 0.3);
-    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.6), 0 0 0.2rem rgba(0, 0, 0, 0.3);
-    -webkit-transition: left 0.3s ease-out, background 0.3s;
-    -moz-transition: left 0.3s ease-out, background 0.3s;
-    -o-transition: left 0.3s ease-out, background 0.3s;
-    transition: left 0.3s ease-out, background 0.3s;
-
-    @media screen and (max-width: 600px) {
-        height: 2.2rem;
-    }
-}
-
-#beeswarm-chart-container {
-    text-align: center;
-    position: relative;
-}
-
-#beeswarm-chart-container svg {
-    max-width: 100%;
-    max-height: 100%;
-    height: auto; /* Maintain aspect ratio */
-    display: inline-block;
-}
-
-.bubble {
-    stroke: black;
-    stroke-width: 2px; 
-    fill-opacity: 0.8; 
-}
-
-.chart-text {
-    user-select: none;
-}
-
-.tooltip {
-    font-size: 16px;
-    background-color: white;
-    border: solid;
-    border-width: 2px;
-    border-radius: 5px;
-    padding: 5px;
-    position: absolute;
-}
-
-text.xLabel  {
-    font-weight: 600;
-}
-</style>
-  
\ No newline at end of file
diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1b56fa0223cec82d82e9e7e00e98c511a7576a62
--- /dev/null
+++ b/src/components/BeeswarmChart.vue
@@ -0,0 +1,362 @@
+<template>
+    <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 
+          <span 
+            :class="['highlight', 'Demographiccharacteristics', { checked: isChecked.Demographiccharacteristics }]" 
+            @click="toggleCategory('Demographiccharacteristics')"
+          >
+            demographic characteristics
+          </span>,
+          <span 
+            :class="['highlight', 'Health', { checked: isChecked.Health }]" 
+            @click="toggleCategory('Health')"
+          >
+            health
+          </span>, 
+          <span 
+            :class="['highlight', 'Livingconditions', { checked: isChecked.Livingconditions }]" 
+            @click="toggleCategory('Livingconditions')"
+          >
+            living conditions
+          </span>, 
+          <span 
+            :class="['highlight', 'Socioeconomicstatus', { checked: isChecked.Socioeconomicstatus }]" 
+            @click="toggleCategory('Socioeconomicstatus')"
+          >
+            socioeconomic status
+          </span>,
+          <span 
+            :class="['highlight', 'Riskperception', { checked: isChecked.Riskperception }]" 
+            @click="toggleCategory('Riskperception')"
+          >
+            risk perception
+          </span>,
+          <span 
+            :class="['highlight', 'Landtenure', { checked: isChecked.Landtenure }]" 
+            @click="toggleCategory('Landtenure')"
+          >
+            land tenure
+          </span>, and 
+          <span 
+            :class="['highlight', 'Exposure', { checked: isChecked.Exposure }]" 
+            @click="toggleCategory('Exposure')"
+          >
+            exposure to stressors
+          </span> (like drought or pollution).
+        </p>
+      </div>
+      <div id="beeswarm-chart-container"></div>
+    </section>
+  </template>
+  
+  <script setup>
+  import { onMounted, ref, watch } from "vue";
+  import * as d3 from 'd3';
+  
+  // Global variables 
+  const publicPath = import.meta.env.BASE_URL;
+  const dataSet1 = ref([]); 
+  const dataSet2 = ref([]); 
+  const selectedDataSet = ref('dataSet1');
+  const data = ref([]);
+  let simulation;
+  
+  // Set up SVG
+  let svg;
+  const height = 800;
+  const width = 800;
+  const margin = { top: 50, right: 20, bottom: 50, left: 50 };
+  
+  const isChecked = ref({
+    Demographiccharacteristics: true,
+    Health: true,
+    Livingconditions: true,
+    Socioeconomicstatus: true,
+    Riskperception: true,
+    Landtenure: true,
+    Exposure: true
+  });
+  
+  // Set colors for bubble charts
+  const dimensionColors = {
+    Demographiccharacteristics: "#092836",
+    Landtenure: "#1b695e",
+    Livingconditions: "#7a5195",
+    Socioeconomicstatus: "#2a468f",
+    Health: "#ef5675",
+    Riskperception: "#ff764a",
+    Exposure: "#ffa600"
+  };
+  
+  // Load data and then make chart
+  onMounted(async () => {
+    try {
+      await loadDatasets();
+      data.value = selectedDataSet.value === 'dataSet1' ? dataSet1.value : dataSet2.value;
+      if (data.value.length > 0) {
+        createBeeswarmChart();
+      } else {
+        console.error('Error loading data');
+      }
+    } catch (error) {
+      console.error('Error during component mounting', error);
+    }
+  });
+  
+  async function loadDatasets() {
+    try {
+      dataSet1.value = await loadData('determinant_uncertainty.csv');
+      dataSet2.value = await loadData('indicator_uncertainty.csv');
+      console.log('data in')
+    } catch (error) {
+      console.error('Error loading datasets', error);
+    }
+  }
+  
+  async function loadData(fileName) {
+    try {
+      const data = await d3.csv(publicPath + fileName, d => { 
+        d.level_agreement = +(+d.level_agreement).toFixed(2); 
+        d.evidence_val = +d.evidence_val; 
+        d.sig_value = +d.sig_value; 
+        return d;
+      });
+      return data;
+    } catch (error) {
+      console.error(`Error loading data from ${fileName}`, error);
+      return [];
+    }
+  }
+  // make beeswarm of determinants
+  function createBeeswarmChart() {
+    svg = d3
+      .select('#beeswarm-chart-container')
+      .append('svg')
+      .attr('class', 'beeswarmSvg')
+      .attr('width', width)
+      .attr('height', height);
+  
+    const yScale = d3.scaleLinear()
+      .domain([30, d3.max(data.value, d => d.level_agreement)])
+      .range([height-margin.bottom, margin.top]);
+    
+    // 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, 90]);
+  
+    const yAxis = svg.append('g')
+      .attr("transform", "translate(100, 0)")
+      .call(d3.axisLeft(yScale).ticks(5))
+      .attr("stroke-width", 2)
+      .attr("font-size", 20);
+  
+    // Add label to y axis
+    svg.append('text')
+    .attr("class", "yLabel")
+    .attr("text-anchor", "left")
+    .attr("font-weight", 700)
+    .attr("transform", `translate(${margin.left}, ${margin.top/2})`)
+    .text("Level of Agreement");
+
+    svg.append('text')
+      .attr("class", "yLabel")
+      .attr("text-anchor", "left")
+      .attr("font-weight", 700)
+      .attr("transform", `translate(${margin.left}, ${height - (margin.bottom/2)})`)
+      .text("Inconclusive");
+
+  
+    // Set forces
+    const forceY = d3.forceY(d => yScale(d.level_agreement)).strength(0.9);
+    const forceX = d3.forceX(margin.left + (width / 2)).strength(0.1);
+    const forceCollide = d3.forceCollide(d => radiusScale(d.evidence_val) + 2).iterations(16);
+    const forceManyBody = d3.forceManyBody().strength(-10);
+  
+    const bubbles = svg
+      .selectAll('.bubble')
+      .data(data.value)
+      .enter()
+      .append('circle')
+      .attr('class', 'bubble')
+      .attr('r', d => radiusScale(d.evidence_val))
+      .style('fill', d => dimensionColors[d.dimension.replace(' ', '')]);
+  
+    // Run simulation
+    simulation = d3.forceSimulation()
+      .force('x', forceX)
+      .force('y', forceY)
+      .force('collide', forceCollide)
+      .force('charge', forceManyBody)
+      .nodes(data.value)
+      .on('tick', ticked)
+      .alpha(0.75)
+      .alphaDecay(0.03);
+  
+      function ticked() {
+        bubbles
+          .attr("cx", d => Math.max(margin.left +radiusScale(d.evidence_val), Math.min(width - margin.right - radiusScale(d.evidence_val), d.x)))
+          .attr("cy", d => Math.max(radiusScale(d.evidence_val), Math.min(height - radiusScale(d.evidence_val), d.y)))
+          .each(d => { d.y = Math.max(radiusScale(d.evidence_val), Math.min(height - radiusScale(d.evidence_val), yScale(d.level_agreement))); });
+      }
+  }
+  
+  function toggleCategory(category) {
+    //console.log(`Toggle category called for: ${category}`);
+    isChecked.value[category] = !isChecked.value[category];
+    console.log(`Category toggled: ${category}, new value: ${isChecked.value[category]}`);
+    updateChart();
+  }
+  
+  function updateChart() {
+    console.log('Update chart called');
+    const yScale = d3.scaleLinear()
+      .domain([30, d3.max(data.value, d => d.level_agreement)])
+      .range([height-margin.bottom, margin.top]);
+  
+    // 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, 90]);
+  
+    // Filter data based on active categories
+    const activeCategories = Object.keys(isChecked.value).filter(category => isChecked.value[category]);
+    const dataPoints = data.value.filter(d => activeCategories.includes(d.dimension.replace(' ', '')));
+    console.log('Active categories:', activeCategories);
+    console.log('Filtered data points:', dataPoints);
+  
+    // Update existing bubbles and add new bubbles
+    const bubbles = svg.selectAll(".bubble")
+      .data(dataPoints, d => d.id);
+  
+    // Remove old bubbles
+    bubbles.exit().remove();
+  
+    // Update existing bubbles
+    bubbles
+      .attr('r', d => radiusScale(d.evidence_val))
+      .style('fill', d => dimensionColors[d.dimension.replace(' ', '')]);
+  
+    // Add new bubbles
+    bubbles.enter()
+      .append('circle')
+      .attr('class', 'bubble')
+      .attr('r', d => radiusScale(d.evidence_val))
+      .style('fill', d => dimensionColors[d.dimension.replace(' ', '')])
+      .merge(bubbles)  // Merge to apply forces to new and existing bubbles
+      .attr('cx', d => d.x)  // Use existing x position
+      .attr('cy', d => d.y);
+  
+    // Restart simulation with new data
+    simulation.nodes(dataPoints)
+      .force('x', forceX)
+      .force('y', forceY)
+      .force('collide', forceCollide)
+      .force('charge', forceManyBody)
+      .alpha(0.2)
+      .restart();
+  }
+  </script>
+  
+  <style scoped lang="scss">
+  $switchWidth: 12rem;
+  $Demographiccharacteristics: #092836;
+  $Landtenure: #1b695e;
+  $Livingconditions: #7a5195;
+  $Socioeconomicstatus: #2a468f;
+  $Health: #ef5675;
+  $Riskperception: #ff764a;
+  $Exposure: #ffa600;
+  
+  #beeswarm-chart-container {
+      text-align: center;
+      position: relative;
+  }
+  
+  #beeswarm-chart-container svg {
+      max-width: 100%;
+      max-height: 100%;
+      height: auto; /* Maintain aspect ratio */
+      display: inline-block;
+  }
+  
+  .bubble {
+      stroke: black;
+      stroke-width: 2px; 
+      fill-opacity: 0.8; 
+  }
+  
+  .chart-text {
+      user-select: none;
+  }
+  .yLabel {
+      font-weight: bold;
+  }
+  
+  .highlight {
+      color: white;
+      padding: 0.25px 5px;
+      border-radius: 10px;
+      white-space: nowrap;
+      font-weight: bold;
+      cursor: pointer; /* Add cursor pointer for better UX */
+      transition: all 0.1s; /* Smooth transition for background color and border */
+  }
+  
+  .highlight:not(.checked) {
+      background-color: white;
+      border: 2px solid;
+  }
+  .highlight.Demographiccharacteristics {
+      background-color: $Demographiccharacteristics;
+  }
+  .highlight.Demographiccharacteristics:not(.checked) {
+      color: $Demographiccharacteristics;
+      border-color: $Demographiccharacteristics;
+  }
+  .highlight.Landtenure {
+      background-color: $Landtenure;
+  }
+  .highlight.Landtenure:not(.checked) {
+      color: $Landtenure;
+      border-color: $Landtenure;
+  }
+  .highlight.Livingconditions {
+      background-color: $Livingconditions;
+  }
+  .highlight.Livingconditions:not(.checked) {
+      color: $Livingconditions;
+      border-color: $Livingconditions;
+  }
+  .highlight.Socioeconomicstatus {
+      background-color: $Socioeconomicstatus;
+  }
+  .highlight.Socioeconomicstatus:not(.checked) {
+      color: $Socioeconomicstatus;
+      border-color: $Socioeconomicstatus;
+  }
+  .highlight.Health {
+      background-color: $Health;
+  }
+  .highlight.Health:not(.checked) {
+      color: $Health;
+      border-color: $Health;
+  }
+  .highlight.Riskperception {
+      background-color: $Riskperception;
+  }
+  .highlight.Riskperception:not(.checked) {
+      color: $Riskperception;
+      border-color: $Riskperception;
+  }
+  .highlight.Exposure {
+      background-color: $Exposure;
+  }
+  .highlight.Exposure:not(.checked) {
+      color: $Exposure;
+      border-color: $Exposure;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/BubbleChart.vue b/src/components/BubbleChart.vue
deleted file mode 100644
index 8515234c5d728a7a8748f06150f2495df024fb1f..0000000000000000000000000000000000000000
--- a/src/components/BubbleChart.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<template>
-  <section id="bubble-chart">
-    <div
-        id="title"
-        class="text-container title-text"
-    >
-        <h3 v-html="bubbleText.title"/>
-    </div>
-    <div
-        id="text1"
-        class="text-container"
-    >
-        <p v-html="bubbleText.paragraph1"/>
-    </div>
-    <div id="bubble-chart-container"></div>
-    <div
-        id="text2"
-        class="text-container"
-    >
-        <p v-html="bubbleText.paragraph2"/>
-    </div>
-  </section>
-</template>
-  
-<script setup>
-    import { onMounted, ref } from "vue";
-    import { isMobile } from 'mobile-device-detect';
-    import * as d3 from 'd3';
-    import bubbleChartText from "./../assets/text/bubbleChartText"
-
-    // global variables 
-    const publicPath = import.meta.env.BASE_URL;
-    const data = ref([]); 
-    const mobileView = isMobile;
-    const bubbleText = bubbleChartText.bubbleChartText;
-
-    // load data and then make chart
-    onMounted(() => {
-        loadData().then(() => {
-            if (data.value.length > 0) {
-            createBubbleChart();
-            }
-        });
-    });
-
-    async function loadData() {
-        // console.log(data);
-        data.value = await d3.csv(publicPath + 'determinant_uncertainty.csv', d => {
-            d.level_agreement = +d.level_agreement; 
-            d.evidence_val = +d.evidence_val; 
-            return d;
-        });
-    }
-
-    function createBubbleChart() {
-        // ... SVG setup ...
-        const width = 1000; // Set your width
-        const height = 800; // Set your height
-        const margin = { top: 20, right: 20, bottom: 20, left: 20 };
-
-        const svg = d3.select("#bubble-chart-container")
-                        .append('svg')
-                        .attr('width', width)
-                        .attr('height', height);
-
-        // Define scales and axes
-        const categories = Array.from(new Set(data.value.map(d => d.dimension))); // Unique categories
-        // console.log(categories);
-        const categoryCenters = {};
-        const spacing = width / (categories.length + 1);
-
-        // positioning for the bubble clusters
-        const numRows = 2//Math.ceil(Math.sqrt(categories.length)); // Number of rows for grid layout
-        const numCols = 4//Math.ceil(categories.length / numRows); // Number of columns
-        const colWidth = width / numCols;
-        const rowHeight = height / numRows;
-
-        categories.forEach((category, index) => {
-            let col = index % numCols;  // Column index
-            let row = Math.floor(index / numCols);  // Row index
-
-            // Offset columns in the second row
-            if (row === 1) {
-                col += 0.5;  // Offset by half a column width
-            }
-
-            // Calculate the center position
-            categoryCenters[category] = { 
-                x: colWidth * col + colWidth / 2, 
-                y: rowHeight * row + rowHeight / 2 
-            };
-        });
-
-        // color scale for dimensions
-        const colorScale = d3.scaleOrdinal(d3.schemeDark2)
-            .domain(categories)
-        // to manually select the colors
-            //const colorScale = d3.scaleOrdinal()
-        //    .domain(['category1', 'category2', 'category3', ...])
-        //    .range(['#1f77b4', '#ff7f0e', '#2ca02c', ...]); // Using the set of distinct colors
-
-        // scale bubble size to evidence
-        const radiusScale = d3.scaleLinear()
-            .domain([d3.min(data.value, d => d.evidence_val), d3.max(data.value, d => d.evidence_val)])
-            .range([10, 50]);
-
-        // set starting positions for bubbles when they first appear
-        data.value.forEach(d => {
-            // Add randomness to the initial positions
-            const center = categoryCenters[d.dimension];
-            d.x = center.x + (Math.random() - 0.5) * 50; // Adjust randomness factor (50 here) as needed
-            d.y = center.y + (Math.random() - 0.5) * 50;
-        });
-
-        // define forces that control the bubbles
-        const forceX = d3.forceX(d => categoryCenters[d.dimension].x).strength(0.2);
-        const forceY = d3.forceY(d => categoryCenters[d.dimension].y).strength(0.1);
-        const forceCollide = d3.forceCollide(d => radiusScale(d.evidence_val) + 2);
-        const forceManyBody = d3.forceManyBody().strength(-15); // Adjust the strength as needed
-
-        // add bubbles to the page
-        const bubbles = svg.selectAll(".bubble")
-            .data(data.value)
-            .enter().append("circle")
-            .attr("class", "bubble")
-            .attr('r', d => radiusScale(d.evidence_val))
-            .style('fill',  d => colorScale(d.dimension));
-
-        // add mouseover effect 
-        bubbles
-            .on("mouseover", handleMouseOver)
-            .on("mousemove", handleMouseMove)
-            .on("mouseout", handleMouseOut);
-
-        // run force simulation
-        const simulation = d3.forceSimulation()
-            .force("x", forceX)
-            .force("y", forceY)
-            .force("collide", forceCollide)
-            .force("charge", forceManyBody)
-            .nodes(data.value)
-            .on("tick", ticked)
-            .alpha(.2)
-            .restart();
-
-        // ticking function to move bubbles from initial position to resting (I think this is what it's doing?)
-        function ticked() {
-            bubbles
-                .attr("cx", d => d.x)
-                .attr("cy", d => d.y);
-        }
-
-        // drag n drop effect
-        const drag = d3.drag()
-            .on("start", dragstarted)
-            .on("drag", dragged)
-            .on("end", dragended);
-
-            bubbles.call(drag);
-
-        // let the user move them around, but pull back to their resting spot
-        function dragstarted(event, d) {
-            if (!event.active) simulation.alphaTarget(0.3).restart();
-            d.fx = d.x;
-            d.fy = d.y;
-        }
-
-        function dragged(event, d) {
-            d.fx = event.x;
-            d.fy = event.y;
-        }
-
-        function dragended(event, d) {
-            if (!event.active) simulation.alphaTarget(0);
-            d.fx = null;
-            d.fy = null;
-        }
-           
-        // basic tooltip styling 
-        const tooltip = d3.select("#bubble-chart-container")
-            .append("div")
-            .style("opacity", 0)
-            .attr("class", "tooltip")
-            .style("font-size", "16px") // Style as needed
-            .style("background-color", "white")
-            .style("border", "solid")
-            .style("border-width", "2px")
-            .style("border-radius", "5px")
-            .style("padding", "5px")
-            .style("position", "absolute")
-            .style("pointer-events", "none")
-
-        // TODO: use animation to fade in and look nice
-        // position tooltip based on pointer. change opacity of bubble when mouseMove
-        function handleMouseOver(event, d) {
-            tooltip
-                .transition().duration(200)
-                .style("opacity", 1);
-        }
-
-        function handleMouseMove(event, d) {
-            const [x, y] = d3.pointer(event); 
-            const containerRect = document.getElementById('bubble-chart-container').getBoundingClientRect();
-            // console.log(containerRect);
-            tooltip
-                .html(`${d.determinant}`)
-                .style("left", (x) + "px")
-                .style("top", (y) + "px");
-                // console.log("left/X: ", x, " right/Y: ", y);
-            d3.select(this)
-                .style("opacity", 0.8);
-        }
-
-        function handleMouseOut() {
-            tooltip
-                .transition().duration(200)
-                .style("opacity", 0);
-            d3.select(this)
-                .style("opacity", 1);
-        }
-    }
-
-</script>
-  
-<style scoped lang="scss">
-
-.text-container {
-    min-width: 30vw;
-    max-width: 70rem;
-    margin: 0 auto 0 auto;
-    padding: 1rem 1rem 1rem 0rem;   
-    left:0;
-    @media screen and (max-width: 600px) {
-      max-width: 95vw;
-      padding: 0.5rem;
-    }  
-}
-
-.title-text {
-    width: 100%;  
-}
-
-.bubble {
-    stroke: black; /* Dark outline */
-    stroke-width: 2px; /* Thicker outline */
-    fill-opacity: 0.8; /* Higher fill opacity */
-}
-
-#bubble-chart-container {
-    text-align: center;
-    position: relative;
-}
-
-#bubble-chart-container svg {
-    max-width: 100%;
-    max-height: 100%;
-    height: auto; /* Maintain aspect ratio */
-    display: inline-block;
-}
-
-.chart-text {
-    user-select: none;
-}
-
-</style>
-
-  
\ No newline at end of file
diff --git a/src/components/Dendrogram.vue b/src/components/Dendrogram.vue
index 5f692fb8cb3bc13e1fdee1fa8f2471541fef8aff..207ae8f28684de6d2c2e614182826840d9b61b6d 100644
--- a/src/components/Dendrogram.vue
+++ b/src/components/Dendrogram.vue
@@ -23,13 +23,13 @@
 import { onMounted, ref } from 'vue'
 import { isMobile } from 'mobile-device-detect';
 import * as d3 from 'd3'
-import metaAnalysisText from './../assets/text/metaAnalysisText';
+import text from "./../assets/text/text.js";
 
 // global variables
 const publicPath = import.meta.env.BASE_URL;
 const data = ref([]);
 const mobileView = isMobile;
-const metaText = metaAnalysisText.metaAnalysisText;
+const metaText = text.components.metaAnalysisText;
 let textSize;
 
 // const width = 1000;
@@ -40,13 +40,13 @@ let textSize;
 
 // set colors for lines
 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
diff --git a/src/components/Maps.vue b/src/components/Maps.vue
index bd666e86e89e8e6246a54ec5773be49cd9f7dbb3..efe64770447a6ad6df5a0aeb446eea3589f62538 100644
--- a/src/components/Maps.vue
+++ b/src/components/Maps.vue
@@ -4,76 +4,146 @@
       id="title"
       class="text-container title-text"
     >
-      <h3>Case studies across the Western states</h3>
-      <p>Orange = Positively correlated to water insecurity conditions</p>
-  <p>Blue = Negatively correlated to water insecurity conditions</p><br>
-      <img src="3_visualize/out/tot_households_2022.png" alt="Map of total households 2022">
-      <img src="3_visualize/out/tot_female_households_2022.png" alt="Map of total female led households 2022">
-      <img src="3_visualize/out/med_income_census_2022.png" alt="Map of median income 2022">
-      <img src="3_visualize/out/median_rent_2022.png" alt="Map of median rent 2022">
-      <img src="3_visualize/out/tot_latino_census_2022.png" alt="Map of total latino population 2022">
-      <img src="3_visualize/out/perc_latino_census_2022.png" alt="Map of percent latino population 2022"><br><br>
-      Factors associated with social vulnerability to water insecurity are not equally distributed across the Western United States. Certain races and ethnicities are more heavily concentrated in some geographic areas than in others. Similarly, some counties have much lower median household incomes than other counties do. Understanding where these vulnerable populations live is important information for water-resource managers to make equitable decisions about water availability and use. 
-</div>
-      <!-- <h3 v-html="mapsText.title"/> -->
-    <div id="map-container"></div>
-    <!-- <div
-      id="text1"
-      class="text-container"
-    >
-      <p v-html="mapsText.paragraph1"/>
-    </div> -->
+      <h3><p v-html="mapText.title"></p></h3>
+      <br>
+      <div class="accordion-container">
+        <button class="accordion households-accordion">Households<span class="symbol">+</span></button>
+        <div class="panel">
+          <p v-html="mapText.paragraph1"></p>
+          <img src="@/assets/images/tot_households_2022.png" alt="Choropleth map of total households in the contiguous United States aggregated at the county level where counties with the greatest total households in dark orange include Los Angeles County, California (3,363,093), Harris County, Texas (1,692,896) and  Maricopa County, Arizona (1,665,560). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
+          <img src="@/assets/images/tot_female_households_2022.png" alt="Choropleth map of total female householder (no spouse present) in the contiguous United States aggregated at the county level where counties with the greatest total female householder in dark orange include Los Angeles County, California (494,169), Harris County, Texas (258,518) and  Maricopa County, Arizona (202,699). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
+        </div>
+
+        <button class="accordion income-accordion">Income<span class="symbol">+</span></button>
+        <div class="panel">
+          <p v-html="mapText.paragraph2"></p>
+          <img src="@/assets/images/med_income_census_2022.png" alt="Choropleth map of median household income in the past 12 months (in 2022 inflation-adjusted dollars) in the contiguous United States aggregated at the county level where counties with the greatest median household income in dark orange include Santa Clara County, California (153,792), San Mateo County, California (149,907) and Marin County, California (142,019). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
+        </div>
+
+        <button class="accordion renters-accordion">Renters<span class="symbol">+</span></button>
+        <div class="panel">
+          <p v-html="mapText.paragraph3"></p>
+          <img src="@/assets/images/median_rent_2022.png" alt="Choropleth map of median gross rent in the contiguous United States aggregated at the county level where counties with the greatest median gross rent in dark blue include San Mateo County, California (2,805), Santa Clara County, California (2,719) and Marin County, California (2,487). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
+        </div>
+
+        <button class="accordion latino-accordion">Latino<span class="symbol">+</span></button>
+        <div class="panel">
+          <p v-html="mapText.paragraph4"></p>
+          <img src="@/assets/images/tot_latino_census_2022.png" alt="Choropleth map of total Hispanic or Latino in the contiguous United States aggregated at the county level where counties with the greatest total Hispanic or Latino in dark orange include Los Angeles County, California (4,837,594), Harris County, Texas (2,076,103) and Maricopa County, Arizona (1,402,753). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
+          <img src="@/assets/images/perc_latino_census_2022.png" alt="Choropleth map of percent of Hispanic or Latino in the contiguous United States aggregated at the county level where counties with the greatest percent Hispanic or Latino in dark orange include Kenedy County, Texas (96.6%), Starr County, Texas (96.2%) and Webb County, Texas (95.4%). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
+        </div>
+
+      </div>
+      <br>
+      <p v-html="mapText.paragraph5"></p>    
+    </div>
   </section>
 </template>
 
-<script>
-  import { onMounted, ref } from "vue";
-  import { isMobile } from 'mobile-device-detect';
-  import * as d3 from 'd3';
-  import mapText from './../assets/text/mapText';
-
-  // global variables
-  const mobileView = isMobile;
-  const mapsText = mapText.mapText;
+<script setup>
+import { onMounted } from 'vue';
+import { isMobile } from 'mobile-device-detect';
+import text from './../assets/text/text.js';
+const mobileView = isMobile;
+const mapText = text.components.mapText;
 
+onMounted(() => {
+  const acc = document.getElementsByClassName("accordion");
+  for (let i = 0; i < acc.length; i++) {
+    acc[i].addEventListener("click", function () {
+      this.classList.toggle("active");
+      const panel = this.nextElementSibling;
+      const symbol = this.querySelector('.symbol');
+      if (panel.style.display === "block") {
+        panel.style.display = "none";
+        symbol.textContent = "+";
+      } else {
+        panel.style.display = "block";
+        symbol.textContent = "-";
+      }
+    });
+  }
+});
 </script>
 
-<style scoped lang="scss">
-  #grid-container-interactive {
-    display: grid;
-    padding: 20px 0 20px 0;
-    gap: 5px;
-    grid-template-columns: 65vw 25vw;
-    grid-template-rows: max-content max-content max-content max-content;
-    grid-template-areas:
-      "title title"
-      "text text"
-      "map legend";
-    justify-content: center;
-    margin: auto;
-    max-width: 90vw;
-    min-width: 90vw;
-    // @media screen and (max-height: 770px) {
-    //   row-gap: 4vh;
-    //   margin: 4rem 0rem 5rem 0rem;
-    // }
-  }
 
-  #grid-title {
-    grid-area: title;
-    align-self: center;
-  }
+<style scoped>
+.accordion {
+  background-color: #eee;
+  color: #fff;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  transition: 0.4s;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 2.5rem;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-weight: 600;
+  position: relative;
+  border: 2px solid transparent;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 15px
+}
 
-  #text {
-    grid-area: text;
-  }
+.accordion.households-accordion {
+  background-color: #092836;
+}
 
-  #map-container {
-    pointer-events: none;
-    grid-area: map;
-    height: 100%;
-    max-height: 70vh;
-  }
+.accordion.income-accordion {
+  background-color: #2A468F;
+}
+
+.accordion.renters-accordion {
+  background-color: #2A468F;
+}
+
+.accordion.latino-accordion {
+  background-color: #092836;
+}
+
+.accordion::before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  border: 2px solid transparent;
+  z-index: -1;
+  transition: border-color 0.3s;
+}
+
+.accordion:hover::before, .accordion.active::before {
+  border-color: #f39c12;
+}
+
+.active, .accordion:hover {
+  background-color: black; 
+}
+
+.panel {
+  display: none;
+  overflow: hidden;
+  border: 3px solid #F0F0F0; 
+  margin-bottom: 15px;
+  margin-top: -15px;
+  border-top-width: 0;
+  border-radius: 0 0 10px 10px;
+}
+
+.panel p {
+  margin: 20px;
+}
 
 
+.symbol {
+  font-size: 32px;
+  font-weight: bold;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/NarrativeIntro.vue b/src/components/NarrativeIntro.vue
index a2d9e8992ef648d0eb0e9093c758b629d2421c16..0d85e0c5974dab101ef0ef8adbc84492c0f5231d 100644
--- a/src/components/NarrativeIntro.vue
+++ b/src/components/NarrativeIntro.vue
@@ -1,175 +1,71 @@
 <template>
-    <header id="grid-container">
-      <div 
-        id="title-container"
-        :class="{ mobile: mobileView}"
-        class="flex-container"
-      >
-        <div class="narrative-text-container">
-          <div id="narrative-text-par">
-            <p>
-              Imagine you live in a big house in the suburbs where clean water flows out of every faucet. There’s enough water for you and your family to grow a nice garden every year. The public water supplier treats the water and maintains the distribution system regularly, so you know the water is safe for you to drink. A small, clean stream flows through town, offering a cool place to swim and play during the hot summer months.
-            </p>
-            <div class="row">
-              <div class="col-6">
-                <img src="@/assets/images/water_security_less-stylized.png" class="img-fluid" style="max-width: 25%; margin-top:20px" />
-              </div>
-            </div>
-          </div>
-          <br> <!-- Add line break here -->
-          <div id="narrative-text-par">
-                    <p>
-                        Now imagine you live in a small rural community on the outskirts of town. You have your own well, but in recent years, you and your neighbors have had to dig deeper and deeper to reach water. Dangerous metals are leaching into the water belowground, but you have no way of treating your water before your family drinks it. Because of an ongoing drought, the sparse vegetation surrounding your house has turned a crispy brown. A nearby pond shrinks each summer and acquires a ghastly green hue as it’s choked by harmful algae blooms. 
-                    </p>
-                    <div class="row">
-                        <div class="col-6">
-                            <img src="@/assets/images/water_insecurity_less-stylized.png" class="img-fluid" style="max-width: 25%; margin-top:20px" />
-                        </div>
-                    </div>
-                </div>
-          <br> <!-- Add line break here -->
-          <div id="narrative-text-par">
-            <p>
-                This nightmarish scene may sound like the backdrop of a post-apocalyptic movie, but this nightmare is the unfortunate reality for many Americans. More than 2.2 million Americans lack running water and basic plumbing in their homes (<a href="https://www.digdeep.org/draining" style="color: blue; text-decoration: underline;" target="_blank">DigDeep 2022</a>), and millions more experience other elements of <span class="tooltip-span">water insecurity</span>, or insufficient access to clean water for livelihoods, development, and human and ecosystem health.
-                <span class="tooltiptext">Populations cannot maintain access to adequate quantities of water at an acceptable quality to sustain livelihoods, development, and human and ecosystem health.</span>
-            </p>
-         </div>
-          <br> <!-- Add line break here -->
-          <div id="narrative-text-par">
-    <p>
-        Though everyone needs and deserves sufficient access to clean water, some people are more likely to experience water insecurity than others. Certain social factors, like demographic characteristics, living conditions, socioeconomic status, and exposure to stressors like drought or pollution, have strong influences on access to clean water. These factors are called “dimensions of <span class="tooltip-span">social vulnerability</span>
-        <span class="tooltiptext">
-            Conditions in which societal factors shape exposure to hazards, susceptibility to suffer harm, and ability to cope and recover from losses".
-        </span>
-        to water insecurity,” and some closely related aspects, <span class="tooltip-span">or determinants,</span> of these dimensions, like age, family structure, and ethnicity, are better understood than others.
-        <span class="tooltiptext">
-            Group of related indicators such as "age" or "family structure".
-        </span>
-    </p>
-</div>
+  <section id="narrativeIntro">
+    <div id="text1" class="text-container">
+      <p v-html="introText.paragraph1"></p>
+    </div>
+    <img src="@/assets/images/water_security_less-stylized.png" class="img" />
+    <div id="text2" class="text-container">
+      <p v-html="introText.paragraph2"></p>
+    </div>
+    <img src="@/assets/images/water_insecurity_less-stylized.png" class="img" />
+    <div id="text3" class="text-container quote">
+      <p v-html="introText.paragraph3"></p>
+    </div>
+    <div id="text4" class="text-container">
+      <p v-html="introText.paragraph4"></p>
+    </div>
+    <div id="text5" class="text-container">
+      <p v-html="introText.paragraph5"></p>
+    </div>
+  </section>
+</template>
 
-<br> <!-- Add line break here -->
-          <div id="narrative-text-par">
-            <p>
-                How much do we know about the influence of these social determinants on water insecurity? Which determinants do we understand well, and which do we need to understand better? Thanks to recent work by a team of researchers at the U.S. Geological Survey (USGS), we can begin answering these questions, taking us one step closer to equitable water access for all. 
-            </p>
-          </div>
-        </div>
-      </div>
-      <div 
-        id="intro-container"
-        :class="{ mobile: mobileView}"
-      > 
-      </div>
-    </header>
-  </template>
-  
-  <script>
-  import { isMobile } from 'mobile-device-detect';
-  
-  export default {
-    name: "NarrativeIntro",
-    components: {
-    },
-    props: {
-      data: Object
-    },
-    data() {
-      return {
-        publicPath: import.meta.env.BASE_URL, // find the files when on different deployment roots
-        mobileView: isMobile, // test for mobile
-      }
-    },
-    mounted(){      
-      const self = this; 
-    }
-  }
+<script setup>
+import { ref } from 'vue';
+import { isMobile } from 'mobile-device-detect';
+import text from './../assets/text/text.js';
+
+const introText = text.components.introNarrative;
+const publicPath = import.meta.env.BASE_URL;
+const data = ref([]);
+const mobileView = isMobile;
 </script>
-  
-<style lang="scss" scoped>
-  #grid-container {
-    display: grid;
-    padding: 20px 0 20px 0;
-    gap: 5px;
-    grid-template-rows: max-content;
-    justify-content: center;
-    margin: auto;
-    max-width: 90vw;
-    min-width: 90vw;
-  }
-  
-#title-container {
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-    width: 100%;
-}
-  
 
+<style scoped>
 .tooltip-span {
   position: relative;
+  cursor: pointer;
   display: inline-block;
-  border-bottom: 1px dotted blue;
-  z-index: 1;
 }
 
 .tooltiptext {
   visibility: hidden;
-  position: absolute;
-  z-index: 1;
-  left: 25%; /* Adjust this value as needed */
-  right: 15%;
-  width: 450px;
-  background-color: rgba(54, 54, 54, 0.95);
+  width: 200px;
+  background-color: #555;
   color: #fff;
   text-align: center;
   border-radius: 6px;
-  padding: 10px;
-  overflow: visible;
-  font-size: 16px !important; /* Increase font size */
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 100%; /* Position the tooltip above the text */
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
 }
 
-.tooltip-span:hover + .tooltiptext {
+.tooltip-span:hover .tooltiptext {
   visibility: visible;
+  opacity: 1;
 }
 
-  #water-security {
-    max-width: 340px;
-    margin: 10px
-  }
-  
-  #water-insecurity {
-    max-width: 340px;
-    margin: 10px
-  }
-  
-  #water-security.mobile, #water-insecurity.mobile {
-    width: 100%;
-  }
-  
-  .narrative-text-container {
-  }
-  
-  .narrative-text-par {
-     font-size: 12px;
-     margin-top: 80px;
-     text-align: left;
-     margin-left: 80px;
-  }
-  
-  #intro-container {
-    padding: 5px 0px 0px 5px;
-  }
-  
-  @media screen and (max-width: 600px) {
-    #title-container {
-      flex-direction: column;
-      align-items: center;
-    }
-  
-    #water-security, #water-insecurity {
-      max-width: 100%;
-      margin: 10px
-    }
-  }
-  </style>
+.text-container {
+  margin-bottom: 20px; /* Add some space between text containers */
+}
+
+#narrativeIntro img {
+  display: block;
+  margin: 20px auto; /* Center the images and add space around them */
+}
+</style>
diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue
index f4a734c1be16894e01785b890958a66b48125323..6110669f9fae4be6729d68d122ded1c092f0bb96 100644
--- a/src/components/VizTitle.vue
+++ b/src/components/VizTitle.vue
@@ -1,62 +1,141 @@
 <template>
   <header id="grid-container">
-    <div id="title-container" :class="{ mobile: mobileView }">
+    <div id="image-container">
       <img
+        ref="heroImage"
         id="title-image"
         :class="{ mobile: mobileView }"
         src="@/assets/images/hero_img_cutout_less-stylized_feather.png"
         alt="Social vulnerability and water insecurity"
+        @load="updateSvgDimensions"
       />
+      <img
+        ref="bwHeroImage"
+        id="bw-title-image"
+        :class="{ mobile: mobileView }"
+        src="@/assets/images/hero_img_cutout_less-stylized_feather.png"
+        alt="Social vulnerability and water insecurity (grayscale)"
+      />
+      <!-- Using svg masks with a circle shape to reveal color image where circles are on top of bw -->
+      <svg ref="overlay" id="overlay" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <mask id="circleMask">
+            <rect width="100%" height="100%" fill="white" />
+            <circle cx="100" cy="100" r="50" fill="black" />
+            <circle cx="200" cy="150" r="30" fill="black" />
+            <circle cx="300" cy="250" r="90" fill="black" />
+            <circle cx="600" cy="200" r="50" fill="black" />
+            <circle cx="700" cy="550" r="100" fill="black" />
+            <circle cx="800" cy="200" r="70" fill="black" />
+            <circle cx="70" cy="310" r="50" fill="black" />
+            <circle cx="500" cy="450" r="130" fill="black" />
+            <circle cx="420" cy="180" r="40" fill="black" />
+            <circle cx="600" cy="200" r="75" fill="black" />
+            <circle cx="700" cy="350" r="130" fill="black" />
+            <circle cx="800" cy="20" r="110" fill="black" />
+          </mask>
+        </defs>
+      </svg>
+    </div>
+      <div id="text-container">
         <h1>Unequal access to water</h1>
         <h3>
-          How societal factors shape exposure to water-related hazards, likelihood to suffer harm, and ability to cope and recover from losses
+          How societal factors shape vulnerability to water insecurity
         </h3>
-    </div>
+      </div>
   </header>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { isMobile } from 'mobile-device-detect';
 
 const mobileView = ref(isMobile);
+const heroImage = ref(null);
+const bwHeroImage = ref(null);
+const overlay = ref(null);
+
+const updateSvgDimensions = () => {
+  if (heroImage.value && bwHeroImage.value && overlay.value) {
+    const { width, height } = heroImage.value.getBoundingClientRect();
+    overlay.value.setAttribute('width', width);
+    overlay.value.setAttribute('height', height);
+    bwHeroImage.value.style.width = `${width}px`;
+    bwHeroImage.value.style.height = `${height}px`;
+    bwHeroImage.value.style.top = '0';
+    bwHeroImage.value.style.left = '0';
+  }
+};
+
+onMounted(() => {
+  updateSvgDimensions();
+  window.addEventListener('resize', updateSvgDimensions);
+});
+
+watch(mobileView, () => {
+  updateSvgDimensions();
+});
 </script>
 
 <style lang="scss" scoped>
-
 #grid-container {
   display: grid;
-  padding: 0px 0;
-  gap: 0px;
-  grid-template-columns: 1fr;
-  grid-template-areas: 
-    "title";
+  grid-template-rows: auto auto;
   width: 100vw;
-  justify-content: center;
   margin: auto;
-  @media screen and (max-width: 600px) {
-    padding: 0 0 20px;
-    grid-template-columns: 100%;
-    grid-template-rows: max-content max-content;
-  }
 }
 
-#title-container  {
-  grid-area: title;
-  text-align: center;
+#image-container {
+  position: relative;
+  width: 100%;
+}
+
+#title-image,
+#bw-title-image {
+  width: 100%;
 }
 
 #title-image {
-  width: 100vw;
-  max-width: 100%;
-  margin: auto;
+  display: block;
+}
+
+#bw-title-image {
+  filter: grayscale(100%);
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none; /* Ensure the grayscale image doesn't interfere with other interactions */
+  mask: url(#circleMask); /* Apply the SVG mask */
 }
 
-h1, h3 {
-  margin-left: 50px; 
-  margin-right: 50px; 
-  margin-top: 20px;
-  text-align: left;  
+#overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none; /* Ensure the SVG overlay doesn't interfere with other interactions */
+}
+
+#text-container {
+  width: 100%;
+  background: rgba(0, 0, 0, 0.95); 
+  color: black; 
+  padding: 20px; 
+  box-sizing: border-box;
+}
+#image-container {
+  color: black; 
+  background: rgba(0, 0, 0, 0.95);
+}
+
+h1 {
+  margin: -20px 20px;
+  color: white;
+  text-align: left; /* Optional: Align text to the left */
+}
+h3 {
+  margin: 20px 20px 0px 20px;
+  color: white;
+  text-align: left; /* Optional: Align text to the left */
 }
 
 </style>
diff --git a/src/views/VisualizationView.vue b/src/views/VisualizationView.vue
index aa410e3b09ba00f4a53068eb822c2977e1e52f0e..c40949aa37af613865a311bb8bcf2dcfdba8f0e6 100644
--- a/src/views/VisualizationView.vue
+++ b/src/views/VisualizationView.vue
@@ -1,11 +1,10 @@
 <template>
   <section id="visualization">
     <VizTitle />
+    <BeeswarmChart /> 
     <NarrativeIntro />
-    <BubbleChart />
     <Dendrogram />
     <Maps />
-    <!-- <Beeswarm /> -->
     <ReferencesSection />
     <AuthorshipSection />
   </section>
@@ -14,8 +13,7 @@
 <script setup>
   import VizTitle from '.././components/VizTitle.vue'
   import NarrativeIntro from '.././components/NarrativeIntro.vue'
-  import BubbleChart from '../components/BubbleChart.vue'
-  import Beeswarm from '../components/Beeswarm.vue'
+  import BeeswarmChart from '../components/BeeswarmChart.vue'
   import Dendrogram from '.././components/Dendrogram.vue'
   import Maps from '.././components/Maps.vue'
   import ReferencesSection from '.././components/References.vue'