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

drop a couple maps in the accordion and add new

parent 83232606
No related branches found
No related tags found
1 merge request!28Accordion updates
Hide whitespace changes
Inline Side-by-side
Showing
with 24 additions and 8 deletions
src/components/Maps.vue
+ 24
− 8
View file @ 537af082
......@@ -10,14 +10,13 @@
<button class="accordion households-accordion active">Households<span class="symbol">-</span></button>
<div class="panel" style="display: block;">
<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.">
<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 blue 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.">
</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.">
<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 blue 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>
......@@ -29,17 +28,26 @@
<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.">
<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 blue 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>
<button class="accordion disability-accordion">Disability<span class="symbol">+</span></button>
<div class="panel">
<p v-html="mapText.paragraph5"></p>
<img src="@/assets/images/perc_disable_census_2022.png" alt="Choropleth map of Percent with a disability of total civilian noninstitutionalized population in the contiguous United States aggregated at the county level where counties with the greatest percent disable in dark orange include Catron County, New Mexico (41.2%), Mora County, New Mexico (34%) and Kinney County, Texas (34%). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
<img src="@/assets/images/perc_disable_census_2022.png" alt="Choropleth map of percent with a disability of total civilian noninstitutionalized population in the contiguous United States aggregated at the county level where counties with the greatest percent disable in dark blue include Catron County, New Mexico (41.2%), Mora County, New Mexico (34%) and Kinney County, Texas (34%). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
</div>
<button class="accordion placeholder-accordion">Placeholder<span class="symbol">+</span></button>
<button class="accordion health-accordion">Health case study<span class="symbol">+</span></button>
<div class="panel">
<p v-html="mapText.paragraph6"></p>
</div>
<button class="accordion livingconditions-accordion">Living conditions case study<span class="symbol">+</span></button>
<div class="panel">
<p v-html="mapText.paragraph6"></p>
</div>
<button class="accordion exposure-accordion">Exposure to stressor case study<span class="symbol">+</span></button>
<div class="panel">
<p v-html="mapText.paragraph6"></p>
</div>
......@@ -121,9 +129,17 @@ onMounted(() => {
background-color: #092836;
}
.accordion.placeholder-accordion {
.accordion.health-accordion {
background-color: #EE5775;
}
.accordion.livingconditions-accordion {
background-color: #7A5195;
}
.accordion.exposure-accordion {
background-color: #FFA601;
}
.accordion::before {
content: "";
......
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