From 9ac9ce2383770ff24c65a9372aed20a68699edaf Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 16:29:53 -0500
Subject: [PATCH 01/13] add page subtitle
---
src/assets/css/main.css | 1 +
src/assets/text/text.js | 1 +
2 files changed, 2 insertions(+)
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 0add836..d7b5d4a 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -29,6 +29,7 @@
font-family: var(--default-font);
color: var(--color-title-text);
text-align: center;
+ font-weight: 300;
}
.title-container {
max-width: 100%;
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index ec4aa29..e3bd20d 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -1,5 +1,6 @@
export default {
pageTitle: "Earth is changing...",
+ pageSubTitle: "USGS scientists research climate change on the ground",
collaborationDescription: "The climate chart gallery is a shared initiative between the U.S. Geological Survey (USGS) <a href='https://www.usgs.gov/mission-areas/water-resources', target='_blank'>Water Resources Mission Area</a>, <a href='https://www.usgs.gov/mission-areas/ecosystems', target='_blank'>Ecosystems Mission Area</a>, and <a href='https://www.usgs.gov/programs/climate-adaptation-science-centers', target='_blank'>Climate Adaptation Science Centers</a> to communicate key findings of USGS climate science in innovative ways, and to encourage creativity, exploration, and community in data visualization across USGS mission areas.",
vizlab: {
teamText: "The USGS Vizlab...View the Vizlab <a href='https://labs.waterdata.usgs.gov/visualizations/' target='_blank'>portfolio</a>.",
--
GitLab
From bf474370c579dc39c4b93f6c7966b8b2a7dff601 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 16:30:08 -0500
Subject: [PATCH 02/13] Reorganize project pages
---
src/views/VisualizationView.vue | 24 ++++++++++++++++--------
1 file changed, 16 insertions(+), 8 deletions(-)
diff --git a/src/views/VisualizationView.vue b/src/views/VisualizationView.vue
index 0005b3c..45417aa 100644
--- a/src/views/VisualizationView.vue
+++ b/src/views/VisualizationView.vue
@@ -2,16 +2,20 @@
<section id="visualization-container">
<div class="page-content">
<div class="text-container" :class="{ mobile: mobileView}">
- <div class="typewriter">
- <h1 class="title">
- {{ text.pageTitle }}
- </h1>
+ <div v-if="!projectPage">
+ <div class="typewriter">
+ <h1 class="title">
+ {{ text.pageTitle }}
+ </h1>
+ </div>
+ <h2 class="subtitle">
+ {{ text.pageSubTitle }}
+ </h2>
</div>
<h2 v-if="projectPage" class="subtitle">
- {{ projectText.title }} project visualizations
+ {{ projectText.title }} project
</h2>
</div>
- <ChartGrid :view="currentView"/>
<!---VizSection-->
<VizSection
v-if="projectPage"
@@ -20,9 +24,9 @@
>
<!-- HEADING -->
<template #heading>
- <h2>
+ <!--h2>
About the {{ projectText.title }} project
- </h2>
+ </h2-->
</template>
<template #aboveExplanation>
<h3>Project motivation</h3>
@@ -47,7 +51,11 @@
<template #figures>
<AboutTheTeam v-if="projectText.teamData" :key="projectRoute" :data="projectText.teamData"/>
</template>
+ <template #belowExplanation>
+ <h3>Project visualizations</h3>
+ </template>
</VizSection>
+ <ChartGrid :view="currentView"/>
<ReferencesSection v-if="projectReferences" title="Project resources" titleLevel="3" :references="projectReferences"/>
</div>
<PreFooterCodeLinks :gitHubRepositoryLink="gitHubRepositoryLink"/>
--
GitLab
From 8c42fbacbac0abc326c32d7d2e86fc7ce136d4fe Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 16:31:22 -0500
Subject: [PATCH 03/13] drop ...and from start of key messages
---
src/assets/content/ChartGrid.js | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js
index 472e1d4..0f2eba3 100644
--- a/src/assets/content/ChartGrid.js
+++ b/src/assets/content/ChartGrid.js
@@ -9,7 +9,7 @@ export default {
vizRoute: 'inland-fish-threats',
img_src: 'ThreatBumpChart_thumbnail.png',
alt: '',
- description: '... and inland fisheries are threatened.'
+ description: 'Inland fisheries are threatened.'
},
{
title: 'Glacier/Topography D3 Cross-Section Scan',
@@ -18,7 +18,7 @@ export default {
vizRoute: 'glacier-scan',
img_src: 'glacial_xray_thumbnail.png',
alt: '',
- description: '...and researchers are studying glacial ice.'
+ description: 'Researchers are studying glacial ice.'
},
{
title: 'Global economic value of recreationally fished species',
@@ -27,7 +27,7 @@ export default {
vizRoute: 'inland-rec-fish-value',
img_src: 'circle-pack-thumbnail.png',
alt: '',
- description: '...and inland recreational fishing contributes economic value.'
+ description: 'Inland recreational fishing contributes economic value.'
},
{
title: 'Beaufort Sea Sediment Coring',
@@ -36,7 +36,7 @@ export default {
vizRoute: 'beaufort-sea-ice-coring',
img_src: 'BeaufortSeaCore_thumbnail.PNG',
alt: '',
- description: '...and sediment cores can help build past and present climates.'
+ description: 'Sediment cores can help build past and present climates.'
},
{
title: 'Beaufort Sea Species',
@@ -45,7 +45,7 @@ export default {
vizRoute: 'beaufort-sea-species',
img_src: 'BeaufortSeaSpecies_thumbnail.png',
alt: '',
- description: '...and microfossils can be used to indicate these changes.'
+ description: 'Microfossils can be used to indicate these changes.'
},
{
title: 'Beaufort Sea Timeline',
@@ -54,7 +54,7 @@ export default {
vizRoute: 'beaufort-sea-timeline',
img_src: 'BeaufortSeaTimeline_thumbnail.PNG',
alt: '',
- description: '...and communities of microorganisms on the sea floor are affected.'
+ description: 'Communities of microorganisms on the sea floor are affected.'
}
]
};
\ No newline at end of file
--
GitLab
From 28634fa491c25247046bed3a461cef5ddf9a99de Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 16:43:32 -0500
Subject: [PATCH 04/13] sort cards for project pages
---
src/assets/content/ChartGrid.js | 6 ++++++
src/components/ChartGrid.vue | 12 ++++++------
2 files changed, 12 insertions(+), 6 deletions(-)
diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js
index 0f2eba3..6fb09ed 100644
--- a/src/assets/content/ChartGrid.js
+++ b/src/assets/content/ChartGrid.js
@@ -9,6 +9,7 @@ export default {
vizRoute: 'inland-fish-threats',
img_src: 'ThreatBumpChart_thumbnail.png',
alt: '',
+ chartOrder: 1,
description: 'Inland fisheries are threatened.'
},
{
@@ -18,6 +19,7 @@ export default {
vizRoute: 'glacier-scan',
img_src: 'glacial_xray_thumbnail.png',
alt: '',
+ chartOrder: 1,
description: 'Researchers are studying glacial ice.'
},
{
@@ -27,6 +29,7 @@ export default {
vizRoute: 'inland-rec-fish-value',
img_src: 'circle-pack-thumbnail.png',
alt: '',
+ chartOrder: 1,
description: 'Inland recreational fishing contributes economic value.'
},
{
@@ -36,6 +39,7 @@ export default {
vizRoute: 'beaufort-sea-ice-coring',
img_src: 'BeaufortSeaCore_thumbnail.PNG',
alt: '',
+ chartOrder: 1,
description: 'Sediment cores can help build past and present climates.'
},
{
@@ -45,6 +49,7 @@ export default {
vizRoute: 'beaufort-sea-species',
img_src: 'BeaufortSeaSpecies_thumbnail.png',
alt: '',
+ chartOrder: 2,
description: 'Microfossils can be used to indicate these changes.'
},
{
@@ -54,6 +59,7 @@ export default {
vizRoute: 'beaufort-sea-timeline',
img_src: 'BeaufortSeaTimeline_thumbnail.PNG',
alt: '',
+ chartOrder: 3,
description: 'Communities of microorganisms on the sea floor are affected.'
}
]
diff --git a/src/components/ChartGrid.vue b/src/components/ChartGrid.vue
index 7f2c7b7..e5f7982 100644
--- a/src/components/ChartGrid.vue
+++ b/src/components/ChartGrid.vue
@@ -1,6 +1,6 @@
<template>
<div id="chartGrid" class="padded">
- <ChartCard @click.enter="showSubPage(item.project, item.vizRoute)" v-for="(item, index) in randomizedChartContent" :key="index"
+ <ChartCard @click.enter="showSubPage(item.project, item.vizRoute)" v-for="(item, index) in sortedChartContent" :key="index"
:id="item.vizRoute"
:src="getThumb(item.img_src)"
:alt="item.alt"
@@ -31,12 +31,12 @@
// set up filtered chart data as computed property
const filteredChartContent = computed(() => {
- return props.view == 'all' ? chartContent : chartContent.filter(d => d.project.replace(/\s+/g, '-').toLowerCase() === props.view)
+ return props.view == 'all' ? chartContent : chartContent.filter(d => d.project.replace(/\s+/g, '-').toLowerCase() === props.view).sort((a,b) => (a.chartOrder > b.chartOrder) ? 1 : ((b.chartOrder > a.chartOrder) ? -1 : 0))
});
-
- // computed property for randomized chart content
- const randomizedChartContent = computed(() => {
- return shuffle([...filteredChartContent.value]); // clone array to avoid mutating original
+
+ // computed property for randomized chart content - only randomized on landing view
+ const sortedChartContent = computed(() => {
+ return props.view == 'all' ? shuffle([...filteredChartContent.value]) : filteredChartContent.value; // clone array to avoid mutating original
});
// Declare behavior on mounted
--
GitLab
From 1bf132b8bab5300bcd209892589f74c8cb6608b4 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 20:34:34 -0500
Subject: [PATCH 05/13] move project visualizations further up page
---
src/views/VisualizationView.vue | 52 ++++++++++++++++++---------------
1 file changed, 28 insertions(+), 24 deletions(-)
diff --git a/src/views/VisualizationView.vue b/src/views/VisualizationView.vue
index 45417aa..223e095 100644
--- a/src/views/VisualizationView.vue
+++ b/src/views/VisualizationView.vue
@@ -16,46 +16,50 @@
{{ projectText.title }} project
</h2>
</div>
+ <ChartGrid v-if="!projectPage" :view="currentView"/>
<!---VizSection-->
<VizSection
v-if="projectPage"
- :figures="true"
+ :figures="false"
:fig-caption="false"
>
<!-- HEADING -->
<template #heading>
- <!--h2>
- About the {{ projectText.title }} project
- </h2-->
+ <h3>Project motivation</h3>
</template>
<template #aboveExplanation>
- <h3>Project motivation</h3>
<p v-html="projectText.motivation" />
- <h3 v-if="projectText.teamData">Project team</h3>
+ </template>
+ </VizSection>
+ <VizSection
+ v-if="projectPage"
+ :figures="true"
+ :fig-caption="false"
+ >
+ <!-- HEADING -->
+ <template #heading>
+ <h3>Project visualizations</h3>
+ </template>
+ <template #figures>
+ <ChartGrid :view="currentView"/>
+ </template>
+ </VizSection>
+ <VizSection
+ v-if="projectPage"
+ :figures="true"
+ :fig-caption="false"
+ >
+ <!-- HEADING -->
+ <template #heading>
+ <h3 v-if="projectText.teamData">Project team</h3>
+ </template>
+ <template #aboveExplanation>
<p v-if="projectText.teamData && projectText.teamText" v-html="projectText.teamText" />
- <!-- p>The {{ projectText.title }} project is led by
- <span
- v-for="(author, index) in projectText.teamData"
- :key="index"
- >
- <a
- :href="author.link"
- target="_blank"
- v-text="author.name"
- />
- <span v-if="index != Object.keys(projectText.teamData).length - 1 && Object.keys(projectText.teamData).length > 2">, </span>
- <span v-if="index == Object.keys(projectText.teamData).length - 2"> and </span>
- </span>.
- </p-->
</template>
<template #figures>
<AboutTheTeam v-if="projectText.teamData" :key="projectRoute" :data="projectText.teamData"/>
</template>
- <template #belowExplanation>
- <h3>Project visualizations</h3>
- </template>
</VizSection>
- <ChartGrid :view="currentView"/>
<ReferencesSection v-if="projectReferences" title="Project resources" titleLevel="3" :references="projectReferences"/>
</div>
<PreFooterCodeLinks :gitHubRepositoryLink="gitHubRepositoryLink"/>
--
GitLab
From fe85474485c17c9790c46b64545b102e158eeaf4 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 20:45:22 -0500
Subject: [PATCH 06/13] Update project page headings
---
src/views/VisualizationView.vue | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/views/VisualizationView.vue b/src/views/VisualizationView.vue
index 223e095..e5041d8 100644
--- a/src/views/VisualizationView.vue
+++ b/src/views/VisualizationView.vue
@@ -25,7 +25,7 @@
>
<!-- HEADING -->
<template #heading>
- <h3>Project motivation</h3>
+ <h3>About the {{ projectText.title }} research</h3>
</template>
<template #aboveExplanation>
<p v-html="projectText.motivation" />
@@ -38,7 +38,7 @@
>
<!-- HEADING -->
<template #heading>
- <h3>Project visualizations</h3>
+ <h3>{{ projectText.title }} visualizations</h3>
</template>
<template #figures>
<ChartGrid :view="currentView"/>
@@ -51,7 +51,7 @@
>
<!-- HEADING -->
<template #heading>
- <h3 v-if="projectText.teamData">Project team</h3>
+ <h3 v-if="projectText.teamData">Meet the team</h3>
</template>
<template #aboveExplanation>
<p v-if="projectText.teamData && projectText.teamText" v-html="projectText.teamText" />
--
GitLab
From 2be9f9b4223411bea52924904d0585728a47665a Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 20:48:39 -0500
Subject: [PATCH 07/13] update link color
---
src/assets/css/base.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/assets/css/base.css b/src/assets/css/base.css
index a276694..3e4e1cb 100644
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -33,7 +33,7 @@
--color-overlay: var(--black-soft);
--color-overlay-text: var(--white-soft);
--color-code-links-background: var(--medium-grey);
- --color-link: var(--medium-purple);
+ --color-link: var(--medium-blue);
--color-USGS-header-footer: var(--usgs-blue);
}
--
GitLab
From 5cfd5b10a5cc58006fafbe4a58d3464c259678e3 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 20:49:02 -0500
Subject: [PATCH 08/13] Update language linking to Beaufort USGS page
---
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 e3bd20d..ec099c5 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -43,7 +43,7 @@ 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 micro-fossils 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 the bottom-dwelling, microscopic arthropods (called Ostracodes) and single-celled protists (called Forams), the Beaufort Sea researchers can compare the historical conditions of the Arctic and better understand the effects of recent climate change in the region. For more information, visit the <a href='https://www.usgs.gov/programs/climate-research-and-development-program/science/land-sea-linkages-arctic', target='_blank'>project page</a>.",
+ 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 micro-fossils 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 the bottom-dwelling, microscopic arthropods (called Ostracodes) and single-celled protists (called Forams), 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" },
--
GitLab
From ab9f20a5260461c1a8fbe3ab7e22abccffcf28f2 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 21:01:49 -0500
Subject: [PATCH 09/13] move references to project pages
---
src/assets/text/references.js | 30 ++----------------------------
1 file changed, 2 insertions(+), 28 deletions(-)
diff --git a/src/assets/text/references.js b/src/assets/text/references.js
index 3818f74..6c763c5 100644
--- a/src/assets/text/references.js
+++ b/src/assets/text/references.js
@@ -57,7 +57,7 @@ export default {
doi: "https://doi.org/10.1029/2006WR005653"
},
],
- GlacierScan: [
+ fireinice: [
{
reference: "Reference 1.",
num: "1",
@@ -72,7 +72,7 @@ export default {
doi: "https://doi.org/10.5066/P9DNAN1M"
},
],
- BeaufortSeaSpecies:[
+ beaufortsea:[
{
reference: "Reference 1.",
num: "1",
@@ -140,32 +140,6 @@ export default {
link: "https://observablehq.com/@d3/zoomable-circle-packing",
doi: null
},
- {
- reference: "Reference 2.",
- num: "2",
- authors: "Lynch, A.J., Embke, H.S., Nyboer, E.A., Wood, L.E., Thorpe, A., Phang, S.C., Viana, D.F., & Golden, C.D.",
- year: "2023",
- title: "Global dataset of nutritional value, economic value, and climate vulnerability for species-specific recreational fisheries harvest for consumption",
- journal: false,
- journal_name: "",
- journal_issue: "",
- data_release: true,
- link: "https://www.sciencebase.gov/catalog/item/644ae0e0d34e45f6ddccf773",
- doi: "https://doi.org/10.5066/P9WO91SZ"
- },
- {
- reference: "Reference 3.",
- num: "3",
- authors: "Lynch, A.J., Embke, H.S., Nyboer, E.A., Wood, L.E., Thorpe, A., Phang, S.C., Viana, D.F., Golden, C.D., Milardi, M., Arlinghaus, R., Baigun, C., Beard, T.D., Cooke, S.J., Cowx, I.G., Koehn, J.D., Lyach, R., Potts, W., Robertson, A.M., Schmidhuber, J., & Weyl, O.L.F.",
- year: "2024",
- title: "Inland recreational fisheries contribute nutritional benefits and economic value but are vulnerable to climate change",
- link: "https://www.nature.com/articles/s43016-024-00961-8",
- journal: true,
- journal_name: "Nature Food",
- journal_issue: "5",
- data_release: false,
- doi: "https://doi.org/10.1038/s43016-024-00961-8"
- },
],
fishasfood: [
{
--
GitLab
From 284a882acb887dded4e8b096216901c9ecc44bdf Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 21:14:48 -0500
Subject: [PATCH 10/13] move circle packing reference into code
---
src/assets/text/references.js | 15 ---------------
src/components/FishAsFoodCirclePackingViz.vue | 1 +
2 files changed, 1 insertion(+), 15 deletions(-)
diff --git a/src/assets/text/references.js b/src/assets/text/references.js
index 6c763c5..1280dd4 100644
--- a/src/assets/text/references.js
+++ b/src/assets/text/references.js
@@ -126,21 +126,6 @@ export default {
doi: "https://doi.org/10.1007/s41063-018-0058-7"
}
],
- FishAsFoodCirclePacking: [
- {
- reference: "Reference 1.",
- num: "1",
- authors: "Bostock, M.",
- year: "2023",
- title: "Zoomable circle packing",
- journal: false,
- journal_name: "",
- journal_issue: "",
- data_release: false,
- link: "https://observablehq.com/@d3/zoomable-circle-packing",
- doi: null
- },
- ],
fishasfood: [
{
reference: "Reference 1.",
diff --git a/src/components/FishAsFoodCirclePackingViz.vue b/src/components/FishAsFoodCirclePackingViz.vue
index 389a637..18abd2b 100644
--- a/src/components/FishAsFoodCirclePackingViz.vue
+++ b/src/components/FishAsFoodCirclePackingViz.vue
@@ -52,6 +52,7 @@
buildChart(data);
});
+ // https://observablehq.com/@d3/zoomable-circle-packing
function buildChart(data) {
// Specify the chart’s dimensions.
--
GitLab
From 748f3fd5a228b69e7c5b33e4bd15e7d6dc1b55ad Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 21:26:52 -0500
Subject: [PATCH 11/13] Simplify authorship statements
---
src/assets/text/authors.js | 78 ++++++++--------------------
src/components/AuthorshipSection.vue | 16 ++++--
src/components/SubPage.vue | 4 +-
3 files changed, 36 insertions(+), 62 deletions(-)
diff --git a/src/assets/text/authors.js b/src/assets/text/authors.js
index fc83e21..d5e08b0 100644
--- a/src/assets/text/authors.js
+++ b/src/assets/text/authors.js
@@ -86,34 +86,6 @@ export default {
},
],
additionalAuthors: [
- {
- firstName: 'Hayley',
- lastName: 'Corson-Dosch',
- fullName: 'Hayley Corson-Dosch',
- initials: 'HCD',
- profile_link: 'https://www.usgs.gov/staff-profiles/hayley-corson-dosch',
-
- role: 'lead developer',
- contribution: 'co-led the design and development of the website'
- },
- {
- firstName: 'Maggie',
- lastName: 'Jaenicke',
- fullName: 'Maggie Jaenicke',
- initials: 'MJ',
- profile_link: 'https://www.usgs.gov/staff-profiles/margaret-maggie-jaenicke',
- role: 'lead developer',
- contribution: 'co-led the design and development of the website'
- },
- {
- firstName: 'Cee',
- lastName: 'Nell',
- fullName: 'Cee Nell',
- initials: 'CN',
- profile_link: 'https://www.usgs.gov/staff-profiles/cee-nell',
- role: 'team lead',
- contribution: 'acted in an advisory role, contributed to website development, and reviewed code'
- }
]
},
ThreatBumpChart: {
@@ -126,7 +98,7 @@ export default {
profile_link: 'https://www.usgs.gov/staff-profiles/cee-nell',
role: 'team lead',
contribution: 'led the development of the data visualization'
- },
+ }
],
additionalAuthors: [
{
@@ -135,9 +107,21 @@ export default {
fullName: 'Hayley Corson-Dosch',
initials: 'HCD',
profile_link: 'https://www.usgs.gov/staff-profiles/hayley-corson-dosch',
-
role: 'lead developer',
- contribution: 'co-led the design and development of the website'
+ contribution: 'contributed to the data visualization'
+ }
+ ]
+ },
+ BeaufortSeaSpecies: {
+ primaryAuthors: [
+ {
+ firstName: 'Althea',
+ lastName: 'Archer',
+ fullName: 'Althea Anne Archer',
+ initials: 'AA',
+ profile_link: 'https://www.usgs.gov/staff-profiles/althea-archer',
+ role: 'lead author',
+ contribution: 'led the development of the data visualization, created illustrations, and wrote the narrative'
},
{
firstName: 'Maggie',
@@ -146,11 +130,13 @@ export default {
initials: 'MJ',
profile_link: 'https://www.usgs.gov/staff-profiles/margaret-maggie-jaenicke',
role: 'lead developer',
- contribution: 'co-led the design and development of the website'
+ contribution: 'created illustrations'
}
+ ],
+ additionalAuthors: [
]
},
- BeaufortSeaSpecies: {
+ BeaufortSeaCore: {
primaryAuthors: [
{
firstName: 'Althea',
@@ -161,8 +147,6 @@ export default {
role: 'lead author',
contribution: 'led the development of the data visualization, created illustrations, and wrote the narrative'
},
- ],
- additionalAuthors: [
{
firstName: 'Maggie',
lastName: 'Jaenicke',
@@ -170,17 +154,10 @@ export default {
initials: 'MJ',
profile_link: 'https://www.usgs.gov/staff-profiles/margaret-maggie-jaenicke',
role: 'lead developer',
- contribution: 'co-led the design and development of the website and created illustrations'
- },
- {
- firstName: 'Hayley',
- lastName: 'Corson-Dosch',
- fullName: 'Hayley Corson-Dosch',
- initials: 'HCD',
- profile_link: 'https://www.usgs.gov/staff-profiles/hayley-corson-dosch',
- role: 'lead developer',
- contribution: 'co-led the design and development of the website'
+ contribution: 'created illustrations'
}
+ ],
+ additionalAuthors: [
]
},
FishAsFoodCirclePacking: {
@@ -193,19 +170,10 @@ export default {
profile_link: 'https://www.usgs.gov/staff-profiles/hayley-corson-dosch',
role: 'lead developer',
- contribution: 'built this data visualization, and also co-led the design and development of the website'
+ contribution: 'built this data visualization'
},
],
additionalAuthors: [
- {
- firstName: 'Maggie',
- lastName: 'Jaenicke',
- fullName: 'Maggie Jaenicke',
- initials: 'MJ',
- profile_link: 'https://www.usgs.gov/staff-profiles/margaret-maggie-jaenicke',
- role: 'lead developer',
- contribution: 'co-led the design and development of the website'
- }
]
},
};
\ No newline at end of file
diff --git a/src/components/AuthorshipSection.vue b/src/components/AuthorshipSection.vue
index 298d17b..d8000d7 100644
--- a/src/components/AuthorshipSection.vue
+++ b/src/components/AuthorshipSection.vue
@@ -6,9 +6,9 @@
>
<!-- HEADING -->
<template #heading>
- <h2>
- Authors
- </h2>
+ <h1 v-if="titleLevel === '1'" v-html="title" />
+ <h2 v-if="titleLevel === '2'" v-html="title" />
+ <h3 v-if="titleLevel === '3'" v-html="title" />
</template>
<template #aboveExplanation>
<div
@@ -58,7 +58,7 @@
<span v-if="index == Object.keys(additionalAuthors).length - 2"> and </span>
</span>
<span>
- also contributed to the site.
+ also contributed.
</span>
</span>
<span
@@ -101,6 +101,12 @@
// define props
const props = defineProps({
+ title: {
+ type: String,
+ },
+ titleLevel: {
+ type: String,
+ },
authors:{
type: Object,
},
@@ -113,7 +119,7 @@
// If showAuthors is true, turn on or off attribution for additional authors
const showAdditionalAuthors = ref(null);
// If showAuthors is true, turn on or off contribution statements for ALL authors
- const showContributionStatements = ref(true);
+ const showContributionStatements = ref(false);
// If showAuthors is true and if showContributionStatements is true, turn on or off contribution statements for ADDITIONAL authors
const showAdditionalContributionStatement = ref(null);
diff --git a/src/components/SubPage.vue b/src/components/SubPage.vue
index da975a3..37adac5 100644
--- a/src/components/SubPage.vue
+++ b/src/components/SubPage.vue
@@ -13,8 +13,8 @@
<p>This visualization is associated with the <RouterLink :to="`/${projectRoute}`"> {{ filteredChartContent.project }}</RouterLink> project.</p>
</div>
<VizComponent :id="`${vizRoute}-viz`" :text="vizText"/>
- <ReferencesSection v-if="vizReferences" title="References" titleLevel="2" :references="vizReferences"/>
- <AuthorshipSection v-if="vizAuthors" :authors="vizAuthors"/>
+ <ReferencesSection v-if="vizReferences" title="References" titleLevel="3" :references="vizReferences"/>
+ <AuthorshipSection v-if="vizAuthors" title="Authorship" titleLevel="3" :authors="vizAuthors"/>
</div>
<PreFooterCodeLinks :gitHubRepositoryLink="vizGitHubRepositoryLink"/>
</section>
--
GitLab
From d1afb5626ea9466cdba10537dc6ce7e465b90d39 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 21:35:48 -0500
Subject: [PATCH 12/13] further style authorship section to reduce visual
weight
---
src/assets/text/authors.js | 9 ---------
src/components/AuthorshipSection.vue | 8 +++++++-
src/components/SubPage.vue | 2 +-
3 files changed, 8 insertions(+), 11 deletions(-)
diff --git a/src/assets/text/authors.js b/src/assets/text/authors.js
index d5e08b0..72306e8 100644
--- a/src/assets/text/authors.js
+++ b/src/assets/text/authors.js
@@ -101,15 +101,6 @@ export default {
}
],
additionalAuthors: [
- {
- firstName: 'Hayley',
- lastName: 'Corson-Dosch',
- fullName: 'Hayley Corson-Dosch',
- initials: 'HCD',
- profile_link: 'https://www.usgs.gov/staff-profiles/hayley-corson-dosch',
- role: 'lead developer',
- contribution: 'contributed to the data visualization'
- }
]
},
BeaufortSeaSpecies: {
diff --git a/src/components/AuthorshipSection.vue b/src/components/AuthorshipSection.vue
index d8000d7..01a1f46 100644
--- a/src/components/AuthorshipSection.vue
+++ b/src/components/AuthorshipSection.vue
@@ -6,6 +6,7 @@
>
<!-- HEADING -->
<template #heading>
+ <hr>
<h1 v-if="titleLevel === '1'" v-html="title" />
<h2 v-if="titleLevel === '2'" v-html="title" />
<h3 v-if="titleLevel === '3'" v-html="title" />
@@ -17,8 +18,9 @@
class="text-content"
>
<p>
+ This visualization was developed by the <a href='https://labs.waterdata.usgs.gov/visualizations/' target='_blank'>USGS Vizlab</a>
<span id="primary-author-statment">
- The development of this visualization was led by
+ and led by
<span
v-for="(author, index) in primaryAuthors"
:id="`initial-${author.initials}`"
@@ -132,4 +134,8 @@
</script>
<style>
+ #authors {
+ font-style: italic;
+ font-weight: 300;
+ }
</style>
\ No newline at end of file
diff --git a/src/components/SubPage.vue b/src/components/SubPage.vue
index 37adac5..f768008 100644
--- a/src/components/SubPage.vue
+++ b/src/components/SubPage.vue
@@ -14,7 +14,7 @@
</div>
<VizComponent :id="`${vizRoute}-viz`" :text="vizText"/>
<ReferencesSection v-if="vizReferences" title="References" titleLevel="3" :references="vizReferences"/>
- <AuthorshipSection v-if="vizAuthors" title="Authorship" titleLevel="3" :authors="vizAuthors"/>
+ <AuthorshipSection v-if="vizAuthors" title="" titleLevel="3" :authors="vizAuthors"/>
</div>
<PreFooterCodeLinks :gitHubRepositoryLink="vizGitHubRepositoryLink"/>
</section>
--
GitLab
From 5b279afd3c328c905eaf696b31831cf511e2c889 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 22:10:01 -0500
Subject: [PATCH 13/13] drop About page and move content to landing page
---
src/assets/text/text.js | 16 +++--
src/components/AboutPage.vue | 74 -----------------------
src/components/NavBar.vue | 9 ++-
src/router/index.js | 6 --
src/views/VisualizationView.vue | 104 +++++++++++++++++++++++---------
5 files changed, 91 insertions(+), 118 deletions(-)
delete mode 100644 src/components/AboutPage.vue
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index ec099c5..b46b4b3 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -1,16 +1,20 @@
export default {
- pageTitle: "Earth is changing...",
- pageSubTitle: "USGS scientists research climate change on the ground",
- collaborationDescription: "The climate chart gallery is a shared initiative between the U.S. Geological Survey (USGS) <a href='https://www.usgs.gov/mission-areas/water-resources', target='_blank'>Water Resources Mission Area</a>, <a href='https://www.usgs.gov/mission-areas/ecosystems', target='_blank'>Ecosystems Mission Area</a>, and <a href='https://www.usgs.gov/programs/climate-adaptation-science-centers', target='_blank'>Climate Adaptation Science Centers</a> to communicate key findings of USGS climate science in innovative ways, and to encourage creativity, exploration, and community in data visualization across USGS mission areas.",
- vizlab: {
- teamText: "The USGS Vizlab...View the Vizlab <a href='https://labs.waterdata.usgs.gov/visualizations/' target='_blank'>portfolio</a>.",
+ landingPage: {
+ pageTitle: "Earth is changing...",
+ pageSubTitle: "USGS scientists research climate change on the ground",
+ collaborationHeading: "The climate chart gallery project",
+ collaborationDescription: "The climate chart gallery is a shared initiative between the U.S. Geological Survey (USGS) <a href='https://www.usgs.gov/mission-areas/water-resources', target='_blank'>Water Resources Mission Area</a>, <a href='https://www.usgs.gov/mission-areas/ecosystems', target='_blank'>Ecosystems Mission Area</a>, and <a href='https://www.usgs.gov/programs/climate-adaptation-science-centers', target='_blank'>Climate Adaptation Science Centers</a> to communicate key findings of USGS climate science in innovative ways, and to encourage creativity, exploration, and community in data visualization across USGS mission areas.",
+ teamHeading: "The USGS Vizlab team",
+ teamText: "The USGS Vizlab is a data visualization team within the USGS <a href='https://www.usgs.gov/mission-areas/water-resources', target='_blank'>Water Resources Mission Area</a>. View the Vizlab <a href='https://labs.waterdata.usgs.gov/visualizations/' target='_blank'>portfolio</a>.",
teamData: [
{ name: "Hayley Corson-Dosch", link: "https://www.usgs.gov/staff-profiles/hayley-corson-dosch", image: "https://labs.waterdata.usgs.gov/visualizations/headshots/HCorson-Dosch.png" },
{ name: "Maggie Jaenicke", link: "https://www.usgs.gov/staff-profiles/margaret-maggie-jaenicke", image: "https://labs.waterdata.usgs.gov/visualizations/headshots/MaggieJaenicke.png" },
{ name: "Cee Nell", link: "https://www.usgs.gov/staff-profiles/cee-nell", image: "https://d9-wret.s3.us-west-2.amazonaws.com/assets/palladium/production/s3fs-public/styles/staff_profile/public/media/images/cee%20nell%20resized.png?h=53fbb397&itok=I7tqKZDm" },
{ name: "Althea Archer", link: "https://www.usgs.gov/staff-profiles/althea-archer", image: "https://d9-wret.s3.us-west-2.amazonaws.com/assets/palladium/production/s3fs-public/styles/staff_profile/public/media/images/aaarcher_staff_profile.jpg?h=585bdce6&itok=Z0LQ51Gs" },
{ name: "Jeffrey Kwang", link: "https://www.usgs.gov/staff-profiles/jeffrey-kwang", image: "https://d9-wret.s3.us-west-2.amazonaws.com/assets/palladium/production/s3fs-public/styles/staff_profile/public/media/images/J_Kwang_staffprofilephoto.jpg?h=d834b369&itok=MInrdIz2" }
- ]
+ ],
+ projectsHeading: "USGS climate projects",
+ projectsLeadIn: "The USGS climate projects currently highlighted in this page are the"
},
projects: {
// keys must match project routes (with '-' replaced with '')
diff --git a/src/components/AboutPage.vue b/src/components/AboutPage.vue
deleted file mode 100644
index b24b6c6..0000000
--- a/src/components/AboutPage.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
- <div class="page-content">
- <!---VizSection-->
- <VizSection
- :figures="false"
- :fig-caption="false"
- >
- <!-- HEADING -->
- <template #heading>
- <h2>
- About the climate chart gallery project
- </h2>
- </template>
- <template #aboveExplanation>
- <p v-if="text.collaborationDescription" v-html="text.collaborationDescription" />
- </template>
- </VizSection>
- <!---VizSection-->
- <!---VizSection-->
- <VizSection
- :figures="true"
- :fig-caption="false"
- >
- <!-- HEADING -->
- <template #heading>
- <h3 v-if="vizlabText.teamData">The USGS Vizlab team</h3>
- </template>
- <template #aboveExplanation>
- <p v-if="vizlabText.teamData && vizlabText.teamText" v-html="vizlabText.teamText" />
- </template>
- <template #figures>
- <AboutTheTeam v-if="vizlabText.teamData" :data="vizlabText.teamData"/>
- </template>
- </VizSection>
- <!---VizSection-->
- <VizSection
- :figures="false"
- :fig-caption="false"
- >
- <!-- HEADING -->
- <template #heading>
- <h3>
- USGS climate projects
- </h3>
- </template>
- <template #aboveExplanation>
- <p>The current USGS climate projects highlighted in this page are the
- <span v-for="projectKey in projectKeys" :key="projectKey">
- <RouterLink :key="projectKey" :to="{ path: `/${text.projects[projectKey].title.replace(/\s+/g, '-').toLowerCase()}` }"> {{ text.projects[projectKey].title }}</RouterLink>
- <span v-if="projectKeys.indexOf(projectKey) != projectKeys.length - 1 && projectKeys.length > 2">, </span>
- <span v-if="projectKeys.indexOf(projectKey) == projectKeys.length - 2"> and </span>
- </span>
- projects.
- </p>
- </template>
- </VizSection>
- </div>
- <PreFooterCodeLinks :gitHubRepositoryLink="gitHubRepositoryLink"/>
-</template>
-
-<script setup>
- import PreFooterCodeLinks from "@/components/PreFooterCodeLinks.vue";
- import VizSection from '@/components/VizSection.vue';
- import AboutTheTeam from '@/components/AboutTheTeam.vue'
- import text from "@/assets/text/text.js";
-
- // global variables
- const vizlabText = text.vizlab;
- const projectKeys = Object.keys(text.projects).sort(); // Get alphabetical list of project keys
- const gitHubRepositoryLink = import.meta.env.VITE_APP_GITHUB_REPOSITORY_LINK;
-</script>
-
-<style scoped lang="scss">
-</style>
\ No newline at end of file
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 0e9e77f..6a6800f 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -3,13 +3,12 @@
<div class="topnav">
<RouterLink :to="{ path: '/' }">Home</RouterLink>
<div class="dropdown">
- <a href="javascript:void(0)" class="dropdown">Projects</a>
- <div class="dropdown-content">
- <RouterLink v-for="projectKey in projectKeys" :key="projectKey" :to="{ path: `/${text.projects[projectKey].title.replace(/\s+/g, '-').toLowerCase()}` }"> {{ text.projects[projectKey].title }} </RouterLink>
+ <a href="javascript:void(0)" class="dropdown">Projects</a>
+ <div class="dropdown-content">
+ <RouterLink v-for="projectKey in projectKeys" :key="projectKey" :to="{ path: `/${text.projects[projectKey].title.replace(/\s+/g, '-').toLowerCase()}` }"> {{ text.projects[projectKey].title }} </RouterLink>
+ </div>
</div>
</div>
- <RouterLink :to="{ path: '/about' }">About</RouterLink>
- </div>
</header>
</template>
diff --git a/src/router/index.js b/src/router/index.js
index b67a778..54431de 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,6 @@
import { createRouter, createWebHashHistory } from 'vue-router'
import VisualizationView from '@/views/VisualizationView.vue'
import SubPage from '@/components/SubPage.vue'
-import AboutPage from '@/components/AboutPage.vue'
function lazyLoad(view){
return() => import(`@/views/${view}.vue`)
@@ -30,11 +29,6 @@ const router = createRouter({
name: 'SubPage',
component: SubPage
},
- {
- path: '/about',
- name: 'About',
- component: AboutPage
- },
{
path: "/404",
name: "Error404",
diff --git a/src/views/VisualizationView.vue b/src/views/VisualizationView.vue
index e5041d8..820158c 100644
--- a/src/views/VisualizationView.vue
+++ b/src/views/VisualizationView.vue
@@ -5,61 +5,110 @@
<div v-if="!projectPage">
<div class="typewriter">
<h1 class="title">
- {{ text.pageTitle }}
+ {{ pageText.pageTitle }}
</h1>
</div>
<h2 class="subtitle">
- {{ text.pageSubTitle }}
+ {{ pageText.pageSubTitle }}
</h2>
</div>
<h2 v-if="projectPage" class="subtitle">
- {{ projectText.title }} project
+ The {{ pageText.title }} project
</h2>
</div>
<ChartGrid v-if="!projectPage" :view="currentView"/>
- <!---VizSection-->
- <VizSection
- v-if="projectPage"
+ <div v-if="!projectPage">
+ <!---About the project-->
+ <VizSection
:figures="false"
:fig-caption="false"
- >
- <!-- HEADING -->
+ >
<template #heading>
- <h3>About the {{ projectText.title }} research</h3>
+ <hr>
+ <h2>
+ {{ pageText.collaborationHeading }}
+ </h2>
</template>
<template #aboveExplanation>
- <p v-html="projectText.motivation" />
+ <p v-if="pageText.collaborationDescription" v-html="pageText.collaborationDescription" />
</template>
- </VizSection>
- <VizSection
- v-if="projectPage"
+ </VizSection>
+ <!---About Vizlab-->
+ <VizSection
:figures="true"
:fig-caption="false"
- >
- <!-- HEADING -->
+ >
<template #heading>
- <h3>{{ projectText.title }} visualizations</h3>
+ <h3 v-if="pageText.teamData"> {{ pageText.teamHeading }} </h3>
+ </template>
+ <template #aboveExplanation>
+ <p v-if="pageText.teamData && pageText.teamText" v-html="pageText.teamText" />
+ </template>
+ <template #figures>
+ <AboutTheTeam v-if="pageText.teamData" :data="pageText.teamData"/>
+ </template>
+ </VizSection>
+ <!---Highlighted Projects-->
+ <VizSection
+ :figures="false"
+ :fig-caption="false"
+ >
+ <template #heading>
+ <h3>
+ {{ pageText.projectsHeading }}
+ </h3>
+ </template>
+ <template #aboveExplanation>
+ <p> {{ pageText.projectsLeadIn }}
+ <span v-for="projectKey in projectKeys" :key="projectKey">
+ <RouterLink :key="projectKey" :to="{ path: `/${text.projects[projectKey].title.replace(/\s+/g, '-').toLowerCase()}` }"> {{ text.projects[projectKey].title }}</RouterLink>
+ <span v-if="projectKeys.indexOf(projectKey) != projectKeys.length - 1 && projectKeys.length > 2">, </span>
+ <span v-if="projectKeys.indexOf(projectKey) == projectKeys.length - 2"> and </span>
+ </span>
+ projects.
+ </p>
+ </template>
+ </VizSection>
+ </div>
+ <!---Project page-->
+ <div v-if="projectPage">
+ <VizSection
+ :figures="false"
+ :fig-caption="false"
+ >
+ <template #heading>
+ <h3>About the {{ pageText.title }} research</h3>
+ </template>
+ <template #aboveExplanation>
+ <p v-html="pageText.motivation" />
+ </template>
+ </VizSection>
+ <VizSection
+ :figures="true"
+ :fig-caption="false"
+ >
+ <template #heading>
+ <h3>{{ pageText.title }} visualizations</h3>
</template>
<template #figures>
<ChartGrid :view="currentView"/>
</template>
- </VizSection>
- <VizSection
- v-if="projectPage"
+ </VizSection>
+ <VizSection
:figures="true"
:fig-caption="false"
- >
- <!-- HEADING -->
+ >
<template #heading>
- <h3 v-if="projectText.teamData">Meet the team</h3>
+ <h3 v-if="pageText.teamData">Meet the team</h3>
</template>
<template #aboveExplanation>
- <p v-if="projectText.teamData && projectText.teamText" v-html="projectText.teamText" />
+ <p v-if="pageText.teamData && pageText.teamText" v-html="pageText.teamText" />
</template>
<template #figures>
- <AboutTheTeam v-if="projectText.teamData" :key="projectRoute" :data="projectText.teamData"/>
+ <AboutTheTeam v-if="pageText.teamData" :key="projectRoute" :data="pageText.teamData"/>
</template>
- </VizSection>
+ </VizSection>
+ </div>
<ReferencesSection v-if="projectReferences" title="Project resources" titleLevel="3" :references="projectReferences"/>
</div>
<PreFooterCodeLinks :gitHubRepositoryLink="gitHubRepositoryLink"/>
@@ -83,14 +132,15 @@
const mobileView = isMobile;
const projectRoute = ref(route.params.projectRoute)
const projectKey = ref(projectRoute.value ? `${projectRoute.value.replace(/-/g, '')}` : null)
+ const projectKeys = Object.keys(text.projects).sort(); // Get alphabetical list of project keys
const currentView = computed(() => {
return projectRoute.value ? projectRoute.value : 'all'
});
const projectPage = computed(() => {
return projectRoute.value ? true : false
});
- const projectText = computed(() => {
- return projectRoute.value ? text.projects[projectKey.value] : null
+ const pageText = computed(() => {
+ return projectRoute.value ? text.projects[projectKey.value] : text.landingPage
});
const projectReferences = computed(() => {
return projectRoute.value ? references[projectKey.value] : null
--
GitLab