From 0d3c6d21e7a39dda2f6e149b6b6011e426fe358b Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 16 Oct 2024 16:06:11 -0500
Subject: [PATCH] add viz page for wildfire aerosols viz
---
src/assets/content/ChartGrid.js | 12 +++++-
src/assets/text/authors.js | 24 +++++++++++
src/assets/text/text.js | 8 ++++
src/components/WildfireAerosolsViz.vue | 57 ++++++++++++++++++++++++++
4 files changed, 100 insertions(+), 1 deletion(-)
create mode 100644 src/components/WildfireAerosolsViz.vue
diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js
index fc943d8..59e6fc6 100644
--- a/src/assets/content/ChartGrid.js
+++ b/src/assets/content/ChartGrid.js
@@ -31,6 +31,16 @@ export default {
alt: '',
chartOrder: 1,
description: 'Ice cores can record changes in wildfire prevalence.'
+ },
+ {
+ title: 'Wildfire Aerosols',
+ project: 'Fire in Ice',
+ vizKey: 'WildfireAerosols',
+ vizRoute: 'wildfire-aerosols',
+ img_src: 'placeholder_thumbnail.png',
+ alt: '',
+ chartOrder: 2,
+ description: 'Wildfires are depositing aerosols on glaciers.'
},
{
title: 'Wildfire Aerosols',
@@ -39,7 +49,7 @@ export default {
vizRoute: 'aerosol-paths',
img_src: 'aerosols_thumbnail.png',
alt: '',
- chartOrder: 2,
+ chartOrder: 3,
description: 'Wildfire particles are deposited on glaciers.'
},
{
diff --git a/src/assets/text/authors.js b/src/assets/text/authors.js
index 1e52356..1a71294 100644
--- a/src/assets/text/authors.js
+++ b/src/assets/text/authors.js
@@ -88,6 +88,30 @@ export default {
additionalAuthors: [
]
},
+ WildfireAerosols: {
+ primaryAuthors: [
+ {
+ firstName: 'Hayley',
+ lastName: 'Corson-Dosch',
+ fullName: 'Hayley Corson-Dosch',
+ initials: 'HCD',
+ profile_link: 'https://www.usgs.gov/staff-profiles/hayley-corson-dosch',
+ role: 'lead author',
+ contribution: 'led the creation of the interactive chart'
+ },
+ {
+ firstName: 'Jeffrey',
+ lastName: 'Kwang',
+ fullName: 'Jeffrey Kwang',
+ initials: 'JK',
+ profile_link: 'https://www.usgs.gov/staff-profiles/jeffrey-kwang',
+ role: 'contributor',
+ contribution: 'led the development of the data visualization'
+ },
+ ],
+ additionalAuthors: [
+ ]
+ },
Aerosols: {
primaryAuthors: [
{
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index c36fc6e..d813866 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -1,3 +1,5 @@
+import WildfireAerosolsViz from "../../components/WildfireAerosolsViz.vue";
+
export default {
landingPage: {
pageTitle: "Earth is changing...",
@@ -175,6 +177,12 @@ export default {
},
FishAsFoodSankey: {
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: "In the cores, we see that there is more than just ice. Particles from the air, called aerosols, have been deposited in the ice.",
+ paragraph2: "These aerosols can come from dust, fossil fuel combustion, or wildfires.",
+ paragraph3: "What are the particles made of? These L, M, and G sugars indicate that some of the particules have been deposited by wildfires.",
+ paragraph4: "Some L/(M+G) peaks indicate that hardwoods were burned, which suggests a further source. Based on hardwood forest locations, one likely source is East Asia."
}
}
}
\ No newline at end of file
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
new file mode 100644
index 0000000..5185269
--- /dev/null
+++ b/src/components/WildfireAerosolsViz.vue
@@ -0,0 +1,57 @@
+<template>
+ <!---VizSection-->
+ <VizSection
+ id="cross-section"
+ :figures="true"
+ :fig-caption="false"
+ >
+ <!-- HEADING -->
+ <template #heading>
+ <h2>
+ {{ text.heading }}
+ </h2>
+ </template>
+ <!-- FIGURES -->
+ <template #aboveExplanation>
+ <p v-html="text.paragraph1" />
+ <p v-html="text.paragraph2" />
+ <p v-html="text.paragraph3" />
+ <p v-html="text.paragraph4" />
+ </template>
+ <template #figures>
+ </template>
+ <!-- FIGURE CAPTION -->
+ <template #figureCaption>
+ </template>
+ <!-- EXPLANATION -->
+ <template #belowExplanation>
+ </template>
+ </VizSection>
+</template>
+
+<script setup>
+ import { onMounted } from "vue";
+ import * as d3 from 'd3';
+ import VizSection from '@/components/VizSection.vue';
+
+ // define props
+ defineProps({
+ text: { type: Object }
+ })
+
+ // Declare behavior on mounted
+ // functions called here
+ onMounted(async () => {
+ try {
+ console.log('app')
+ } catch (error) {
+ console.error('Error during component mounting', error);
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+</style>
+<style lang="scss">
+/* css for elements added/classed w/ d3 */
+</style>
\ No newline at end of file
--
GitLab