Maps.vue

<template>
  <section id="map">
    <div
      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>
      <div class="accordion-container">
        <button class="accordion households-accordion">Households<span class="symbol">+</span></button>
        <div class="panel">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam id leo in vitae turpis massa sed elementum tempus. Eu mi bibendum neque egestas congue. Integer quis auctor elit sed vulputate mi sit amet mauris. Faucibus interdum posuere lorem ipsum. Euismod lacinia at quis risus sed vulputate. Quisque sagittis purus sit amet volutpat consequat. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Nisl vel pretium lectus quam id leo in. Magnis dis parturient montes nascetur ridiculus. Vitae proin sagittis nisl rhoncus. Mi bibendum neque egestas congue quisque egestas diam. Enim sit amet venenatis urna cursus. Tincidunt arcu non sodales neque sodales ut etiam sit amet. In egestas erat imperdiet sed euismod nisi porta lorem. </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> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam id leo in vitae turpis massa sed elementum tempus. Eu mi bibendum neque egestas congue. Integer quis auctor elit sed vulputate mi sit amet mauris. Faucibus interdum posuere lorem ipsum. Euismod lacinia at quis risus sed vulputate. Quisque sagittis purus sit amet volutpat consequat. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Nisl vel pretium lectus quam id leo in. Magnis dis parturient montes nascetur ridiculus. Vitae proin sagittis nisl rhoncus. Mi bibendum neque egestas congue quisque egestas diam. Enim sit amet venenatis urna cursus. Tincidunt arcu non sodales neque sodales ut etiam sit amet. In egestas erat imperdiet sed euismod nisi porta lorem. </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> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam id leo in vitae turpis massa sed elementum tempus. Eu mi bibendum neque egestas congue. Integer quis auctor elit sed vulputate mi sit amet mauris. Faucibus interdum posuere lorem ipsum. Euismod lacinia at quis risus sed vulputate. Quisque sagittis purus sit amet volutpat consequat. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Nisl vel pretium lectus quam id leo in. Magnis dis parturient montes nascetur ridiculus. Vitae proin sagittis nisl rhoncus. Mi bibendum neque egestas congue quisque egestas diam. Enim sit amet venenatis urna cursus. Tincidunt arcu non sodales neque sodales ut etiam sit amet. In egestas erat imperdiet sed euismod nisi porta lorem. </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> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam id leo in vitae turpis massa sed elementum tempus. Eu mi bibendum neque egestas congue. Integer quis auctor elit sed vulputate mi sit amet mauris. Faucibus interdum posuere lorem ipsum. Euismod lacinia at quis risus sed vulputate. Quisque sagittis purus sit amet volutpat consequat. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Nisl vel pretium lectus quam id leo in. Magnis dis parturient montes nascetur ridiculus. Vitae proin sagittis nisl rhoncus. Mi bibendum neque egestas congue quisque egestas diam. Enim sit amet venenatis urna cursus. Tincidunt arcu non sodales neque sodales ut etiam sit amet. In egestas erat imperdiet sed euismod nisi porta lorem. </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>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.</p>
    </div>
    <div id="map-container"></div>
  </section>
</template>

<script>
import { onMounted } from "vue";
import { isMobile } from 'mobile-device-detect';
import * as d3 from 'd3';

const mobileView = isMobile;

export default {
  name: "MapComponent",
  mounted() {
    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>
.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
}

.accordion.households-accordion {
  background-color: #092836;
}

.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>