From 4bcbaa731fe8d4b8bb6ee714f4307e159b310dd4 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Mon, 2 Dec 2024 20:05:36 -0600
Subject: [PATCH 01/28] add paragraph breaks
---
src/assets/text/text.js | 25 ++++++++++++++++++++-----
src/components/GlacierScanViz.vue | 2 ++
src/views/VisualizationView.vue | 4 +++-
3 files changed, 25 insertions(+), 6 deletions(-)
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index b424c22..a347ad4 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -20,7 +20,9 @@ export default {
// keys must match project routes (with '-' replaced with '')
findex: {
title: "Findex",
- motivation: "Global freshwater biodiversity faces unprecedented loss from rapid global change. Found in less than 0.01% of available surface water, inland fishes comprise 51% of all fish species and inland fisheries provide food for billions and livelihoods for millions of people worldwide. Despite their importance, inland fishes are some of the most threatened taxa on the planet from intensifying pressures, such as hydrological alterations, riparian degradation, invasive species, and climate change. One-third of all inland fishes are threatened with extinction. However, standardized methods to monitor and assess fisheries proves elusive because inland fisheries are highly dispersed with limited market integration. Here, we present the first global metric to examine threats to inland fisheries by river basin using literature synthesis, expert elicitation, and computational modeling. The resulting standardized assessment serves as a potential risk indicator for freshwater ecosystem status and its capacity to support inland fisheries. We show that most threats to inland fisheries come from outside the fishery sector, predominately from land use change. Given that inland fisheries are severely threatened and highly important with limited resources, this index can help direct, efficiently use, and mobilize limited resources for watershed management, sustainable fisheries, and ultimately human well-being.",
+ motivation: {
+ paragraph1: "Global freshwater biodiversity faces unprecedented loss from rapid global change. Found in less than 0.01% of available surface water, inland fishes comprise 51% of all fish species and inland fisheries provide food for billions and livelihoods for millions of people worldwide. Despite their importance, inland fishes are some of the most threatened taxa on the planet from intensifying pressures, such as hydrological alterations, riparian degradation, invasive species, and climate change. One-third of all inland fishes are threatened with extinction. However, standardized methods to monitor and assess fisheries proves elusive because inland fisheries are highly dispersed with limited market integration. Here, we present the first global metric to examine threats to inland fisheries by river basin using literature synthesis, expert elicitation, and computational modeling. The resulting standardized assessment serves as a potential risk indicator for freshwater ecosystem status and its capacity to support inland fisheries. We show that most threats to inland fisheries come from outside the fishery sector, predominately from land use change. Given that inland fisheries are severely threatened and highly important with limited resources, this index can help direct, efficiently use, and mobilize limited resources for watershed management, sustainable fisheries, and ultimately human well-being."
+ },
teamText: null,
teamData: [
{ name: "Gretchen Stokes", link: "", image: "https://labs.waterdata.usgs.gov/visualizations/headshots/GretchenStokes.png" },
@@ -29,7 +31,14 @@ export default {
},
fireinice: {
title: "Fire in Ice",
- motivation: "Glaciers and ice caps around the world are melting. Glaciers serve as water towers and store freshwater that is essential for drinking water and agriculture. Losing this freshwater to the ocean results in rising sea levels. This glacial retreat is due to increased temperatures, water collecting under glaciers and hastening their movement, alterations in atmospheric circulation, and the deposition of dark aerosols on ice. Dark aerosols absorb heat and can increase melt on glacier surfaces. Black carbon is produced by both industrial burning and from forest fires. Nagorski et al. (2019) determined that black carbon is increasing the radiative forcing of the Juneau Icefield and accelerating the melt. Specific sugars (levoglucosan, mannosan, and galactosan) are only produced by burning vegetation including smoldering grass fires which are often hard to analyze in the past. As coal contains cellulose, coal burning can also produce levoglucosan, mannosan, and galactosan. Here, we collected a series of ~10 m cores across the Juneau Icefield, AK, which encompass some of the most rapidly melting glaciers on the planet, as well as a major contributor to sea level rise. Our goal was to determine if and how wildfire aerosols are affecting the Juneau Icefield. All three sugars were present in quantifiable amounts, demonstrating that wildfires are unequivocally depositing aerosols onto the icefield. Ratios between the sugars can provide information on if hardwoods, softwoods or grasses burned in the fires. The presence of hardwood fires, coupled with satellite data of smoke transport, suggest that fires as far away as East Asia may affect the Juneau Icefield.",
+ motivation: {
+ paragraph1: "Glaciers and ice caps around the world are melting.",
+ paragraph2: "Glaciers serve as water towers and store freshwater that is essential for drinking water and agriculture. Losing this freshwater to the ocean results in rising sea levels. This glacial retreat is due to increased temperatures, water collecting under glaciers and hastening their movement, alterations in atmospheric circulation, and the deposition of dark aerosols on ice.",
+ paragraph3: "Dark aerosols absorb heat and can increase melt on glacier surfaces. Black carbon is produced by both industrial burning and from forest fires. Nagorski et al. (2019) determined that black carbon is increasing the radiative forcing of the Juneau Icefield and accelerating the melt.",
+ paragraph4: "Specific sugars (levoglucosan, mannosan, and galactosan) are only produced by burning vegetation including smoldering grass fires which are often hard to analyze in the past. As coal contains cellulose, coal burning can also produce levoglucosan, mannosan, and galactosan.",
+ paragraph5: "Here, we collected a series of ~10 m cores across the Juneau Icefield, AK, which encompass some of the most rapidly melting glaciers on the planet, as well as a major contributor to sea level rise. Our goal was to determine if and how wildfire aerosols are affecting the Juneau Icefield.",
+ paragraph6: "All three sugars were present in quantifiable amounts, demonstrating that wildfires are unequivocally depositing aerosols onto the icefield. Ratios between the sugars can provide information on if hardwoods, softwoods or grasses burned in the fires. The presence of hardwood fires, coupled with satellite data of smoke transport, suggest that fires as far away as East Asia may affect the Juneau Icefield."
+ },
teamText: null,
teamData: [
{ name: "Natalie Kehrwald", link: "https://www.usgs.gov/staff-profiles/natalie-m-kehrwald", image: "https://d9-wret.s3.us-west-2.amazonaws.com/assets/palladium/production/s3fs-public/styles/staff_profile/public/media/images/NatalieKehrwald_cropped.jpg?itok=oLP9Dl1H" },
@@ -40,7 +49,9 @@ export default {
},
fishasfood: {
title: "Fish as Food",
- motivation: "Inland recreational fishing, defined as primarily leisure-driven fishing in freshwaters, is a popular past-time which can provide substantial contributions to human consumption which are often overlooked at global scales. Here, we established a baseline of national inland recreational consumption estimates with species specificity to identify the nutritional composition, total use value, and climate vulnerability of this recreational consumption.",
+ motivation: {
+ paragraph1: "Inland recreational fishing, defined as primarily leisure-driven fishing in freshwaters, is a popular past-time which can provide substantial contributions to human consumption which are often overlooked at global scales. Here, we established a baseline of national inland recreational consumption estimates with species specificity to identify the nutritional composition, total use value, and climate vulnerability of this recreational consumption."
+ },
teamText: null,
teamData: [
{ name: "Holly Embke", link: "https://www.usgs.gov/staff-profiles/holly-embke", image: "https://d9-wret.s3.us-west-2.amazonaws.com/assets/palladium/production/s3fs-public/styles/staff_profile/public/media/images/embke.jpg?h=f1072bca&itok=xyG6frc8" },
@@ -50,7 +61,9 @@ export default {
},
beaufortsea: {
title: "Beaufort Sea",
- motivation: "The Arctic Ocean is undergoing dramatic sea ice reduction and warming conditions. These changes affect the sealife of the region, including bottom-dwelling organisms and the marine mammals, seabirds, and fish that rely on them for food. The researchers of this project use microfossils from sediment cores taken in the Beaufort Sea to rebuild the climate patterns, sea ice and circulation, and ecosystems from the past 2000 years. By studying bottom-dwelling microorganisms like microscopic arthropods (called Ostracodes) and single-celled protists (called Foraminifera), the Beaufort Sea researchers can compare the historical conditions of the Arctic and better understand the effects of recent climate change in the region. Read more about this USGS science <a href='https://www.usgs.gov/programs/climate-research-and-development-program/science/land-sea-linkages-arctic' target='_blank'>here</a>.",
+ motivation: {
+ paragraph1: "The Arctic Ocean is undergoing dramatic sea ice reduction and warming conditions. These changes affect the sealife of the region, including bottom-dwelling organisms and the marine mammals, seabirds, and fish that rely on them for food. The researchers of this project use microfossils from sediment cores taken in the Beaufort Sea to rebuild the climate patterns, sea ice and circulation, and ecosystems from the past 2000 years. By studying bottom-dwelling microorganisms like microscopic arthropods (called Ostracodes) and single-celled protists (called Foraminifera), the Beaufort Sea researchers can compare the historical conditions of the Arctic and better understand the effects of recent climate change in the region. Read more about this USGS science <a href='https://www.usgs.gov/programs/climate-research-and-development-program/science/land-sea-linkages-arctic' target='_blank'>here</a>."
+ },
teamText: "Laura Gemery is an ecologist, and Julia Seidenstein, Jason Addison and Thomas Cronin are geologists within the Climate Research and Development program of the USGS Ecosystems Mission area. Each specialize in analyzing proxies in sediment cores.",
teamData: [
{ name: "Laura Gemery", link: "https://www.usgs.gov/staff-profiles/laura-gemery", image: "https://labs.waterdata.usgs.gov/visualizations/headshots/l_Gemery mustang Oden.png" },
@@ -68,7 +81,9 @@ export default {
promptMobile: "Click on the map below to explore the topography and learn about coring a glacier.",
heading: "How are ice cores collected?",
paragraph2: "The ideal location for drilling an ice core is the highest, flattest section of a glacier, as this region minimizes any influence from the glacier flow. Snow builds up layer by layer on a glacier surface and eventually compresses into ice. High, flat drilling locations increase the possibility that ice layers remain horizontal and decreases the possibility of melt layers.",
- paragraph3: "Once researchers have arrived at the drilling location, the first thing that they do is to create some sort of shelter for comfort and incase the weather becomes bad. For short (~10 m) ice cores that can be drilled in a day, this shelter is often a snow pit with a bench, as well as a tarp to block blowing wind. Once the pit is dug, scientists can start drilling. The ice core drill has bits called “core dogs†on the bottom that cut into the ice. The drill is a metal cylinder with threads on the outside that help grip the snow and ice. Researchers attach a handle to the top and turn the drill until the have collected a meter of ice. This meter of ice is then passed to the people in the snow pit who are processing the core. This processing entails documenting the ice stratigraphy, measuring the core, and determining its mass. On the Juneau Icefield, cores were not kept in a frozen state, and instead were homogenized and placed into clean labeled bottles. The drilling and processing continue simultaneously, with team members measuring one core section while the next section is being drilled. The ice core drill returns to the initial hole and retrieves the next meter of ice. As the drill goes deeper and deeper into the ice, metal rods are connected to the top of the drill to extend the drill length until eventually reaching ~10 m depth. Pulling up 10 m of metal extension rods, the drill, and the ice core section can be heavy, but allows for a continuous climate record.",
+ paragraph3: "Once researchers have arrived at the drilling location, the first thing that they do is to create some sort of shelter for comfort and incase the weather becomes bad. For short (~10 m) ice cores that can be drilled in a day, this shelter is often a snow pit with a bench, as well as a tarp to block blowing wind. Once the pit is dug, scientists can start drilling.",
+ paragraph4: "The ice core drill has bits called “core dogs†on the bottom that cut into the ice. The drill is a metal cylinder with threads on the outside that help grip the snow and ice. Researchers attach a handle to the top and turn the drill until the have collected a meter of ice. This meter of ice is then passed to the people in the snow pit who are processing the core. This processing entails documenting the ice stratigraphy, measuring the core, and determining its mass.",
+ paragraph5: "On the Juneau Icefield, cores were not kept in a frozen state, and instead were homogenized and placed into clean labeled bottles. The drilling and processing continue simultaneously, with team members measuring one core section while the next section is being drilled. The ice core drill returns to the initial hole and retrieves the next meter of ice. As the drill goes deeper and deeper into the ice, metal rods are connected to the top of the drill to extend the drill length until eventually reaching ~10 m depth. Pulling up 10 m of metal extension rods, the drill, and the ice core section can be heavy, but allows for a continuous climate record.",
photo010: "Clear, sunny days on the Juneau Icefield are appreciated, and people spend every possible moment outside to enjoy the spectacular scenery.",
photo010Mobile: "Clear, sunny days on the Juneau Icefield are appreciated, and people spend every possible moment outside to enjoy the spectacular scenery.",
photo010Alt: "",
diff --git a/src/components/GlacierScanViz.vue b/src/components/GlacierScanViz.vue
index 0906dd6..9b3c8de 100644
--- a/src/components/GlacierScanViz.vue
+++ b/src/components/GlacierScanViz.vue
@@ -34,6 +34,8 @@
<template #aboveExplanation>
<p v-html="text.paragraph2" />
<p v-html="text.paragraph3" />
+ <p v-html="text.paragraph4" />
+ <p v-html="text.paragraph5" />
</template>
</VizSection>
</section>
diff --git a/src/views/VisualizationView.vue b/src/views/VisualizationView.vue
index 820158c..d5f7716 100644
--- a/src/views/VisualizationView.vue
+++ b/src/views/VisualizationView.vue
@@ -80,7 +80,9 @@
<h3>About the {{ pageText.title }} research</h3>
</template>
<template #aboveExplanation>
- <p v-html="pageText.motivation" />
+ <div v-for="paragraph, item in pageText.motivation" :key="item">
+ <p v-html="paragraph" />
+ </div>
</template>
</VizSection>
<VizSection
--
GitLab
From e71e1e12f96385a53467105023c116a957148253 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Mon, 2 Dec 2024 20:44:15 -0600
Subject: [PATCH 02/28] use laptop layout for all desktop views
---
src/assets/text/text.js | 2 +-
src/components/GlacierScanViz.vue | 52 ++++++++++++++++---------------
2 files changed, 28 insertions(+), 26 deletions(-)
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index a347ad4..b223e47 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -78,7 +78,7 @@ export default {
paragraph1: "The Juneau Icefield is just north of Juneau, Alaska and extends into Canada. In 2016 and 2017, researchers collected ice cores across the icefield to determine if the ice traps records of wildfires.",
paragraph1Mobile: "The Juneau Icefield is just north of Juneau, Alaska. In 2016 and 2017, researchers collected ice cores across the icefield to determine if the ice traps records of wildfires.",
promptDesktop: "Hover over the map to explore the topography and learn about coring a glacier.",
- promptMobile: "Click on the map below to explore the topography and learn about coring a glacier.",
+ promptMobile: "Tap the map to explore the topography and learn about coring a glacier.",
heading: "How are ice cores collected?",
paragraph2: "The ideal location for drilling an ice core is the highest, flattest section of a glacier, as this region minimizes any influence from the glacier flow. Snow builds up layer by layer on a glacier surface and eventually compresses into ice. High, flat drilling locations increase the possibility that ice layers remain horizontal and decreases the possibility of melt layers.",
paragraph3: "Once researchers have arrived at the drilling location, the first thing that they do is to create some sort of shelter for comfort and incase the weather becomes bad. For short (~10 m) ice cores that can be drilled in a day, this shelter is often a snow pit with a bench, as well as a tarp to block blowing wind. Once the pit is dug, scientists can start drilling.",
diff --git a/src/components/GlacierScanViz.vue b/src/components/GlacierScanViz.vue
index 9b3c8de..0db0f6a 100644
--- a/src/components/GlacierScanViz.vue
+++ b/src/components/GlacierScanViz.vue
@@ -14,7 +14,10 @@
<p v-html="text.paragraph1" />
<p v-html="text.promptDesktop" />
</div>
- <p v-if="mobileView && defaultView" v-html="text.paragraph1Mobile" />
+ <div v-if="mobileView && defaultView">
+ <p v-html="text.paragraph1Mobile" />
+ <p v-html="text.promptMobile" />
+ </div>
<p v-if="!defaultView" v-html="currentPhotoText"></p>
</div>
</div>
@@ -83,8 +86,8 @@
.attr("display", "none")
crossSectionSVG.select("#tutorial-dt-2")
.attr("display", "none")
- // crossSectionSVG.select("#tutorial-mb-1")
- // .attr("display", "none")
+ crossSectionSVG.select("#tutorial-mb-1")
+ .attr("display", "none")
crossSectionSVG.select("#tutorial-mb-2")
.attr("display", "none")
crossSectionSVG.select("#legend_1")
@@ -342,37 +345,39 @@
<style scoped lang="scss">
#cross-section-grid-container {
display: flex;
- flex-direction: column;
- @media screen and (max-height: 770px) {
- flex-direction: row;
- }
+ flex-direction: row;
+ max-width: 1500px;
+ margin: 3rem auto 4rem auto;
@media screen and (max-width: 600px) {
flex-direction: column;
}
}
#caption-container {
- height: 15vh;
- margin-top: 3rem;
+ height: 100%;
+ width: 35vw;
+ max-width: 600px;
+ margin: auto 3rem auto 0;
display: flex;
- flex-direction: row;
+ flex-direction: column;
+ flex-grow: 0;
+ flex-shrink: 0;
align-items: center;
- padding: 0rem 2rem 0 0rem;
+ padding: 0rem 3rem 2rem 3rem;
background-color: var(--faded-usgs-blue);
border-radius: 5px;
box-shadow: 5px 5px 10px rgba(57, 61, 66, 0.2);
font-style: italic;
@media screen and (max-height: 770px) {
- flex-direction: column;
height: 80vh;
width: 40vw;
+ max-width: 40vw;
padding: 0rem 2rem 0 2rem;
- flex-grow: 0;
- flex-shrink: 0;
}
@media screen and (max-width: 600px) {
flex-direction: column;
width: 100%;
- height: 40vh;
+ max-width: 100%;
+ height: 55vh;
padding: 1rem 1.5rem 0 1.5rem;
}
}
@@ -381,26 +386,23 @@
pointer-events: none;
border-radius: 5px;
margin-right: 3rem;
- @media screen and (max-height: 770px) {
- max-width: 100%;
- max-height: 45vh;
- margin: 2rem 2rem 2rem 2rem;
- }
+ max-width: 100%;
+ max-height: 45vh;
+ margin: 2rem 2rem 2rem 2rem;
@media screen and (max-width: 600px) {
padding-right: 0rem;
- max-height: 22vh;
+ max-height: 35vh;
max-width: 100%;
margin: 1rem;
}
}
#globe-image {
width: 15vw;
+ max-width: 250px;
align-items: center;
pointer-events: none;
border-radius: 5px;
- @media screen and (max-height: 770px) {
- margin: 4rem 2rem 2rem 2rem;
- }
+ margin: 4rem 2rem 2rem 2rem;
@media screen and (max-width: 600px) {
width: 35vw;
margin: 1rem;
@@ -410,7 +412,7 @@
<style lang="scss">
/* css for elements added/classed w/ d3 */
#cross-section-svg {
- height: 50vh;
+ height: 60vh;
z-index: 1;
margin-top: 3rem;
@media screen and (max-height: 770px) {
--
GitLab
From 7ca0ffa728be0b822169003c6aeedb648e3f98bb Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Mon, 2 Dec 2024 20:47:16 -0600
Subject: [PATCH 03/28] drop crevasse photo caption, since icon dropped
---
src/assets/text/text.js | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index b223e47..4178232 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -105,8 +105,6 @@ export default {
photo156: "After multiple days without snowfall, a ski track forms from people passing through on their way to collect scientific data and explore the landscape.",
photo156Mobile: "After multiple days without snowfall, a ski track develops from people on their way to collect scientific data and explore the landscape.",
photo156Alt: "",
- photo183: "Crevasses form in a glacier where it stretches through extension or passes over obstacles. Traveling through crevasse fields requires caution. Crevasses near glacier edges are often substantially smaller, but probing ice bridges and crevasse depth is necessary. Traveling across most crevassed terrain requires rope teams.",
- photo183Mobile: "Crevasses form in a glacier where it stretches through extension or passes over obstacles. Traveling through crevasse fields requires caution.",
photo183Alt: "",
photo203: "Glaciers scour the landscape, creating U-shaped valleys between surrounding peaks. At their terminus, glacier melt creates lakes and rivers. The relatively low elevation and coastal location of the Juneau Icefield means that glacier melt mixes with seawater to create vibrant saltwater wetlands.",
photo203Mobile: "Glaciers scour the landscape, creating U-shaped valleys between surrounding peaks. At their terminus, glacier melt creates lakes and rivers.",
--
GitLab
From f4190593b468ec23b67bc0fbcca35fb56af38476 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Mon, 2 Dec 2024 21:00:39 -0600
Subject: [PATCH 04/28] adjust bottom of particle gradient
---
src/components/WildfireAerosolsViz.vue | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
index 380b883..8498dc5 100644
--- a/src/components/WildfireAerosolsViz.vue
+++ b/src/components/WildfireAerosolsViz.vue
@@ -664,7 +664,7 @@
function initTileColorScale() {
tileColorScale = d3.scaleSequential()
- .interpolator(d3.interpolateGreys);
+ .range(["#efefef" ,"#000000"]);
}
function initBarColorScale(data) {
@@ -777,7 +777,7 @@
}
function addTileLegend() {
- // build list of posible counts (0 to 366)
+ // build list of possible total particle counts
let count_list = [];
for (let i = 1; i <= tileColorScale.domain()[1]; i++) {
count_list.push(i);
--
GitLab
From fcee6a9a90ff9dd34714a36b6b024f6361832933 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Mon, 2 Dec 2024 21:02:27 -0600
Subject: [PATCH 05/28] use lowercase for sugar names in legend
---
src/components/WildfireAerosolsViz.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
index 8498dc5..598dab6 100644
--- a/src/components/WildfireAerosolsViz.vue
+++ b/src/components/WildfireAerosolsViz.vue
@@ -964,7 +964,7 @@
.attr("y", -barChartDimensions.margin.top / 1.75)
.attr("text-anchor", "start") // left-align text
.attr("dominant-baseline", "central")
- .text(d => d);
+ .text(d => d.toLowerCase());
// Position legend groups
// https://stackoverflow.com/questions/20224611/d3-position-text-element-dependent-on-length-of-element-before
--
GitLab
From 5be0b3dd274d3aa2d1b8dda0d2bac1254fdcd61b Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Mon, 2 Dec 2024 21:13:09 -0600
Subject: [PATCH 06/28] adjust chart margin
---
src/components/WildfireAerosolsViz.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
index 598dab6..902580f 100644
--- a/src/components/WildfireAerosolsViz.vue
+++ b/src/components/WildfireAerosolsViz.vue
@@ -133,7 +133,7 @@
})
const defaultMargin = mobileView ? 5 : 10;
- const sharedTopMargin = mobileView ? 135 : 130;
+ const sharedTopMargin = mobileView ? 135 : 145;
const sharedBottomMargin = mobileView ? 0 : 10;
chartGap = mobileView ? chartDimensions.boundedWidth / 11 : chartDimensions.boundedWidth / 11;
--
GitLab
From cc1f406ffac7fbaf0498eda81e3ff6ea7526dd4a Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Mon, 2 Dec 2024 21:19:37 -0600
Subject: [PATCH 07/28] reduce overall chart margin on desktop, so not cut off
at bottom on laptop screens
---
src/components/WildfireAerosolsViz.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
index 902580f..8be8d9f 100644
--- a/src/components/WildfireAerosolsViz.vue
+++ b/src/components/WildfireAerosolsViz.vue
@@ -129,7 +129,7 @@
initChart({
width: chartWidth,
height: chartHeight,
- margin: mobileView ? 5 : 30
+ margin: mobileView ? 5 : 5
})
const defaultMargin = mobileView ? 5 : 10;
--
GitLab
From da3f538fa5100b99e5c3a8d139b38450d4a0dcfc Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Mon, 2 Dec 2024 21:27:18 -0600
Subject: [PATCH 08/28] drop console statements
---
src/components/WildfireAerosolsViz.vue | 7 -------
1 file changed, 7 deletions(-)
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
index 8be8d9f..915cbc3 100644
--- a/src/components/WildfireAerosolsViz.vue
+++ b/src/components/WildfireAerosolsViz.vue
@@ -1306,16 +1306,9 @@
dx = parseFloat(text.attr("dx")),
tspan = text.text(null).append("tspan").attr("y", y).attr("dy", dy + "em");
-
- console.log(`wrap: ${words}`)
while ((word = words.pop())) {
line.push(word);
tspan.text(line.join(" "));
- console.log(`width: ${width}`)
- console.log(`word: ${word}`)
- console.log(tspan.node())
- console.log(tspan.node().getComputedTextLength())
- console.log(tspan.node().getComputedTextLength() > width)
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
--
GitLab
From 78a242dd46ee5858f3feee620010cc9e303af47d Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Mon, 2 Dec 2024 21:33:39 -0600
Subject: [PATCH 09/28] clear up naming
---
src/components/ChartGrid.vue | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/ChartGrid.vue b/src/components/ChartGrid.vue
index e5f7982..767787e 100644
--- a/src/components/ChartGrid.vue
+++ b/src/components/ChartGrid.vue
@@ -15,7 +15,7 @@
import { isMobile } from 'mobile-device-detect';
import ChartCard from '@/components/ChartCard.vue';
- import ChartGrid from '@/assets/content/ChartGrid.js';
+ import ChartGridContent from '@/assets/content/ChartGrid.js';
const props = defineProps({
view: {
@@ -27,7 +27,7 @@
// global variables
const router = useRouter();
const mobileView = isMobile;
- const chartContent = ChartGrid.chartGridItems;
+ const chartContent = ChartGridContent.chartGridItems;
// set up filtered chart data as computed property
const filteredChartContent = computed(() => {
--
GitLab
From 2d683f93d80d7659242f61072c7d2acaed6289f5 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Mon, 2 Dec 2024 23:50:55 -0600
Subject: [PATCH 10/28] get related viz icons placed and working
---
src/components/ChartIcon.vue | 71 ++++++++++++++++++++++++++++++
src/components/ChartIconGrid.vue | 58 +++++++++++++++++++++++++
src/components/SubPage.vue | 74 ++++++++++++++++++++++++--------
3 files changed, 184 insertions(+), 19 deletions(-)
create mode 100644 src/components/ChartIcon.vue
create mode 100644 src/components/ChartIconGrid.vue
diff --git a/src/components/ChartIcon.vue b/src/components/ChartIcon.vue
new file mode 100644
index 0000000..7a74911
--- /dev/null
+++ b/src/components/ChartIcon.vue
@@ -0,0 +1,71 @@
+<template>
+ <div class="chart" :class="{ 'active': active }">
+ <RouterLink :to="vizRoute">
+ <img :src="src" :alt="alt" />
+ </RouterLink>
+ </div>
+</template>
+
+<script setup>
+ defineProps({
+ src: {
+ type: String,
+ default: ``
+ },
+ alt: {
+ type: String,
+ default: ``
+ },
+ description: {
+ type: String,
+ default: ''
+ },
+ active: {
+ type: Boolean,
+ default: false
+ },
+ vizRoute: {
+ type: String,
+ default: ''
+ },
+ })
+</script>
+
+<style scoped lang="scss">
+ $card-height: 90px;
+ .chart{
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: flex-start;
+ position: relative;
+ width: $card-height;
+ height: $card-height;
+ border-color: var(--faded-usgs-blue);
+ border-width: 0px;
+ border-style: solid;
+ border-radius: 1.5px;
+ box-shadow: 0px 0px 8px rgba(39,44,49,.07), 1px 4px 4px rgba(39,44,49,.04);
+ opacity: 0.4;
+ }
+ .chart img {
+ position: absolute;
+ width: 100%;
+ top: 0;
+ background-color: white;
+ border-radius: 1.5px;
+ }
+
+ .active {
+ border-color: var(--faded-usgs-blue);
+ border-width: 3px;
+ border-style: solid;
+ border-radius: 1.5px;
+ opacity: 1;
+ transform: scale(1.1);
+ }
+
+ .chart:hover {
+ opacity: 1;
+ transform: scale(1.1);
+ }
+</style>
\ No newline at end of file
diff --git a/src/components/ChartIconGrid.vue b/src/components/ChartIconGrid.vue
new file mode 100644
index 0000000..c2435ff
--- /dev/null
+++ b/src/components/ChartIconGrid.vue
@@ -0,0 +1,58 @@
+<template>
+ <div id="chartGrid" class="padded">
+ <ChartIcon v-for="item in filteredChartContent" :key="item.vizRoute"
+ :id="item.vizRoute"
+ :src="getThumb(item.img_src)"
+ :alt="item.alt"
+ :description="item.description"
+ :active="item.vizRoute === viz"
+ :vizRoute="item.vizRoute"
+ />
+ </div>
+</template>
+
+<script setup>
+ import { computed } from 'vue';
+
+ import ChartIcon from '@/components/ChartIcon.vue';
+ import ChartGridContent from '@/assets/content/ChartGrid.js';
+
+ const props = defineProps({
+ project: {
+ type: String,
+ default: ``
+ },
+ viz: {
+ type: String,
+ default: ``
+ },
+ })
+
+ // global variables
+ const chartContent = ChartGridContent.chartGridItems;
+
+ // set up filtered chart data as computed property
+ const filteredChartContent = computed(() => {
+ return chartContent.filter(d => d.project.replace(/\s+/g, '-').toLowerCase() === props.project).sort((a,b) => (a.chartOrder > b.chartOrder) ? 1 : ((b.chartOrder > a.chartOrder) ? -1 : 0))
+ });
+
+ function getThumb(pic) {
+ return 'https://labs.waterdata.usgs.gov/visualizations/thumbnails/'+pic
+ }
+
+</script>
+
+<style>
+#chartGrid{
+ margin: 50px auto;
+ display: flex;
+ justify-content: center;
+ gap: 50px;
+ flex-wrap: wrap;
+ width: 100%;
+ max-width: 60%;
+ @media screen and (max-width: 600px) {
+ max-width: 100%;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/SubPage.vue b/src/components/SubPage.vue
index 33aef0a..bb2f52b 100644
--- a/src/components/SubPage.vue
+++ b/src/components/SubPage.vue
@@ -11,7 +11,7 @@
{{ filteredChartContent.title }}
</h1>
</div>
- <VizComponent :id="`${vizRoute}-viz`" :text="vizText"/>
+ <VizComponent :id="`${vizRoute}-viz`" :text="vizText" :key="$route.fullPath"/>
<ReferencesSection v-if="vizReferences" title="References" titleLevel="3" :references="vizReferences"/>
<AuthorshipSection v-if="vizAuthors" title="" titleLevel="3" :authors="vizAuthors"/>
<div
@@ -24,6 +24,7 @@
for data sources and related visualizations.
</p>
</div>
+ <ChartIconGrid :project="projectRoute" :viz="vizRoute" :key="vizRoute"/>
</div>
<PreFooterCodeLinks :gitHubRepositoryLink="vizGitHubRepositoryLink"/>
</section>
@@ -32,9 +33,9 @@
<script setup>
import { useRoute } from 'vue-router'
import { isMobile } from 'mobile-device-detect';
- import { defineAsyncComponent } from 'vue'
-
- import ChartGrid from '@/assets/content/ChartGrid.js';
+ import { computed, defineAsyncComponent, ref, shallowRef, watch } from 'vue'
+ import ChartIconGrid from '@/components/ChartIconGrid.vue';
+ import ChartGridContent from '@/assets/content/ChartGrid.js';
import text from "@/assets/text/text.js";
import ReferencesSection from '@/components/ReferencesSection.vue';
import references from "@/assets/text/references";
@@ -44,24 +45,59 @@
// global variables
const route = useRoute()
- const vizRoute = route.params.vizRoute
- const projectRoute = route.params.projectRoute
+ const vizRoute = ref(route.params.vizRoute);
+ const projectRoute = ref(route.params.projectRoute);
const mobileView = isMobile;
- const chartContent = ChartGrid.chartGridItems;
- const filteredChartContent = chartContent.filter(d => d.vizRoute === vizRoute)[0]
- const vizKey = filteredChartContent.vizKey
- const vizText = text.visualizations[`${filteredChartContent.vizKey}`]
- const vizReferences = references[`${filteredChartContent.vizKey}`]
- const vizAuthors = authors[`${filteredChartContent.vizKey}`]
+ const VizComponent = shallowRef(
+ defineAsyncComponent(() =>
+ //Use convention of adding Viz at end of component names to ensure are two words
+ //Plus, also allows us to specify a filename pattern here, per:
+ //https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#imports-to-your-own-directory-must-specify-a-filename-pattern
+ import(`./${vizKey.value}Viz.vue`) //
+ )
+ );
+ const chartContent = ChartGridContent.chartGridItems;
const gitHubRepositoryLink = import.meta.env.VITE_APP_GITHUB_REPOSITORY_LINK;
- const vizGitHubRepositoryLink = `${gitHubRepositoryLink}/blob/main/src/components/${vizKey}Viz.vue` //Use convention of adding Viz at end of component names to ensure are two words
- const VizComponent = defineAsyncComponent(() =>
- //Use convention of adding Viz at end of component names to ensure are two words
- //Plus, also allows us to specify a filename pattern here, per:
- //https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#imports-to-your-own-directory-must-specify-a-filename-pattern
- import(`./${vizKey}Viz.vue`) //
- )
+ // set up computed properties based on ref values
+ const filteredChartContent = computed(() => {
+ return chartContent.filter(d => d.vizRoute === vizRoute.value)[0];
+ });
+
+ const vizKey = computed(() => {
+ return filteredChartContent.value.vizKey;
+ });
+
+ const vizText = computed(() => {
+ return text.visualizations[`${filteredChartContent.value.vizKey}`]
+ });
+
+ const vizReferences = computed(() => {
+ return references[`${filteredChartContent.value.vizKey}`]
+ });
+
+ const vizAuthors = computed(() => {
+ return authors[`${filteredChartContent.value.vizKey}`]
+ });
+
+ const vizGitHubRepositoryLink = computed(() => {
+ return `${gitHubRepositoryLink}/blob/main/src/components/${vizKey.value}Viz.vue` //Use convention of adding Viz at end of component names to ensure are two words
+ });
+
+ //watches router params for changes
+ watch(route, () => {
+ // update project route
+ projectRoute.value = route.params.projectRoute;
+ // update viz route
+ vizRoute.value = route.params.vizRoute;
+ // update dynamic component
+ VizComponent.value = defineAsyncComponent(() =>
+ //Use convention of adding Viz at end of component names to ensure are two words
+ //Plus, also allows us to specify a filename pattern here, per:
+ //https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#imports-to-your-own-directory-must-specify-a-filename-pattern
+ import(`./${vizKey.value}Viz.vue`) //
+ )
+ })
</script>
<style scoped lang="scss">
--
GitLab
From 4ee169a4656364db49e835da23daa26c2a18e9e8 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Mon, 2 Dec 2024 23:54:22 -0600
Subject: [PATCH 11/28] adjust mobile view
---
src/components/ChartIconGrid.vue | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/components/ChartIconGrid.vue b/src/components/ChartIconGrid.vue
index c2435ff..b4e26a2 100644
--- a/src/components/ChartIconGrid.vue
+++ b/src/components/ChartIconGrid.vue
@@ -52,7 +52,8 @@
width: 100%;
max-width: 60%;
@media screen and (max-width: 600px) {
- max-width: 100%;
+ gap: 25px;
+ max-width: 95%;
}
}
</style>
\ No newline at end of file
--
GitLab
From 850b254c09b8763c01f9e18a22a97f1644dd7ef6 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Tue, 3 Dec 2024 22:00:26 -0600
Subject: [PATCH 12/28] add project page as tile
---
src/components/ChartIcon.vue | 32 ++++++++++++++++-----
src/components/ChartIconGrid.vue | 20 ++++++++------
src/components/PreFooterCodeLinks.vue | 1 +
src/components/SubPage.vue | 40 +--------------------------
4 files changed, 39 insertions(+), 54 deletions(-)
diff --git a/src/components/ChartIcon.vue b/src/components/ChartIcon.vue
index 7a74911..9531934 100644
--- a/src/components/ChartIcon.vue
+++ b/src/components/ChartIcon.vue
@@ -1,7 +1,10 @@
<template>
<div class="chart" :class="{ 'active': active }">
- <RouterLink :to="vizRoute">
- <img :src="src" :alt="alt" />
+ <RouterLink :to="vizRoute ? vizRoute : './'">
+ <img v-if="vizRoute" :src="src" :alt="alt" />
+ <div v-if="projectRoute" id="overlay">
+ <p class='overlay-text'>Project info</p>
+ </div>
</RouterLink>
</div>
</template>
@@ -16,10 +19,6 @@
type: String,
default: ``
},
- description: {
- type: String,
- default: ''
- },
active: {
type: Boolean,
default: false
@@ -28,6 +27,10 @@
type: String,
default: ''
},
+ projectRoute: {
+ type: String,
+ default: ''
+ },
})
</script>
@@ -45,7 +48,7 @@
border-style: solid;
border-radius: 1.5px;
box-shadow: 0px 0px 8px rgba(39,44,49,.07), 1px 4px 4px rgba(39,44,49,.04);
- opacity: 0.4;
+ opacity: 0.5;
}
.chart img {
position: absolute;
@@ -68,4 +71,19 @@
opacity: 1;
transform: scale(1.1);
}
+ #overlay {
+ height: $card-height;
+ background-color: var(--faded-usgs-blue);
+ border-radius: 3px;
+ }
+ .overlay-text {
+ color: var(--usgs-blue);
+ text-align: center;
+ font-weight: 300;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ padding: 0;
+ }
</style>
\ No newline at end of file
diff --git a/src/components/ChartIconGrid.vue b/src/components/ChartIconGrid.vue
index b4e26a2..3f6bb73 100644
--- a/src/components/ChartIconGrid.vue
+++ b/src/components/ChartIconGrid.vue
@@ -1,11 +1,15 @@
<template>
- <div id="chartGrid" class="padded">
+ <div id="chartGrid">
+ <ChartIcon
+ :id="projectRoute"
+ :vizRoute=null
+ :projectRoute="projectRoute"
+ />
<ChartIcon v-for="item in filteredChartContent" :key="item.vizRoute"
:id="item.vizRoute"
:src="getThumb(item.img_src)"
:alt="item.alt"
- :description="item.description"
- :active="item.vizRoute === viz"
+ :active="item.vizRoute === vizRoute"
:vizRoute="item.vizRoute"
/>
</div>
@@ -18,11 +22,11 @@
import ChartGridContent from '@/assets/content/ChartGrid.js';
const props = defineProps({
- project: {
+ projectRoute: {
type: String,
default: ``
},
- viz: {
+ vizRoute: {
type: String,
default: ``
},
@@ -33,7 +37,7 @@
// set up filtered chart data as computed property
const filteredChartContent = computed(() => {
- return chartContent.filter(d => d.project.replace(/\s+/g, '-').toLowerCase() === props.project).sort((a,b) => (a.chartOrder > b.chartOrder) ? 1 : ((b.chartOrder > a.chartOrder) ? -1 : 0))
+ return chartContent.filter(d => d.project.replace(/\s+/g, '-').toLowerCase() === props.projectRoute).sort((a,b) => (a.chartOrder > b.chartOrder) ? 1 : ((b.chartOrder > a.chartOrder) ? -1 : 0))
});
function getThumb(pic) {
@@ -44,13 +48,13 @@
<style>
#chartGrid{
- margin: 50px auto;
+ margin: 8rem auto 2rem auto;
display: flex;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
width: 100%;
- max-width: 60%;
+ max-width: 70rem;
@media screen and (max-width: 600px) {
gap: 25px;
max-width: 95%;
diff --git a/src/components/PreFooterCodeLinks.vue b/src/components/PreFooterCodeLinks.vue
index 7d8f07a..7fd27a2 100644
--- a/src/components/PreFooterCodeLinks.vue
+++ b/src/components/PreFooterCodeLinks.vue
@@ -33,6 +33,7 @@
color: var(--color-text);
margin-left: 10px;
text-decoration: none;
+ font-weight: 300;
}
}
diff --git a/src/components/SubPage.vue b/src/components/SubPage.vue
index bb2f52b..f22b1ab 100644
--- a/src/components/SubPage.vue
+++ b/src/components/SubPage.vue
@@ -12,19 +12,9 @@
</h1>
</div>
<VizComponent :id="`${vizRoute}-viz`" :text="vizText" :key="$route.fullPath"/>
+ <ChartIconGrid :projectRoute="projectRoute" :vizRoute="vizRoute" :key="vizRoute"/>
<ReferencesSection v-if="vizReferences" title="References" titleLevel="3" :references="vizReferences"/>
<AuthorshipSection v-if="vizAuthors" title="" titleLevel="3" :authors="vizAuthors"/>
- <div
- class="text-container"
- id="page-link-container"
- >
- <hr>
- <p id="page-link-note">See the
- <button class="project-link"><RouterLink :to="`/${projectRoute}`">{{ filteredChartContent.project }} project page</RouterLink></button>
- for data sources and related visualizations.
- </p>
- </div>
- <ChartIconGrid :project="projectRoute" :viz="vizRoute" :key="vizRoute"/>
</div>
<PreFooterCodeLinks :gitHubRepositoryLink="vizGitHubRepositoryLink"/>
</section>
@@ -101,32 +91,4 @@
</script>
<style scoped lang="scss">
- #page-link-container {
- font-weight: 300;
- font-style: italic;
- }
- #page-link-note {
- margin-top: 2.5rem;
- }
- .project-link {
- font-family: sans-serif; /* This is fallback font for old browsers */
- font-family: var(--default-font);
- font-style: italic;
- background-color: var(--faded-usgs-blue);
- color: var(--usgs-blue);
- border: solid var(--faded-usgs-blue);
- border-radius: 5px;
- font-weight: 300;
- margin: 1rem 0.25rem 1rem 0.25rem;
- padding: 0.3rem 0.5rem 0.5rem 0.5rem;
- box-shadow: 3px 3px 3px rgba(39,44,49,.2);
- }
- .project-link a {
- text-decoration: none;
- color: var(--usgs-blue);
- }
- .project-link:hover {
- box-shadow: rgba(39,44,49,.7) 2px 2px 4px -2px;
- transform: translate3d(0, 2px, 0);
- }
</style>
\ No newline at end of file
--
GitLab
From e0b9e1e9f77e9feb41b6c17b5ef41d1061fe74d5 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Dec 2024 11:04:23 -0600
Subject: [PATCH 13/28] fix placeholder image path
---
src/assets/content/ChartGrid.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js
index 107ed5d..d877cef 100644
--- a/src/assets/content/ChartGrid.js
+++ b/src/assets/content/ChartGrid.js
@@ -17,7 +17,7 @@ export default {
project: 'Findex',
vizKey: 'ThreatSankey',
vizRoute: 'inland-fish-total-threats',
- img_src: 'Placeholder_thumbnail.png',
+ img_src: 'Placeholder_thumbnail.PNG',
alt: '',
chartOrder: 1,
description: 'Land use change is threatening inland fisheries.'
--
GitLab
From 66987bba14d479684c43633b9fade6c9f899db5a Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Dec 2024 11:46:51 -0600
Subject: [PATCH 14/28] vertically center text and buttons in aerosol viz
---
src/components/WildfireAerosolsViz.vue | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
index 915cbc3..b805c0f 100644
--- a/src/components/WildfireAerosolsViz.vue
+++ b/src/components/WildfireAerosolsViz.vue
@@ -1367,6 +1367,7 @@
#aerosol-text-container {
grid-area: text;
height: 15vh;
+ align-content: center;
@media screen and (max-height: 770px) {
height: 30vh;
}
@@ -1391,12 +1392,10 @@
#aerosol-prev {
grid-area: prev;
justify-self: end;
- align-self: start;
}
#aerosol-next {
grid-area: next;
justify-self: start;
- align-self: start;
}
button:hover:after {
top: 0px;
--
GitLab
From 1951bbfc3e3d093a3affc9c51e46c297861bc65d Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Dec 2024 12:03:37 -0600
Subject: [PATCH 15/28] add second set of buttons to aerosol viz
---
src/components/WildfireAerosolsViz.vue | 36 ++++++++++++++++++--------
1 file changed, 25 insertions(+), 11 deletions(-)
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
index b805c0f..8d5fe8d 100644
--- a/src/components/WildfireAerosolsViz.vue
+++ b/src/components/WildfireAerosolsViz.vue
@@ -12,16 +12,22 @@
</template>
<template #figures>
<div id="wildfire-aerosols-grid-container">
- <button id="aerosol-prev" class="flip-button" @click="currentIndex--; clicked()" :disabled="isFirstImage || justClicked">
+ <button id="aerosol-prev-upper" class="flip-button" @click="currentIndex--; clicked()" :disabled="isFirstImage || justClicked">
<font-awesome-icon :icon="{ prefix: 'fas', iconName: 'arrow-left' }" class="fa fa-arrow-left"/>
</button>
- <button id="aerosol-next" class="flip-button" @click="currentIndex++; clicked()" :disabled="isLastImage || justClicked">
+ <button id="aerosol-next-upper" class="flip-button" @click="currentIndex++; clicked()" :disabled="isLastImage || justClicked">
<font-awesome-icon :icon="{ prefix: 'fas', iconName: 'arrow-right' }" class="fa fa-arrow-right"/>
</button>
<div id="aerosol-text-container" class="text-container">
<p v-html="currentText" />
</div>
<div id="chart-container" ref="chart"></div>
+ <button v-if="!mobileView" id="aerosol-prev-lower" class="flip-button" @click="currentIndex--; clicked()" :disabled="isFirstImage || justClicked">
+ <font-awesome-icon :icon="{ prefix: 'fas', iconName: 'arrow-left' }" class="fa fa-arrow-left"/>
+ </button>
+ <button v-if="!mobileView" id="aerosol-next-lower" class="flip-button" @click="currentIndex++; clicked()" :disabled="isLastImage || justClicked">
+ <font-awesome-icon :icon="{ prefix: 'fas', iconName: 'arrow-right' }" class="fa fa-arrow-right"/>
+ </button>
</div>
</template>
<template #figureCaption>
@@ -1347,8 +1353,8 @@
grid-template-columns: 10% calc(80% - 4rem) 10%;
grid-template-rows: auto max-content;
grid-template-areas:
- "prev text next"
- "chart chart chart";
+ "prev-upper text next-upper"
+ "prev-lower chart next-lower";
margin: 2rem auto 0 auto;
column-gap: 2rem;
row-gap: 3rem;
@@ -1357,7 +1363,7 @@
grid-template-rows: auto max-content;
grid-template-areas:
"chart chart chart"
- "prev text next";
+ "prev-upper text next-upper";
}
}
#chart-container {
@@ -1384,17 +1390,25 @@
cursor: pointer;
box-shadow: 0px 0px 4px rgba(39,44,49,.3);
@media only screen and (max-width: 600px) {
- height: 3rem;
- width: 3rem;
+ height: 3.5rem;
+ width: 3.5rem;
align-self: start;
}
}
- #aerosol-prev {
- grid-area: prev;
+ #aerosol-prev-upper {
+ grid-area: prev-upper;
+ justify-self: end;
+ }
+ #aerosol-next-upper {
+ grid-area: next-upper;
+ justify-self: start;
+ }
+ #aerosol-prev-lower {
+ grid-area: prev-lower;
justify-self: end;
}
- #aerosol-next {
- grid-area: next;
+ #aerosol-next-lower {
+ grid-area: next-lower;
justify-self: start;
}
button:hover:after {
--
GitLab
From 2d4b620879d5f9589c54e91397cf740bf29a152a Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Dec 2024 12:14:08 -0600
Subject: [PATCH 16/28] fix left chart margin on aerosol viz
---
src/components/WildfireAerosolsViz.vue | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
index 8d5fe8d..c05e1b3 100644
--- a/src/components/WildfireAerosolsViz.vue
+++ b/src/components/WildfireAerosolsViz.vue
@@ -135,7 +135,8 @@
initChart({
width: chartWidth,
height: chartHeight,
- margin: mobileView ? 5 : 5
+ margin: mobileView ? 5 : 5,
+ marginLeft: mobileView ? 5 : 30
})
const defaultMargin = mobileView ? 5 : 10;
--
GitLab
From b55643e1a6cea11638bb2fca4b62b33d2e7d57f7 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Dec 2024 12:43:34 -0600
Subject: [PATCH 17/28] add horizontal black line to distinguish years on
aerosol viz
---
src/components/WildfireAerosolsViz.vue | 13 +++++++++++--
1 file changed, 11 insertions(+), 2 deletions(-)
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
index c05e1b3..3b9ed1f 100644
--- a/src/components/WildfireAerosolsViz.vue
+++ b/src/components/WildfireAerosolsViz.vue
@@ -345,10 +345,10 @@
initYAxis({bounds: tileChartBounds})
// Add groups for visual elements
- tileChartBounds.append("g")
- .attr("class", "rects");
tileChartBounds.append("g")
.attr("class", "annotations");
+ tileChartBounds.append("g")
+ .attr("class", "rects");
}
function initBarChart({
@@ -781,6 +781,15 @@
.attr("transform", "rotate(-90)")
.attr("text-anchor", "middle")
.text("2015 accumulation")
+
+ // Add horizontal black line
+ tileChartBounds.select(".annotations")
+ .append("rect")
+ .attr("x", 0)
+ .attr("y", yScale(374.5))
+ .attr("height", 1)
+ .attr("width", chartDimensions.boundedWidth)
+ .attr("fill", "#000000")
}
function addTileLegend() {
--
GitLab
From a3b13734705f97c6f628e777de05d4046dc33561 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Thu, 5 Dec 2024 22:29:31 -0600
Subject: [PATCH 18/28] Adjust aerosols chart layout and add step to
progression
---
public/fii_core4biomass.csv | 3 -
src/assets/text/text.js | 3 +-
src/components/WildfireAerosolsViz.vue | 178 +++++++++++++++----------
3 files changed, 112 insertions(+), 72 deletions(-)
diff --git a/public/fii_core4biomass.csv b/public/fii_core4biomass.csv
index 460d5a9..99aa66f 100644
--- a/public/fii_core4biomass.csv
+++ b/public/fii_core4biomass.csv
@@ -1,7 +1,4 @@
depth_cm,year,site,vegetation_type,burned
-420,2016,4,grass,TRUE
-600,2016,4,grass,TRUE
-710,2016,4,grass,TRUE
0,2016,4,softwood,TRUE
10,2016,4,softwood,TRUE
20,2016,4,softwood,TRUE
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index aa6b66d..a128c3f 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -214,7 +214,8 @@ export default {
WildfireAerosols: {
paragraph1: "Each layer of the <a href='/visualizations/earth-in-flux/#/fire-in-ice/glacier-scan' target='_blank'>collected ice core</a> contains more than just ice. Particles from the air, called aerosols, deposit on the surface of the glacier. These aerosols can come from dust, fossil fuel combustion, or wildfires. When snow buries the deposited particles, they are preserved in the ice.",
paragraph2: "Can we tell if any of these particles came from wildfires? Three sugars — mannosan, galactosan, and levoglucosan — are only produced when vegetation burns. These sugars are present throughout the core, which tells us that some of the deposited particles in the ice were sourced from wildfires.",
- paragraph3: "Scientists use the ratio of levoglucosan to the sum of mannosan and galactosan to distinguish between types of vegetation that burned. Alaska's forests are dominated by softwoods, and <a href='/visualizations/earth-in-flux/#/fire-in-ice/regional-fires' target='_blank'>regional fires</a> likely deposit aerosols on the Juneau Ice Field that are captured in the core. However, there are also markers of hardwood combustion, which suggests that aerosols are transported to the ice field from much farther afield. One possible source is wildfires in hardwood forests in East Asia."
+ paragraph3: "Scientists use the ratio of levoglucosan to the sum of mannosan and galactosan to distinguish between types of vegetation that burned. Alaska's forests are dominated by softwoods, and <a href='/visualizations/earth-in-flux/#/fire-in-ice/regional-fires' target='_blank'>regional fires</a> likely deposit aerosols on the Juneau Ice Field that are captured in the core.",
+ paragraph4: "However, there are also markers of hardwood combustion, which suggests that aerosols are transported to the ice field from much farther afield. One possible source is wildfires in hardwood forests in East Asia."
},
ThreatSankey: {
paragraph1: 'Land use change is the biggest threat to inland fisheries.'
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
index 3b9ed1f..8af7e8f 100644
--- a/src/components/WildfireAerosolsViz.vue
+++ b/src/components/WildfireAerosolsViz.vue
@@ -59,7 +59,7 @@
const scatterData = ref();
const currentIndex = ref(1);
const justClicked = ref(false);
- const nIndices = 3;
+ const nIndices = 4;
const chart = ref(null);
let chartSVG;
const chartTitle = 'Title of chart';
@@ -69,6 +69,7 @@
let chartBounds;
let chartGap;
let maskingRect;
+ let annotationGap;
let tileChartTranslateX1;
let tileChartTranslateX2;
let tileChartTranslateX3;
@@ -96,7 +97,7 @@
let scatterChartBounds;
let scatterXScale;
let scatterColorCategories;
- const scatterColors = {grass: '#c49051', hardwood: '#3c475a', softwood: '#729C9D'};
+ const scatterColors = {hardwood: '#c49051', softwood: '#729C9D'};
let scatterColorScale;
const transitionLength = 1000;
@@ -129,7 +130,7 @@
// initialize chart elements
// on desktop, don't let chart height exceed 800px
- const desktopHeight = window.innerHeight < 770 ? window.innerHeight * 0.85 : Math.min(window.innerHeight * 0.75, 800);
+ const desktopHeight = window.innerHeight < 770 ? window.innerHeight * 1.05 : Math.min(window.innerHeight * 0.75, 800);
chartHeight = mobileView ? window.innerHeight * 0.6 : desktopHeight;
chartWidth = chart.value.offsetWidth;
initChart({
@@ -140,11 +141,11 @@
})
const defaultMargin = mobileView ? 5 : 10;
- const sharedTopMargin = mobileView ? 135 : 145;
+ const sharedTopMargin = mobileView ? 135 : 165;
const sharedBottomMargin = mobileView ? 0 : 10;
chartGap = mobileView ? chartDimensions.boundedWidth / 11 : chartDimensions.boundedWidth / 11;
- const tileChartWidth = mobileView ? chartGap * 3 : chartGap * 3;
+ const tileChartWidth = mobileView ? chartGap * 3 : chartGap * 2.5;
const barChartWidth = mobileView ? chartGap * 3 : chartGap * 3;
const scatterChartWidth = mobileView ? chartGap * 2 : chartGap * 2;
@@ -163,7 +164,7 @@
});
barChartTranslateX2 = mobileView ? tileChartTranslateX2 + tileChartWidth + chartGap : tileChartTranslateX2 + tileChartWidth + chartGap;
- barChartTranslateX3 = mobileView ? tileChartTranslateX3 + tileChartWidth + chartGap : tileChartTranslateX3 + tileChartWidth + chartGap;
+ barChartTranslateX3 = mobileView ? tileChartTranslateX3 + tileChartWidth + chartGap * 0.75 : tileChartTranslateX3 + tileChartWidth + chartGap;
initBarChart({
width: barChartWidth,
height: chartHeight,
@@ -198,9 +199,9 @@
.attr("width", barChartDimensions.width + scatterChartDimensions.width)
.attr("height", chartHeight)
.style("transform", `translate(${
- tileChartTranslateX1 + tileChartDimensions.width + chartGap * 0.5
+ tileChartTranslateX1 + tileChartDimensions.width + chartGap
}px, 0px)`);
- drawScatterChart(scatterData.value);
+ drawScatterChart(scatterData.value, 'softwood');
scatterChartWrapper
.attr("visibility", "hidden");
@@ -731,8 +732,7 @@
////////////////////////////////////
///// ADD CHART ELEMENTS /////
////////////////////////////////////
- const annotationGap = tileChartDimensions.boundedWidth * 0.5;
- const annotationBuffer = annotationGap * 0.2;
+ annotationGap = tileChartDimensions.boundedWidth * 0.5;
// draw chart
tileChartBounds.select('.rects') // selects our group we set up to hold chart elements
.selectAll(".rect") // empty selection
@@ -747,49 +747,35 @@
.attr("width", tileChartDimensions.boundedWidth - annotationGap)
.style("fill", d => tileColorScale(colorAccessor(d)));
- // draw year bands
+ // Add horizontal black line to differentiate years
tileChartBounds.select(".annotations")
- .append("rect")
- .attr("class", "year-bands")
- .attr("x", annotationGap / 2 + annotationBuffer)
- .attr("y", 0)
- .attr("height", yScale(372))
- .attr("width", 3)
-
- tileChartBounds.select(".annotations")
- .append("rect")
- .attr("class", "year-bands")
- .attr("x", annotationGap / 2 + annotationBuffer)
- .attr("y", yScale(378))
- .attr("height", tileChartDimensions.boundedHeight - yScale(378))
- .attr("width", 3)
-
+ .append("line")
+ .attr("x1", 0)
+ .attr("x2", chartDimensions.boundedWidth)
+ .attr("y1", yScale(370))
+ .attr("y2", yScale(370))
+ .style("stroke", "#000000")
+ .style("stroke-width", 1)
+ .style("stroke-dasharray", ("2, 5"));
+
+ // Add year labels
tileChartBounds.select(".annotations")
.append("text")
- .attr("class", "axis-text")
- .attr("x", - yScale(372) / 2)
- .attr("y", annotationGap / 2)
- .attr("transform", "rotate(-90)")
+ .attr("class", "axis-title")
+ .attr("y", yScale(365))
+ .attr("x", annotationGap / 2)
.attr("text-anchor", "middle")
- .text("2016 accumulation")
-
+ .attr("dominant-baseline", "text-after-edge")
+ .text("2016")
+
tileChartBounds.select(".annotations")
.append("text")
- .attr("class", "axis-text")
- .attr("x", - yScale(378) - ((tileChartDimensions.boundedHeight - yScale(378)) / 2))
- .attr("y", annotationGap / 2)
- .attr("transform", "rotate(-90)")
+ .attr("class", "axis-title")
+ .attr("y", yScale(375))
+ .attr("x", annotationGap / 2)
.attr("text-anchor", "middle")
- .text("2015 accumulation")
-
- // Add horizontal black line
- tileChartBounds.select(".annotations")
- .append("rect")
- .attr("x", 0)
- .attr("y", yScale(374.5))
- .attr("height", 1)
- .attr("width", chartDimensions.boundedWidth)
- .attr("fill", "#000000")
+ .attr("dominant-baseline", "text-before-edge")
+ .text("2015")
}
function addTileLegend() {
@@ -820,13 +806,17 @@
.attr("class", "axis-title")
.attr("x", tileChartDimensions.boundedWidth / 2)
.attr("y", -tileChartDimensions.margin.top)
+ .attr("dx", 0)
+ .attr("dy", 0)
.attr("text-anchor", "middle")
.attr("dominant-baseline", "text-before-edge")
+ .attr("text-width", tileChartDimensions.boundedWidth)
.text("Particulate count")
+ .call(d => mobileView ? wrap(d) : d)
// append legend rectangle
const rectWidth = tileChartDimensions.boundedWidth / 2;
- const rectHeight = mobileView ? tileChartDimensions.margin.top / 6 : tileChartDimensions.margin.top / 4;
+ const rectHeight = mobileView ? tileChartDimensions.margin.top / 8 : tileChartDimensions.margin.top / 6;
const rectX = tileChartDimensions.boundedWidth / 2 - rectWidth / 2;
legendGroup.append("rect")
.attr("class", "c1p2 matrixLegend")
@@ -1029,7 +1019,7 @@
// Determine x and y translation
// set y translation for each row
- let rowHeight = window.innerHeight < 770 ? legendRectSize * 4 : legendRectSize * 2;
+ let rowHeight = window.innerHeight < 600 ? legendRectSize * 4.5 : legendRectSize * 3;
const yTranslation = rowHeight * i;
// let yTranslation = 0;
// if (!mobileView) {
@@ -1059,10 +1049,11 @@
})
}
- function drawScatterChart(data) {
+ function drawScatterChart(data, type) {
//////////////////////////////
///// PROCESS DATA /////
//////////////////////////////
+ const filteredData = data.filter(d => d.vegetation_type == type)
///////////////////////////////////////////
///// SET UP ACCESSOR FUNCTIONS /////
@@ -1082,7 +1073,7 @@
///////////////////////////////////////////
// set domain for xScale
scatterXScale
- .domain([... new Set(data.map(d => xAccessor(d)))]);
+ .domain([... new Set(filteredData.map(d => xAccessor(d)))]);
///////////////////////////////////
///// SET UP COLOR SCALE /////
@@ -1094,18 +1085,64 @@
///// ADD CHART ELEMENTS /////
////////////////////////////////////
// draw chart
- const desktopPointSize = window.innerHeight < 770 ? 2 : 4;
scatterChartBounds.select('.points') // selects our group we set up to hold chart elements
.selectAll(".point") // empty selection
- .data(data) // bind data
- .enter() // instantiate chart element for each element of data
- .append("circle") // append a rectangle for each element
- .attr("class", "point")
- .attr("id", d => 'point-' + identifierAccessor(d))
- .attr("cx", d => scatterXScale(xAccessor(d)) + scatterXScale.bandwidth()/2)
- .attr("cy", d => barYScale(yAccessor(d)) + barYScale.bandwidth()/2)
- .attr("r", mobileView ? 2 : desktopPointSize)
- .style("fill", d => scatterColorScale(colorAccessor(d)));
+ .data(filteredData, d => d.vegetation_type) // bind data
+ .join(
+ enter => enter
+ .append("circle")
+ .attr("class", "point")
+ .attr("id", d => 'point-' + identifierAccessor(d))
+ .attr("cx", d => scatterXScale(xAccessor(d)) + scatterXScale.bandwidth()/2)
+ .attr("cy", d => barYScale(yAccessor(d)) + barYScale.bandwidth()/2)
+ .attr("r", barYScale.bandwidth() / 2 * 0.95)
+ .style("fill", d => scatterColorScale(colorAccessor(d)))
+ .style("fill-opacity", 0)
+ .transition()
+ .duration(transitionLength)
+ .style("fill-opacity", 1),
+
+ null, // no update function
+
+ exit => {
+ exit
+ .transition()
+ .duration(transitionLength)
+ .style("fill-opacity", 0)
+ .remove();
+ }
+ );
+
+ const baseWidth = mobileView ? scatterChartTranslateX3 - scatterChartDimensions.boundedWidth - barYScale.bandwidth() / 2 : scatterChartTranslateX3 - scatterChartDimensions.boundedWidth / 2 + barYScale.bandwidth();
+ scatterChartBounds.select('.points') // selects our group we set up to hold chart elements
+ .selectAll(".rect") // empty selection
+ .data(filteredData, d => d.vegetation_type) // bind data
+ .join(
+ enter => enter
+ .append("rect")
+ .attr("class", "rect")
+ .attr("id", d => 'point-' + identifierAccessor(d))
+ .attr("x", d => scatterXScale(xAccessor(d)) + scatterXScale.bandwidth()/2)
+ .attr("y", d => barYScale(yAccessor(d)))
+ .attr("height", barYScale.bandwidth())
+ .attr("width", d => scatterXScale(xAccessor(d)) + baseWidth) //(chartDimensions.boundedWidth - scatterChartDimensions.boundedWidth - chartGap)
+ .attr("transform", d => "translate(" + - (baseWidth + scatterXScale(xAccessor(d))) + ", 0)")
+ .style("fill", d => scatterColorScale(colorAccessor(d)))
+ .style("opacity", 0)
+ .transition()
+ .duration(transitionLength)
+ .style("opacity", 0.5),
+
+ null, // no update function
+
+ exit => {
+ exit
+ .transition()
+ .duration(transitionLength)
+ .style("fill-opacity", 0)
+ .remove();
+ }
+ );
}
function addScatterLegend() {
@@ -1126,8 +1163,7 @@
.text('Burned vegetation type')
.call(d => wrap(d))
- const desktopPointSize = window.innerHeight < 770 ? 2 : 4;
- const legendPointSize = mobileView ? 2 : desktopPointSize;
+ const legendPointSize = barYScale.bandwidth() / 2 * 0.95;
// const interItemSpacing = mobileView ? 15 : 10;
const intraItemSpacing = 6;
@@ -1148,7 +1184,7 @@
legendGroups.append("circle")
.attr("class", "legend-point")
.attr("cx", 0)
- .attr("cy", -scatterChartDimensions.margin.top / 1.75 + legendPointSize / 1.5)
+ .attr("cy", -scatterChartDimensions.margin.top / 2 + legendPointSize / 1.5)
.attr("r", legendPointSize)
.style("fill", d => scatterColorScale(d))
@@ -1156,7 +1192,7 @@
legendGroups.append("text")
.attr("class", "legend-text")
.attr("x", legendPointSize + intraItemSpacing) // put text to the right of the rectangle
- .attr("y", -scatterChartDimensions.margin.top / 1.75)
+ .attr("y", -scatterChartDimensions.margin.top / 2)
.attr("text-anchor", "start") // left-align text
.attr("dominant-baseline", "central")
.text(d => d);
@@ -1207,8 +1243,7 @@
// Determine x and y translation
// set y translation for each row
- let rowHeight = window.innerHeight < 770 ? barYScale.bandwidth() * 4 : barYScale.bandwidth() * 2;
- const yTranslation = rowHeight * i;
+ let rowHeight = window.innerHeight < 600 ? barYScale.bandwidth() * 4.5 : barYScale.bandwidth() * 3; const yTranslation = rowHeight * i;
// let yTranslation = 0;
// if (!mobileView) {
// if (i < 2) {
@@ -1283,7 +1318,7 @@
} else if (index == 2) {
maskingRect
.style("transform", `translate(${
- tileChartTranslateX2 + tileChartDimensions.width + barChartDimensions.width + chartGap * 2
+ tileChartTranslateX2 + tileChartDimensions.width + barChartDimensions.width + chartGap * 2.25
}px, 0px)`)
.transition()
.duration(transitionLength)
@@ -1297,11 +1332,18 @@
}
if (!scatterChartHidden) hideChart(scatterChartWrapper)
} else if (index == 3) {
+ drawScatterChart(scatterData.value, 'softwood')
maskingRect
.style("opacity", "0")
moveChart(tileChartWrapper, tileChartTranslateX3)
moveChart(barChartWrapper, barChartTranslateX3)
- showChart(scatterChartWrapper, scatterChartTranslateX3)
+ if (scatterChartHidden) {
+ showChart(scatterChartWrapper, scatterChartTranslateX3)
+ }
+ } else if (index == 4) {
+ maskingRect
+ .style("opacity", "0")
+ drawScatterChart(scatterData.value, 'hardwood')
}
}
--
GitLab
From 8a2731d5e9c283078506f2c8d20de0c10e89134c Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Thu, 5 Dec 2024 22:58:55 -0600
Subject: [PATCH 19/28] Add in new draft text and explanation section
---
src/assets/text/text.js | 9 ++++++---
src/components/WildfireAerosolsViz.vue | 22 ++++++++++++++--------
2 files changed, 20 insertions(+), 11 deletions(-)
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index a128c3f..af87d69 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -212,10 +212,13 @@ export default {
paragraph1: 'Explore total recreational harvest for the five families of inland fish with the largest recreational harvests: <span class="scientificName">Cyprinidae</span> (minnows and carps), <span class="scientificName">Percidae</span> (perch), <span class="scientificName">Salmonidae</span> (salmon, trout, grayling, and whitefish), <span class="scientificName">Bagridae</span> (bagrid catfish), and <span class="scientificName">Centrarchidae</span> (sunfishes). Total recreational harvest is broken out by family, by species, and by country. Hover over the chart to see the harvest totals, in kilograms'
},
WildfireAerosols: {
- paragraph1: "Each layer of the <a href='/visualizations/earth-in-flux/#/fire-in-ice/glacier-scan' target='_blank'>collected ice core</a> contains more than just ice. Particles from the air, called aerosols, deposit on the surface of the glacier. These aerosols can come from dust, fossil fuel combustion, or wildfires. When snow buries the deposited particles, they are preserved in the ice.",
- paragraph2: "Can we tell if any of these particles came from wildfires? Three sugars — mannosan, galactosan, and levoglucosan — are only produced when vegetation burns. These sugars are present throughout the core, which tells us that some of the deposited particles in the ice were sourced from wildfires.",
+ paragraph1: "Each layer of the <a href='/visualizations/earth-in-flux/#/fire-in-ice/glacier-scan' target='_blank'>collected snow core</a> contains more than just packed snow. Particulates from the air, like dust, deposit on the surface of the glacier, along with tiny airborne particles called aerosols. As more snow falls, the deposited particulates and aerosols are preserved in the glacier.If the aerosols are dark in color, the glacier absorbs more heat and melts more quickly. These dark aerosols are mostly black carbon, or soot, that is generated when vehicles and industrial activities burn fossil fuels or when wildfires burn vegetation.",
+ paragraph2: "Can we tell if any of the dark aerosols in the snow core came from wildfires? While black carbon does not have a chemical signature, three sugars—mannosan, galactosan, and levoglucosan—are only produced when vegetation burns. While these sugars are not dark aerosols themselves, they travel in smoke plumes with the dark aerosols and are deposited alongside them. These sugars are present throughout the core, which tells us that some of the deposited material in the snow came from wildfires.",
paragraph3: "Scientists use the ratio of levoglucosan to the sum of mannosan and galactosan to distinguish between types of vegetation that burned. Alaska's forests are dominated by softwoods, and <a href='/visualizations/earth-in-flux/#/fire-in-ice/regional-fires' target='_blank'>regional fires</a> likely deposit aerosols on the Juneau Ice Field that are captured in the core.",
- paragraph4: "However, there are also markers of hardwood combustion, which suggests that aerosols are transported to the ice field from much farther afield. One possible source is wildfires in hardwood forests in East Asia."
+ paragraph4: "However, there are also markers of hardwood combustion, which suggests that aerosols are transported to the ice field from much farther afield. One possible source is wildfires in hardwood forests in East Asia.",
+ heading: "What am I looking at?",
+ explanation1: "As scientists <a href='/visualizations/earth-in-flux/#/fire-in-ice/glacier-scan' target='_blank'>collected the snow core</a>, they carefully stored each ten-centimeter section for transport off the Juneau Icefield. The retrieved samples were analyzed in a laboratory for particle counts, major ions, stable isotopes of oxygen and hydrogen, and the three sugars that are markers of biomass combustion—mannosan, galactosan, and levoglucosan.",
+ explanation2: "In this visual representation of the core, the darker grey shows layers of the snow that had high amounts of particulate matter. The high-particulate layer present in both 2015 and 2016 likely represents the summer melt surface."
},
ThreatSankey: {
paragraph1: 'Land use change is the biggest threat to inland fisheries.'
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
index 8af7e8f..eded6dd 100644
--- a/src/components/WildfireAerosolsViz.vue
+++ b/src/components/WildfireAerosolsViz.vue
@@ -5,11 +5,6 @@
:figures="true"
:fig-caption="false"
>
- <template #heading>
- <h2>
- {{ text.heading }}
- </h2>
- </template>
<template #figures>
<div id="wildfire-aerosols-grid-container">
<button id="aerosol-prev-upper" class="flip-button" @click="currentIndex--; clicked()" :disabled="isFirstImage || justClicked">
@@ -30,9 +25,20 @@
</button>
</div>
</template>
- <template #figureCaption>
+ </VizSection>
+ <VizSection
+ id="cross-section"
+ :figures="true"
+ :fig-caption="false"
+ >
+ <template #heading>
+ <h2>
+ {{ text.heading }}
+ </h2>
</template>
- <template #belowExplanation>
+ <template #aboveExplanation>
+ <p v-html="text.explanation1" />
+ <p v-html="text.explanation2" />
</template>
</VizSection>
</template>
@@ -1407,7 +1413,7 @@
grid-template-areas:
"prev-upper text next-upper"
"prev-lower chart next-lower";
- margin: 2rem auto 0 auto;
+ margin: 2rem auto 4rem auto;
column-gap: 2rem;
row-gap: 3rem;
@media only screen and (max-width: 600px) {
--
GitLab
From f621f09ad00eabfc63e94cf0108f4d415deb8ed8 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Fri, 6 Dec 2024 14:06:11 -0600
Subject: [PATCH 20/28] text edits to project page
---
src/assets/content/ChartGrid.js | 6 +++---
src/assets/text/text.js | 9 ++++-----
2 files changed, 7 insertions(+), 8 deletions(-)
diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js
index bdd2e8c..6ac6eb3 100644
--- a/src/assets/content/ChartGrid.js
+++ b/src/assets/content/ChartGrid.js
@@ -20,7 +20,7 @@ export default {
img_src: 'glacial_mri_thumbnail.png',
alt: '',
chartOrder: 1,
- description: 'Glacial Ice cores can record changes in wildfire prevalence.'
+ description: 'Glacial ice records change.'
},
{
title: 'Wildfire Aerosols',
@@ -30,7 +30,7 @@ export default {
img_src: 'wildfire_aerosols_thumbnail.png',
alt: '',
chartOrder: 2,
- description: 'Wildfires are depositing aerosols on glaciers.'
+ description: 'Wildfire aerosols are preserved in glaciers.'
},
{
title: 'Regional wildfire deposition',
@@ -40,7 +40,7 @@ export default {
img_src: 'aerosols_map_thumbnail.png',
alt: '',
chartOrder: 2,
- description: 'Particles from regional wildfires are deposited on glaciers.'
+ description: 'Smoke plumes from regional wildfires affect glaciers.'
},
{
title: 'Global economic value of recreationally fished species',
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index af87d69..49eb854 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -33,11 +33,10 @@ export default {
title: "Fire in Ice",
motivation: {
paragraph1: "Glaciers and ice caps around the world are melting.",
- paragraph2: "Glaciers serve as water towers and store freshwater that is essential for drinking water and agriculture. Losing this freshwater to the ocean results in rising sea levels. This glacial retreat is due to increased temperatures, water collecting under glaciers and hastening their movement, alterations in atmospheric circulation, and the deposition of dark aerosols on ice.",
- paragraph3: "Dark aerosols absorb heat and can increase melt on glacier surfaces. Black carbon is produced by both industrial burning and from forest fires. Nagorski et al. (2019) determined that black carbon is increasing the radiative forcing of the Juneau Icefield and accelerating the melt.",
- paragraph4: "Specific sugars (levoglucosan, mannosan, and galactosan) are only produced by burning vegetation including smoldering grass fires which are often hard to analyze in the past. As coal contains cellulose, coal burning can also produce levoglucosan, mannosan, and galactosan.",
- paragraph5: "Here, we collected a series of ~10 m cores across the Juneau Icefield, AK, which encompass some of the most rapidly melting glaciers on the planet, as well as a major contributor to sea level rise. Our goal was to determine if and how wildfire aerosols are affecting the Juneau Icefield.",
- paragraph6: "All three sugars were present in quantifiable amounts, demonstrating that wildfires are unequivocally depositing aerosols onto the icefield. Ratios between the sugars can provide information on if hardwoods, softwoods or grasses burned in the fires. The presence of hardwood fires, coupled with satellite data of smoke transport, suggest that fires as far away as East Asia may affect the Juneau Icefield."
+ paragraph2: "Glaciers serve as water towers that store freshwater that is essential for drinking water and agriculture. When glaciers melt, this freshwater is lost to the ocean, raising sea levels. Glacial retreat is occurring due to increased temperatures, water collecting under glaciers and hastening their movement, alterations in atmospheric circulation, and the deposition of dark aerosols on ice.",
+ paragraph3: "Dark aerosols absorb heat and can increase melting on glacier surfaces. Black carbon, or soot, is a type of dark aerosol that is produced by both industrial burning of fossil fuels and forest fires. Nagorski et al. (2019) determined that black carbon increases the amount of heat absorbed by the Juneau Icefield and accelerates the melting.",
+ paragraph4: "The Fire in Ice Project collected a series of ~10-meter snow cores across the Juneau Icefield, AK, which includes some of the most rapidly melting glaciers on the planet and is a major contributor to sea level rise. The goal was to determine if and how wildfire aerosols are affecting the Juneau Icefield by studying material preserved in the core layers.",
+ paragraph5: "Scientists analyzed the core for specific sugars (levoglucosan, mannosan, and galactosan) that are only produced by burning vegetation. These sugars are transported in smoke plumes alongside dark aerosols and are also deposited on the icefield. All three sugars were present in quantifiable amounts, demonstrating that wildfires are unequivocally depositing aerosols onto the icefield. Ratios between the sugars can provide information on the vegetation type—hardwoods or softwoods—that burned in the fires. The presence of hardwood fires, coupled with satellite data of smoke transport, suggests that fires as far away as East Asia may affect the Juneau Icefield."
},
teamText: null,
teamData: [
--
GitLab
From 57a27c2105daa3bf9f26ace450fb29cb134cef01 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Fri, 6 Dec 2024 14:38:22 -0600
Subject: [PATCH 21/28] wildfire aerosols text edits
---
src/assets/content/ChartGrid.js | 2 +-
src/assets/css/main.css | 2 +-
src/assets/text/text.js | 56 ++++++++++++++++-----------------
3 files changed, 30 insertions(+), 30 deletions(-)
diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js
index 6ac6eb3..1bfca56 100644
--- a/src/assets/content/ChartGrid.js
+++ b/src/assets/content/ChartGrid.js
@@ -13,7 +13,7 @@ export default {
description: 'Land use change is threatening inland fisheries.'
},
{
- title: 'Explore the Juneau Ice Field',
+ title: 'Explore the Juneau Icefield',
project: 'Fire in Ice',
vizKey: 'GlacierScan',
vizRoute: 'glacier-scan',
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index bee38a7..06b54a9 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -81,7 +81,7 @@ a {
color: #fff;
text-align: center;
border-radius: 6px;
- padding: 5px;
+ padding: 0.9rem 0.65rem;
position: absolute;
z-index: 1;
margin-left: -170px;
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index 49eb854..a838901 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -74,42 +74,42 @@ export default {
},
visualizations: {
GlacierScan: {
- paragraph1: "The Juneau Icefield is just north of Juneau, Alaska and extends into Canada. In 2016 and 2017, researchers collected ice cores across the icefield to determine if the ice traps records of wildfires.",
- paragraph1Mobile: "The Juneau Icefield is just north of Juneau, Alaska. In 2016 and 2017, researchers collected ice cores across the icefield to determine if the ice traps records of wildfires.",
+ paragraph1: "The Juneau Icefield is just north of Juneau, Alaska and extends into Canada. In 2016 and 2017, researchers collected snow cores across the icefield to determine if the ice traps records of wildfires.",
+ paragraph1Mobile: "The Juneau Icefield is just north of Juneau, Alaska. In 2016 and 2017, researchers collected snow cores across the icefield to determine if the ice traps records of wildfires.",
promptDesktop: "Hover over the map to explore the topography and learn about coring a glacier.",
promptMobile: "Tap the map to explore the topography and learn about coring a glacier.",
heading: "How are ice cores collected?",
- paragraph2: "The ideal location for drilling an ice core is the highest, flattest section of a glacier, as this region minimizes any influence from the glacier flow. Snow builds up layer by layer on a glacier surface and eventually compresses into ice. High, flat drilling locations increase the possibility that ice layers remain horizontal and decreases the possibility of melt layers.",
- paragraph3: "Once researchers have arrived at the drilling location, the first thing that they do is to create some sort of shelter for comfort and incase the weather becomes bad. For short (~10 m) ice cores that can be drilled in a day, this shelter is often a snow pit with a bench, as well as a tarp to block blowing wind. Once the pit is dug, scientists can start drilling.",
- paragraph4: "The ice core drill has bits called “core dogs†on the bottom that cut into the ice. The drill is a metal cylinder with threads on the outside that help grip the snow and ice. Researchers attach a handle to the top and turn the drill until the have collected a meter of ice. This meter of ice is then passed to the people in the snow pit who are processing the core. This processing entails documenting the ice stratigraphy, measuring the core, and determining its mass.",
- paragraph5: "On the Juneau Icefield, cores were not kept in a frozen state, and instead were homogenized and placed into clean labeled bottles. The drilling and processing continue simultaneously, with team members measuring one core section while the next section is being drilled. The ice core drill returns to the initial hole and retrieves the next meter of ice. As the drill goes deeper and deeper into the ice, metal rods are connected to the top of the drill to extend the drill length until eventually reaching ~10 m depth. Pulling up 10 m of metal extension rods, the drill, and the ice core section can be heavy, but allows for a continuous climate record.",
- photo010: "Clear, sunny days on the Juneau Icefield are appreciated, and people spend every possible moment outside to enjoy the spectacular scenery.",
- photo010Mobile: "Clear, sunny days on the Juneau Icefield are appreciated, and people spend every possible moment outside to enjoy the spectacular scenery.",
+ paragraph2: "The ideal location for drilling a snow core to identify biomarkers from wildfire events is the highest, flattest section of a glacier, as this region minimizes any influence from the glacier flow. Snow builds up layer by layer on a glacier surface and eventually compresses into ice. High, flat drilling locations increase the possibility that packed layers remain horizontal.",
+ paragraph3: "Once researchers have arrived at the drilling location, the first thing that they do is create some sort of shelter for comfort in case the weather becomes bad. For short (~10 m) snow cores that can be drilled in a day, this shelter is often a snow pit with a bench and a tarp to block wind. Once the pit is dug, scientists can start drilling.",
+ paragraph4: "Snow core drills either have a cutting head (like a Felix corer) or cutting teeth (like a Kovacs corer). The teeth cut the packed snow. Parts called ‘core dogs’ grab the core so that you can retrieve it from the bottom of the drilled hole. The drill itself is a metal cylinder and has threads on the outside that help excavate the cut core, allowing the drill to keep cutting deeper. Researchers attach a handle to the top and turn the drill until they have collected a meter of packed snow. This meter of snow is then passed to the people in the snow pit who are processing the core. This processing entails documenting the snow stratigraphy, measuring the core, and weighing the section to determine its mass.",
+ paragraph5: "The drilling and processing continue simultaneously, with team members measuring one core section while the next section is being drilled. The snow core drill returns to the initial hole and retrieves the next meter of packed snow. As the drill goes deeper and deeper into the glacier, metal extension rods are connected to the top of the drill to extend the drill length until eventually reaching ~10 meters below the surface.",
+ photo010: "The Juneau Icefield Research Program (JIRP) established a series of camps across the icefield that allow students and faculty the opportunity to live and work on the icefield throughout the summer program. Clear, sunny days on the Juneau Icefield are rare and much appreciated, and researchers spend every possible moment outside enjoying the spectacular scenery.",
+ photo010Mobile: "Clear, sunny days on the Juneau Icefield are rare and much appreciated, and researchers spend every possible moment outside enjoying the scenery.",
photo010Alt: "",
- photo018: "Drilling and processing ice cores involves teamwork. While a new core section is being drilled, team members measure physical properties like ice stratigraphy and the mass of the previous core section. Processing the core in a snow pit allows shelter from the wind, and creates a stable bench for examining the cores.",
- photo018Mobile: "While a new core section is being drilled, team members measure physical properties like ice stratigraphy and the mass of the previous section.",
+ photo018: "Drilling and processing snow cores involves teamwork. While a new core section is being drilled, team members measure physical properties (e.g., volume, mass) and stratigraphy (i.e., the ice layering) of the previous core section. Processing the core in a snow pit allows shelter from the wind and creates a stable bench for examining the cores.",
+ photo018Mobile: "While a new core section is being drilled, team members measure physical properties (e.g., volume, mass) and stratigraphy (i.e., the ice layering) of the previous core section.",
photo018Alt: "",
- photo051: "Drilling an ice core on the Lemon Creek glacier to help determine past melt events affecting the glacier mass balance. The ice core drill can obtain one meter of ice at a time, where poles help extend the drill as it goes deeper into the ice. Team members record the depth and stratigraphy of ice core sections.",
- photo051Mobile: "The ice core drill can obtain one meter of ice at a time, where poles help extend the drill as it goes deeper into the ice.",
+ photo051: "Scientist sample seasonal snow and firn (snow older than one year) on Lemon Creek Glacier, measuring density, noting any layers of interest, and collecting samples for chemical analysis. The coring device can obtain one meter of snow and firn at a time, and by adding extensions to the drill, it is possible to carefully sample many meters deep without having to dig an enormous hole. Team members take careful notes to ensure records are complete.",
+ photo051Mobile: "The coring device can obtain one meter of snow and firn at a time, and by adding extensions to the drill, it is possible to carefully sample many meters deep without having to dig an enormous hole.",
photo051Alt: "",
- photo085: "Sunsets on the Juneau Icefield are spectacular, with the combination of jagged peaks and glowing snow.",
- photo085Mobile: "Sunsets on the Juneau Icefield are spectacular, with the combination of jagged peaks and glowing snow.",
+ photo085: "Sunsets on the Juneau Icefield are spectacular, with the combination of jagged peaks and low light gleaming on the snow.",
+ photo085Mobile: "Sunsets on the Juneau Icefield are spectacular, with the combination of jagged peaks and low light gleaming on the snow.",
photo085Alt: "",
- photo138: "Traversing between camps involves a combination of skiing across glaciers and hiking over slopes. By the time that teams are ready to traverse to a new camp, they are well-practiced in safety skills such as crevasse rescue and rope management.",
- photo138Mobile: "Moving between camps involves skiing across glaciers and hiking over slopes. Teams practice safety skills like rope management and crevasse rescue.",
+ photo138: "Travel between sites on the icefield involves a combination of skiing across glaciers and hiking over slopes. In order to be able to traverse to a new camp, the teams must be well-practiced in safety skills such as crevasse rescue and rope management.",
+ photo138Mobile: "Travel between sites on the icefield involves a combination of skiing across glaciers and hiking over slopes. Teams use safety skills like crevasse rescue and rope management.",
photo138Alt: "",
- photo140: "Natalie Kehrwald takes a break from drilling ice cores on the Taku Glacier, one of the deepest temperate alpine glaciers in the world.",
- photo140Mobile: "Natalie Kehrwald takes a break from drilling ice cores on the Taku Glacier, one of the deepest temperate alpine glaciers in the world.",
+ photo140: "Natalie Kehrwald takes a break from drilling snow cores on the Taku Glacier, one of the deepest temperate mountain glaciers in the world.",
+ photo140Mobile: "Natalie Kehrwald takes a break from drilling snow cores on the Taku Glacier, one of the deepest temperate mountain glaciers in the world.",
photo140Alt: "",
- photo156: "After multiple days without snowfall, a ski track forms from people passing through on their way to collect scientific data and explore the landscape.",
- photo156Mobile: "After multiple days without snowfall, a ski track develops from people on their way to collect scientific data and explore the landscape.",
+ photo156: "Sunny summer days create a sun-cupped surface texture on the snow surface. The passage of scientists on skis and snowmobiles is visible here, showing a trail from camp to the coring site.",
+ photo156Mobile: "Sunny summer days create a sun-cupped surface texture on the snow surface. The passage of scientists on skis and snowmobiles is visible here.",
photo156Alt: "",
photo183Alt: "",
- photo203: "Glaciers scour the landscape, creating U-shaped valleys between surrounding peaks. At their terminus, glacier melt creates lakes and rivers. The relatively low elevation and coastal location of the Juneau Icefield means that glacier melt mixes with seawater to create vibrant saltwater wetlands.",
- photo203Mobile: "Glaciers scour the landscape, creating U-shaped valleys between surrounding peaks. At their terminus, glacier melt creates lakes and rivers.",
+ photo203: "Glaciers scour the landscape, creating U-shaped valleys between surrounding peaks. At their terminus (where they end), glacier melt creates lakes and rivers.",
+ photo203Mobile: "Glaciers scour the landscape, creating U-shaped valleys between surrounding peaks. Where they end, glacier melt creates lakes and rivers.",
photo203Alt: "",
- photo021: "The Gilkey Trench viewed from Camp 18 shows a classic example of ogives, or alternating bands of light and dark ice that are caused by compression and glacier flow.",
- photo021Mobile: "The Gilkey Trench shows ogives, or alternating bands of light and dark ice that are caused by compression and glacier flow.",
+ photo021: "The movement of glaciers pushes sediments both in front of and to the sides of the ice. The mounds of sediments are called moraines and remain even after the ice has melted. Moraines provide evidence of past glacier activity in locations that are now free of ice.",
+ photo021Mobile: "The movement of glaciers pushes sediments both in front of and to the sides of the ice. The mounds of sediments are called moraines.",
photo021Alt: ""
},
RegionalFires: {
@@ -211,10 +211,10 @@ export default {
paragraph1: 'Explore total recreational harvest for the five families of inland fish with the largest recreational harvests: <span class="scientificName">Cyprinidae</span> (minnows and carps), <span class="scientificName">Percidae</span> (perch), <span class="scientificName">Salmonidae</span> (salmon, trout, grayling, and whitefish), <span class="scientificName">Bagridae</span> (bagrid catfish), and <span class="scientificName">Centrarchidae</span> (sunfishes). Total recreational harvest is broken out by family, by species, and by country. Hover over the chart to see the harvest totals, in kilograms'
},
WildfireAerosols: {
- paragraph1: "Each layer of the <a href='/visualizations/earth-in-flux/#/fire-in-ice/glacier-scan' target='_blank'>collected snow core</a> contains more than just packed snow. Particulates from the air, like dust, deposit on the surface of the glacier, along with tiny airborne particles called aerosols. As more snow falls, the deposited particulates and aerosols are preserved in the glacier.If the aerosols are dark in color, the glacier absorbs more heat and melts more quickly. These dark aerosols are mostly black carbon, or soot, that is generated when vehicles and industrial activities burn fossil fuels or when wildfires burn vegetation.",
- paragraph2: "Can we tell if any of the dark aerosols in the snow core came from wildfires? While black carbon does not have a chemical signature, three sugars—mannosan, galactosan, and levoglucosan—are only produced when vegetation burns. While these sugars are not dark aerosols themselves, they travel in smoke plumes with the dark aerosols and are deposited alongside them. These sugars are present throughout the core, which tells us that some of the deposited material in the snow came from wildfires.",
- paragraph3: "Scientists use the ratio of levoglucosan to the sum of mannosan and galactosan to distinguish between types of vegetation that burned. Alaska's forests are dominated by softwoods, and <a href='/visualizations/earth-in-flux/#/fire-in-ice/regional-fires' target='_blank'>regional fires</a> likely deposit aerosols on the Juneau Ice Field that are captured in the core.",
- paragraph4: "However, there are also markers of hardwood combustion, which suggests that aerosols are transported to the ice field from much farther afield. One possible source is wildfires in hardwood forests in East Asia.",
+ paragraph1: "Each layer of the <a href='/visualizations/earth-in-flux/#/fire-in-ice/glacier-scan' target='_blank'>collected snow core</a> contains more than just packed snow. Particulates from the air, like dust, deposit on the surface of the glacier, along with tiny airborne particles called aerosols. Over time, the deposited particulates and aerosols are preserved in the glacier. If the aerosols are dark in color, the glacier absorbs more heat and melts more quickly. These dark aerosols include black carbon, or soot, that is generated when vehicles and industrial activities burn fossil fuels or when wildfires burn vegetation.",
+ paragraph2: "Can we tell if any of the dark aerosols in the snow core came from wildfires? While black carbon does not have a chemical signature, three sugars—mannnosan, galactosan, and levoglucosan—are only produced when vegetation burns. While these sugars are not dark aerosols themselves, they travel in smoke plumes with the dark aerosols and are deposited alongside them. These sugars are present throughout the core, which tells us that some of the deposited material in the snow came from wildfires.",
+ paragraph3: "Scientists use the ratio of levoglucosan to the sum of mannosan and galactosan to distinguish between types of vegetation that burned. Alaska's forests are dominated by <span class='tooltip-group'><span class='tooltip-span'>softwoods</span><span id='softwoods-tooltip' class='tooltiptext'>Conifers, like pine, spruce, and firs.</span></span>, and <a href='/visualizations/earth-in-flux/#/fire-in-ice/regional-fires' target='_blank'>regional fires</a> likely deposit aerosols on the Juneau Icefield that are captured in the core.",
+ paragraph4: "However, there are also markers of <span class='tooltip-group'><span class='tooltip-span'>hardwood</span><span id='hardwoods-tooltip' class='tooltiptext'>Broadleaved trees, like ash, oak, birch, beech, alder, and teak.</span></span> combustion, which suggests that wildfire aerosols are transported to the icefield from much farther afield. One possible source is wildfires from East Asia, where hardwood forests are more abundant.",
heading: "What am I looking at?",
explanation1: "As scientists <a href='/visualizations/earth-in-flux/#/fire-in-ice/glacier-scan' target='_blank'>collected the snow core</a>, they carefully stored each ten-centimeter section for transport off the Juneau Icefield. The retrieved samples were analyzed in a laboratory for particle counts, major ions, stable isotopes of oxygen and hydrogen, and the three sugars that are markers of biomass combustion—mannosan, galactosan, and levoglucosan.",
explanation2: "In this visual representation of the core, the darker grey shows layers of the snow that had high amounts of particulate matter. The high-particulate layer present in both 2015 and 2016 likely represents the summer melt surface."
--
GitLab
From f3b7e28a872d9b92aa09cb9e3cd4ee41d63e32ad Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Fri, 6 Dec 2024 14:42:10 -0600
Subject: [PATCH 22/28] regional wildfires text edits
---
src/assets/content/ChartGrid.js | 2 +-
src/assets/text/text.js | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js
index 1bfca56..1e64755 100644
--- a/src/assets/content/ChartGrid.js
+++ b/src/assets/content/ChartGrid.js
@@ -20,7 +20,7 @@ export default {
img_src: 'glacial_mri_thumbnail.png',
alt: '',
chartOrder: 1,
- description: 'Glacial ice records change.'
+ description: 'Glacier ice records change.'
},
{
title: 'Wildfire Aerosols',
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index a838901..3d39632 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -113,8 +113,8 @@ export default {
photo021Alt: ""
},
RegionalFires: {
- paragraph1: "From analysis of <a href='/visualizations/earth-in-flux/#/fire-in-ice/glacier-scan' target='_blank'>glacial ice cores</a>, we know that <a href='/visualizations/earth-in-flux/#/fire-in-ice/wildfire-aerosols' target='_blank'>wildfires burning softwoods have deposited aerosols</a> on the Juneau Ice Field. We also know that Alaska has many softwood forests, and that some have burned. But how can we tell which regional fires deposited aerosols on the glacier?",
- paragraph2: "Researchers use an <a href='https://www.ready.noaa.gov/HYSPLIT.php' target='_blank'>atmospheric model</a> to trace the potential path of smoke particles generated by known wildfires, identifying 'candidate' fires that could be the source for aerosols deposited on the ice field during the sampled period."
+ paragraph1: "From analysis of <a href='/visualizations/earth-in-flux/#/fire-in-ice/glacier-scan' target='_blank'>glacier snow cores</a>, we know that wildfires burning softwoods like pine, fir, and spruce have <a href='/visualizations/earth-in-flux/#/fire-in-ice/wildfire-aerosols' target='_blank'>deposited aerosols</a> on the Juneau Icefield. We also know that Alaska has many softwood forests, and that some have burned. But how can we tell which regional fires deposited aerosols on the glacier?",
+ paragraph2: "Researchers use an Researchers use an atmospheric model (<a href='https://www.ready.noaa.gov/HYSPLIT.php' target='_blank'>HYSPLIT</a>) to trace the potential path of smoke particles generated by known wildfires, identifying 'candidate' fires that could be the source for aerosols deposited on the icefield during the sampled period."
},
BeaufortSeaCore: {
heading1: "Why collect ocean sediment cores?",
--
GitLab
From 31e4a5aaea498926be06e8276a7f1be445c9b7cb Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Fri, 6 Dec 2024 14:46:41 -0600
Subject: [PATCH 23/28] adjust caption layout for glacier scan viz
---
src/components/GlacierScanViz.vue | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/components/GlacierScanViz.vue b/src/components/GlacierScanViz.vue
index 0db0f6a..72dcda3 100644
--- a/src/components/GlacierScanViz.vue
+++ b/src/components/GlacierScanViz.vue
@@ -368,16 +368,16 @@
box-shadow: 5px 5px 10px rgba(57, 61, 66, 0.2);
font-style: italic;
@media screen and (max-height: 770px) {
- height: 80vh;
+ height: 100%;
width: 40vw;
max-width: 40vw;
- padding: 0rem 2rem 0 2rem;
+ padding: 0rem 2rem 1rem 2rem;
}
@media screen and (max-width: 600px) {
flex-direction: column;
width: 100%;
max-width: 100%;
- height: 55vh;
+ height: 100%;
padding: 1rem 1.5rem 0 1.5rem;
}
}
--
GitLab
From c443c0f26250d9d78aa520f1b365fb2c698f8cda Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Fri, 6 Dec 2024 15:23:55 -0600
Subject: [PATCH 24/28] simplify paragraph setup on project page
---
src/views/VisualizationView.vue | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/src/views/VisualizationView.vue b/src/views/VisualizationView.vue
index 75c2133..405cacf 100644
--- a/src/views/VisualizationView.vue
+++ b/src/views/VisualizationView.vue
@@ -80,9 +80,7 @@
<h3>About the {{ pageText.title }} research</h3>
</template>
<template #aboveExplanation>
- <div v-for="paragraph, item in pageText.motivation" :key="item">
- <p v-html="paragraph" />
- </div>
+ <p v-for="paragraph, item in pageText.motivation" :key="item" v-html="paragraph" />
</template>
</VizSection>
<VizSection
--
GitLab
From 6fc9c863c7066974f41bde0e692eabecb24387b9 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Fri, 6 Dec 2024 15:27:23 -0600
Subject: [PATCH 25/28] split other project motivation text into paragraphs for
consistency
---
src/assets/css/base.css | 2 +-
src/assets/text/text.js | 4 +++-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/assets/css/base.css b/src/assets/css/base.css
index 0613744..436360c 100644
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -98,5 +98,5 @@ h3 {
}
}
p, text, li {
- padding: 0 0 1rem 0;
+ padding: 0 0 1.5rem 0;
}
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index 3d39632..997eaa6 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -61,7 +61,9 @@ export default {
beaufortsea: {
title: "Beaufort Sea",
motivation: {
- paragraph1: "The Arctic Ocean is undergoing dramatic sea ice reduction and warming conditions. These changes affect the sealife of the region, including bottom-dwelling organisms and the marine mammals, seabirds, and fish that rely on them for food. The researchers of this project use microfossils from sediment cores taken in the Beaufort Sea to rebuild the climate patterns, sea ice and circulation, and ecosystems from the past 2000 years. By studying bottom-dwelling microorganisms like microscopic arthropods (called Ostracodes) and single-celled protists (called Foraminifera), the Beaufort Sea researchers can compare the historical conditions of the Arctic and better understand the effects of recent climate change in the region. Read more about this USGS science <a href='https://www.usgs.gov/programs/ecosystems-land-change-science-program/science/land-sea-linkages-arctic' target='_blank'>here</a>."
+ paragraph1: "The Arctic Ocean is undergoing dramatic sea ice reduction and warming conditions.",
+ paragraph2: "These changes affect the sealife of the region, including bottom-dwelling organisms and the marine mammals, seabirds, and fish that rely on them for food. The researchers of this project use microfossils from sediment cores taken in the Beaufort Sea to rebuild the climate patterns, sea ice and circulation, and ecosystems from the past 2000 years.",
+ paragraph3: "By studying bottom-dwelling microorganisms like microscopic arthropods (called Ostracodes) and single-celled protists (called Foraminifera), the Beaufort Sea researchers can compare the historical conditions of the Arctic and better understand the effects of recent climate change in the region. Read more about this USGS science <a href='https://www.usgs.gov/programs/ecosystems-land-change-science-program/science/land-sea-linkages-arctic' target='_blank'>here</a>."
},
teamText: "Laura Gemery is an ecologist, and Julia Seidenstein, Jason Addison and Thomas Cronin are geologists within the <a href='https://www.usgs.gov/programs/ecosystems-land-change-science-program' target='_blank'>Ecosystems Land Change Science program</a> of the USGS Ecosystems Mission area. Each specialize in analyzing proxies in sediment cores.",
teamData: [
--
GitLab
From 0ba876adad16237c8877e555422a865dd26c0c7f Mon Sep 17 00:00:00 2001
From: Hayley Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Fri, 6 Dec 2024 21:31:24 +0000
Subject: [PATCH 26/28] Apply 1 suggestion(s) to 1 file(s)
Co-authored-by: Kwang, Jeffrey S <jkwang@usgs.gov>
---
src/assets/text/text.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index 997eaa6..bb3c3c1 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -116,7 +116,7 @@ export default {
},
RegionalFires: {
paragraph1: "From analysis of <a href='/visualizations/earth-in-flux/#/fire-in-ice/glacier-scan' target='_blank'>glacier snow cores</a>, we know that wildfires burning softwoods like pine, fir, and spruce have <a href='/visualizations/earth-in-flux/#/fire-in-ice/wildfire-aerosols' target='_blank'>deposited aerosols</a> on the Juneau Icefield. We also know that Alaska has many softwood forests, and that some have burned. But how can we tell which regional fires deposited aerosols on the glacier?",
- paragraph2: "Researchers use an Researchers use an atmospheric model (<a href='https://www.ready.noaa.gov/HYSPLIT.php' target='_blank'>HYSPLIT</a>) to trace the potential path of smoke particles generated by known wildfires, identifying 'candidate' fires that could be the source for aerosols deposited on the icefield during the sampled period."
+ paragraph2: "Researchers use an Researchers use an atmospheric model (<a href='https://www.ready.noaa.gov/HYSPLIT.php' target='_blank'>HYSPLIT</a>) to trace the potential path of smoke particles generated by known wildfires, identifying 'candidate' fires that could be the source of aerosols deposited on the icefield during the sampled period."
},
BeaufortSeaCore: {
heading1: "Why collect ocean sediment cores?",
--
GitLab
From 864586e145548a4e78c65ed8526c76a07ef93ee2 Mon Sep 17 00:00:00 2001
From: "Kwang, Jeffrey S" <jkwang@usgs.gov>
Date: Fri, 6 Dec 2024 22:02:22 +0000
Subject: [PATCH 27/28] update svg from v9 to v10 in s3 bucket
---
src/components/RegionalFiresViz.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/RegionalFiresViz.vue b/src/components/RegionalFiresViz.vue
index 5a346ec..d8763a1 100644
--- a/src/components/RegionalFiresViz.vue
+++ b/src/components/RegionalFiresViz.vue
@@ -47,7 +47,7 @@
onMounted(async () => {
try {
// Use external svg from s3
- d3.xml("https://labs.waterdata.usgs.gov/visualizations/svgs/regional_fires_map_v9.svg").then(function(xml) {
+ d3.xml("https://labs.waterdata.usgs.gov/visualizations/svgs/regional_fires_map_v10.svg").then(function(xml) {
// add svg content to DOM
const svgGrid = document.getElementById("aerosols-grid-container")
svgGrid.appendChild(xml.documentElement);
--
GitLab
From 6f0e180142ca311c14a5184aca9999c2fe310635 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Fri, 6 Dec 2024 16:34:25 -0600
Subject: [PATCH 28/28] add chart title for screenreader
---
src/components/WildfireAerosolsViz.vue | 18 +++++++++++++-----
1 file changed, 13 insertions(+), 5 deletions(-)
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
index eded6dd..f824376 100644
--- a/src/components/WildfireAerosolsViz.vue
+++ b/src/components/WildfireAerosolsViz.vue
@@ -68,7 +68,7 @@
const nIndices = 4;
const chart = ref(null);
let chartSVG;
- const chartTitle = 'Title of chart';
+ const chartTitle = 'Series of charts depicting particulate counts and the presence of wildfire biomarkers in layers of a 780-centimeter snow core';
let chartHeight;
let chartWidth;
let chartDimensions;
@@ -818,7 +818,7 @@
.attr("dominant-baseline", "text-before-edge")
.attr("text-width", tileChartDimensions.boundedWidth)
.text("Particulate count")
- .call(d => mobileView ? wrap(d) : d)
+ .call(d => wrap(d))
// append legend rectangle
const rectWidth = tileChartDimensions.boundedWidth / 2;
@@ -1026,6 +1026,7 @@
// Determine x and y translation
// set y translation for each row
let rowHeight = window.innerHeight < 600 ? legendRectSize * 4.5 : legendRectSize * 3;
+ rowHeight = mobileView ? legendRectSize * 4.5 : rowHeight;
const yTranslation = rowHeight * i;
// let yTranslation = 0;
// if (!mobileView) {
@@ -1119,7 +1120,7 @@
}
);
- const baseWidth = mobileView ? scatterChartTranslateX3 - scatterChartDimensions.boundedWidth - barYScale.bandwidth() / 2 : scatterChartTranslateX3 - scatterChartDimensions.boundedWidth / 2 + barYScale.bandwidth();
+ const baseWidth = mobileView ? scatterChartTranslateX3 - scatterChartDimensions.boundedWidth + (barYScale.bandwidth() / 2 * 0.95 * 2) : scatterChartTranslateX3 - scatterChartDimensions.boundedWidth / 2 + (barYScale.bandwidth() / 2 * 0.95 * 2);
scatterChartBounds.select('.points') // selects our group we set up to hold chart elements
.selectAll(".rect") // empty selection
.data(filteredData, d => d.vegetation_type) // bind data
@@ -1250,6 +1251,7 @@
// Determine x and y translation
// set y translation for each row
let rowHeight = window.innerHeight < 600 ? barYScale.bandwidth() * 4.5 : barYScale.bandwidth() * 3; const yTranslation = rowHeight * i;
+ rowHeight = mobileView ? barYScale.bandwidth() * 4.5 : rowHeight;
// let yTranslation = 0;
// if (!mobileView) {
// if (i < 2) {
@@ -1430,7 +1432,7 @@
}
#aerosol-text-container {
grid-area: text;
- height: 15vh;
+ height: 19vh;
align-content: center;
@media screen and (max-height: 770px) {
height: 30vh;
@@ -1502,7 +1504,13 @@
}
</style>
<style lang="scss">
-/* css for elements added/classed w/ d3 */
+ #softwoods-tooltip {
+ margin-left: -145px;
+ }
+ #hardwoods-tooltip {
+ margin-left: -145px;
+ }
+ /* css for elements added/classed w/ d3 */
#masking-rect {
fill: var(--color-background);
}
--
GitLab