Merge branch 'cleaning-edits' into 'main'

Add tooltip definitions for choropleth map, intersectionality, and EJ

See merge request !52

src/assets/text/text.js

@@ -5,7 +5,7 @@ export default {
       title: "",
       paragraph1: `Imagine, for example, that 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 dreadful scene may sound unimaginable, but this nightmare is the unfortunate reality for many Americans. More than 2.2 million Americans lack running water and basic plumbing in their home <a href='https://www.digdeep.org/draining' target='_blank'>(DigDeep, 2022)</a>, and roughly 3% of community water systems have severe issues with water quality <a href='https://www.nature.com/articles/s41467-021-23898-z' target='_blank'>(Mueller and Gasteyer, 2021)</a>. Limited access to clean water may be triggered by a single event, like the <a href='storymaps target='_blank'>derailing of the train carrying hazardous chemicals in East Palestine, Ohio,</a> or may be the long-term result of aging infrastructure, as was the case with the <a href='https://www.npr.org/sections/thetwo-way/2016/04/20/465545378/lead-laced-water-in-flint-a-step-by-step-look-at-the-makings-of-a-crisis' target='_blank'>dangerously high levels of lead in the drinking water of Flint, Michigan.</a>`,
+      paragraph3: `This dreadful scene may sound unimaginable, but this nightmare is the unfortunate reality for many Americans. More than 2.2 million Americans lack running water and basic plumbing in their home <a href='https://www.digdeep.org/draining' target='_blank'>(DigDeep, 2022)</a>, and roughly 3% of community water systems have severe issues with water quality <a href='https://www.nature.com/articles/s41467-021-23898-z' target='_blank'>(Mueller and Gasteyer, 2021)</a>. Limited access to clean water may be triggered by a single event, like the <a href='https://storymaps.arcgis.com/stories/7f105650f97e4b20839edb65de3b12ce' target='_blank'>derailing of the train carrying hazardous chemicals in East Palestine, Ohio,</a> or may be the long-term result of aging infrastructure, as was the case with the <a href='https://www.npr.org/sections/thetwo-way/2016/04/20/465545378/lead-laced-water-in-flint-a-step-by-step-look-at-the-makings-of-a-crisis' target='_blank'>dangerously high levels of lead in the drinking water of Flint, Michigan.</a>`,
       paragraph4: `Marginalized populations are often disproportionately affected by water insecurity. Communities of color and individuals living below the poverty line are frequently the hardest hit by water-related disasters, lacking the means to safeguard themselves adequately. They may face barriers to relocation or struggle to take time off work, cope with lost wages, or afford medical expenses. In the case of the Flint, Michigan, water crisis, black and low-income communities, who at the time made up <a href='https://apnews.com/general-news-7b2bcfdcc8d74ece9e0cb167a2239745' target='_blank'>57% and 42%</a> of Flint's population, respectively, were some of the socio-economically disadvantaged communities most affected by lead exposure. Regardless of the cause, the risk of experiencing water insecurity is closely related to the level of <span class="tooltip"><span class="tooltip-span">social vulnerability</span><span class="tooltiptext social-vulnerability">Conditions in which societal factors shape exposure to hazards, susceptibility to suffer harm, and ability to cope and recover from losses.</span></span>.`,
     },
     agVersusMunicipalText: {
@@ -19,7 +19,7 @@ export default {
     },
     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 is a county level map of percent occupied households where counties with the greatest percent occupied households, in dark blue, include Dakota County, Minnesota; Lincoln County, South Dakota; and Scott County, Minnesota",
+      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 is a county level map of percent occupied households where counties with the greatest percent occupied households, in dark blue, include Dakota County, Minnesota; Lincoln County, South Dakota; and Scott County, Minnesota.",
       paragraph2: "Low income and impoverished persons are more likely to experience water insecure conditions. Moreover, income inequality is a highly significant predictor of plumbing poverty, meaning your home lacks complete indoor plumbing <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). Counties with the greatest median household income are shown in dark blue and include Santa Clara County, California; San Mateo County, California; and Marin County, California.",
       paragraph3: "As median rent values go up, water insecurity tends to go down, 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>. That said, renters tend to be at a higher risk of damage from water-related hazards compared to homeowners. After disasters, renters are more likely to relocate and less likely to apply for and receive assistance. Renters also often lack the authority and means to enact structural changes to their homes 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 green, include San Mateo County, California; Santa Clara County, California; and Marin County, California.",
       paragraph4: "Hispanic populations are at an increased risk of water insecurity <a href='https://www.sciencebase.gov/catalog/item/63f79d49d34e4f7eda456572' target='_blank'>(Hines and others, 2023)</a>. Many Hispanic households lack adequate plumbing, with much of this 'plumbing poverty' clustered in the Western United States. In fact, research shows that although Hispanic-headed households make up less than 13% of all U.S. households, they account for nearly 17% of households with incomplete plumbing <a href='https://doi.org/10.1080/24694452.2018.1530587' target='_blank'>(Deitz & Meehan, 2019)</a>. The county map below shows the percent of Hispanic populations where counties with the greatest percent Hispanics, in dark blue, include Kenedy County, Texas; Starr County, Texas; and Webb County, Texas.",
@@ -34,9 +34,9 @@ export default {
     },
     socialVulnerabilityText: {
       title: "Where do we go from here",
-      paragraph1: "A crucial and largely unexplored area of research is the intersectionality of social vulnerability factors. The factors evaluated by the researchers at USGS represent individual drivers of water insecurity, like household size or ethnicity. What about the people who experience multiple risk factors at the same time?",
+      paragraph1: "A crucial and largely unexplored area of research is the <span class='tooltip'><span class='tooltip-span'>intersectionality</span><span class='tooltiptext'>The complex, cumulative way in which the effects of multiple forms of discrimination combine, overlap, or intersect especially in the experiences of marginalized individuals or groups.</span></span> of social vulnerability factors. The factors evaluated by the researchers at USGS represent individual drivers of water insecurity, like household size or ethnicity. What about the people who experience multiple risk factors at the same time?",
       paragraph2: `For example, “Elderly people who have lower incomes are a unique population, existing at the overlap of, but distinct from, the elderly or lower income alone,” says Oronde Drakes, social geographer at USGS and lead author of the <span class="tooltip"><span class="tooltip-span">meta-analysis</span><span class="tooltiptext meta-analysis">Type of review study where researchers combine data from many different studies to try to identify bigger patterns across all the results.</span></span>. “The interaction of those social characteristics may well have different and significant impacts on water security than would be found exploring those social factors on their own.”`,
-      paragraph3: "In this burgeoning field of social vulnerability to water insecurity, we have a lot left to learn. Once we better understand not only where water insecurity is happening, but who is most vulnerable and why, we will be better equipped to address environmental justice and equity issues in water resources."
+      paragraph3: "In this burgeoning field of social vulnerability to water insecurity, we have a lot left to learn. Once we better understand not only where water insecurity is happening, but who is most vulnerable and why, we will be better equipped to address <span class='tooltip'><span class='tooltip-span'>environmental justice</span><span class='tooltiptext'>Scientific planning, activities, and information intended to support equitable access and use by all people who may be affected.</span></span> and equity issues in water resources."
     },
     teamText: {
       title: "About the team",

src/components/BeeswarmChart.vue

@@ -2,7 +2,7 @@
   <section id="beeswarm">
     <div id="text1" class="text-container">
       <p>
-        Everyone needs access to clean water. The gap between water security and <span class="tooltip-group"><span class="tooltip-span"> water insecurity </span><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></span> can be the difference between a daydream and a nightmare. People may be more vulnerable to water insecurity due to  
+        Everyone needs access to clean water. The gap between water security and <span class="tooltip-group"><span class="tooltip-span"> water insecurity </span><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></span> can be the difference between a daydream and a nightmare. People may be more or less vulnerable to water insecurity due to  
         <span 
           :class="['highlight', 'Demographiccharacteristics', { checked: isChecked.Demographiccharacteristics }]" 
           @click="toggleCategory('Demographiccharacteristics')"
@@ -44,7 +44,7 @@
           @click="toggleCategory('Exposure')"
         >
           exposure to stressors
-        </span>  (like drought or pollution).
+        </span>  (like drought or pollution). Below is an chart that displays how certain social vulnerability determinants relate to water insecurity.
       </p>
     </div>
     <div id="beeswarm-chart-container">

src/components/Maps.vue

@@ -11,7 +11,7 @@
         <div class="panel households-panel">
           <p v-html="mapText.paragraph1"></p>
           <img src="@/assets/images/perc_occupied_households_2022.png" alt="Choropleth map of percent occupied housing units at the county-level across the contiguous U.S.. The greatest percent of occupied housing units were in Dakota County, Minnesota (97.3%), Lincoln County, South Dakota (97.3%) and Scott County, Minnesota (97%) (U.S. Census Bureau, 2022).">
-          <figcaption>Choropleth map of percent occupied housing units at the county-level across the contiguous U.S.. The greatest percent of occupied housing units were in Dakota County, Minnesota (97.3%), Lincoln County, South Dakota (97.3%) and Scott County, Minnesota (97%) <a href='https://www.census.gov/data/developers/data-sets/acs-5year.html' target='_blank'>(U.S. Census Bureau, 2022).</a></figcaption>
+          <figcaption><span class="tooltip"><span class="tooltip-span">Choropleth map</span><span class="tooltiptext">Type of map that displays divided geographical areas or regions that are coloured, shaded or patterned in relation to a data variable. This provides a way to visualise values over a geographical area, which can show variation or patterns across the displayed location.</span></span> of percent occupied housing units at the county-level across the contiguous U.S.. The greatest percent of occupied housing units were in Dakota County, Minnesota (97.3%), Lincoln County, South Dakota (97.3%) and Scott County, Minnesota (97%) <a href='https://www.census.gov/data/developers/data-sets/acs-5year.html' target='_blank'>(U.S. Census Bureau, 2022).</a></figcaption>
         </div>
 
         <button class="accordion latino-accordion">Hispanic populations<span class="symbol">+</span></button>
@@ -116,17 +116,6 @@ onMounted(() => {
   background-color: #092836;
 }
 
-.accordion.health-accordion {
-  background-color: #EE5775;
-}
-.accordion.livingconditions-accordion {
-  background-color: #7A5195;
-}
-
-.accordion.exposure-accordion {
-  background-color: #FFA601;
-}
-
 .accordion::before {
   content: "";
   position: absolute;
@@ -183,3 +172,39 @@ figcaption {
 }
 
 </style>
+
+<style lang="scss">
+.tooltip-span {
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  border-bottom: 1px dotted rgba(54, 54, 54, 0.8);
+  z-index: 10;
+}
+
+.tooltiptext {
+  visibility: hidden;
+  width: 400px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  margin-left: -170px;
+  margin-top: 2rem;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.social-vulnerability {
+  width: 500px;
+  margin-left: -170px;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+</style>