Skip to content
Snippets Groups Projects
Commit e581bd3d authored by Azadpour, Elmera's avatar Azadpour, Elmera
Browse files

set up accordion maps

parent 479639b9
No related branches found
No related tags found
1 merge request!23set up accordion maps
Hide whitespace changes
Inline Side-by-side
Showing
with 96 additions and 57 deletions
src/components/Maps.vue
+ 96
− 57
View file @ e581bd3d
......@@ -6,74 +6,113 @@
>
<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="@/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 red 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 red 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.">
<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 red 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.">
<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.">
<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 red 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 red 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."><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"/> -->
<p>Blue = Negatively correlated to water insecurity conditions</p>
<br>
<div class="accordion-container">
<button class="accordion orange">Households<span class="symbol">+</span></button>
<div class="panel">
<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 orange">Income<span class="symbol">+</span></button>
<div class="panel">
<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 blue">Renters<span class="symbol">+</span></button>
<div class="panel">
<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 orange">Latino<span class="symbol">+</span></button>
<div class="panel">
<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>
<!-- <div
id="text1"
class="text-container"
>
<p v-html="mapsText.paragraph1"/>
</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';
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;
// global variables
const mobileView = isMobile;
const mapsText = mapText.mapText;
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 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;
// }
}
<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: $SourceSans;
font-weight: 600;
margin-bottom: 10px;
}
#grid-title {
grid-area: title;
align-self: center;
}
.accordion.orange {
background-color: #F67926;
}
#text {
grid-area: text;
}
.accordion.blue {
background-color: #317FBD;
}
#map-container {
pointer-events: none;
grid-area: map;
height: 100%;
max-height: 70vh;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
\ No newline at end of file
.symbol {
font-size: 24px;
font-weight: bold;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment