diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js
index 472e1d457bf0e615a43d8c2ea1a7445a93f4e0cf..6fb09ed3a3f1bc834222ff4909ed50a23961d881 100644
--- a/src/assets/content/ChartGrid.js
+++ b/src/assets/content/ChartGrid.js
@@ -9,7 +9,8 @@ export default {
vizRoute: 'inland-fish-threats',
img_src: 'ThreatBumpChart_thumbnail.png',
alt: '',
- description: '... and inland fisheries are threatened.'
+ chartOrder: 1,
+ description: 'Inland fisheries are threatened.'
},
{
title: 'Glacier/Topography D3 Cross-Section Scan',
@@ -18,7 +19,8 @@ export default {
vizRoute: 'glacier-scan',
img_src: 'glacial_xray_thumbnail.png',
alt: '',
- description: '...and researchers are studying glacial ice.'
+ chartOrder: 1,
+ description: 'Researchers are studying glacial ice.'
},
{
title: 'Global economic value of recreationally fished species',
@@ -27,7 +29,8 @@ export default {
vizRoute: 'inland-rec-fish-value',
img_src: 'circle-pack-thumbnail.png',
alt: '',
- description: '...and inland recreational fishing contributes economic value.'
+ chartOrder: 1,
+ description: 'Inland recreational fishing contributes economic value.'
},
{
title: 'Beaufort Sea Sediment Coring',
@@ -36,7 +39,8 @@ export default {
vizRoute: 'beaufort-sea-ice-coring',
img_src: 'BeaufortSeaCore_thumbnail.PNG',
alt: '',
- description: '...and sediment cores can help build past and present climates.'
+ chartOrder: 1,
+ description: 'Sediment cores can help build past and present climates.'
},
{
title: 'Beaufort Sea Species',
@@ -45,7 +49,8 @@ export default {
vizRoute: 'beaufort-sea-species',
img_src: 'BeaufortSeaSpecies_thumbnail.png',
alt: '',
- description: '...and microfossils can be used to indicate these changes.'
+ chartOrder: 2,
+ description: 'Microfossils can be used to indicate these changes.'
},
{
title: 'Beaufort Sea Timeline',
@@ -54,7 +59,8 @@ export default {
vizRoute: 'beaufort-sea-timeline',
img_src: 'BeaufortSeaTimeline_thumbnail.PNG',
alt: '',
- description: '...and communities of microorganisms on the sea floor are affected.'
+ chartOrder: 3,
+ description: 'Communities of microorganisms on the sea floor are affected.'
}
]
};
\ No newline at end of file
diff --git a/src/assets/css/base.css b/src/assets/css/base.css
index a27669476345c7e00e23a3f5bbf6fc93cf5463f8..3e4e1cbeaf89dca6939b4cd80d4e2a0332df85cb 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);
}
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 0add83640ddcec4d31ea34d536f18060dd072949..d7b5d4a963d05acc3c08e962a4e71f6946d27b87 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/authors.js b/src/assets/text/authors.js
index fc83e21fa1b5937c0b6c9f2a593fa03e510bf54f..72306e803e0dc0f658b3fd0d594bff7828434756 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,18 +98,21 @@ export default {
profile_link: 'https://www.usgs.gov/staff-profiles/cee-nell',
role: 'team lead',
contribution: 'led the development of the data visualization'
- },
+ }
],
additionalAuthors: [
+ ]
+ },
+ BeaufortSeaSpecies: {
+ 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 developer',
- contribution: 'co-led the design and development of the website'
+ 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 +121,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 +138,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 +145,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 +161,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/assets/text/references.js b/src/assets/text/references.js
index 3818f748ad53751ce99ae140639936a6c6b4dd81..1280dd49ae39122b557c85d3f47121d9e8733da4 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",
@@ -126,47 +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
- },
- {
- 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: [
{
reference: "Reference 1.",
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index ec4aa297de00369f8a2a177a2b223f98234a967d..b46b4b3376a1a9ba153dfdd6404c89594da618c2 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -1,15 +1,20 @@
export default {
- pageTitle: "Earth is changing...",
- 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 '')
@@ -42,7 +47,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" },
diff --git a/src/components/AboutPage.vue b/src/components/AboutPage.vue
deleted file mode 100644
index b24b6c63f80917315960f30a81a9067bc6bf2e17..0000000000000000000000000000000000000000
--- 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/AuthorshipSection.vue b/src/components/AuthorshipSection.vue
index 298d17b569d3ea012aea19c230dc9c948905b1dd..01a1f462312873f4f34bf4a43b3e084c278859f4 100644
--- a/src/components/AuthorshipSection.vue
+++ b/src/components/AuthorshipSection.vue
@@ -6,9 +6,10 @@
>
<!-- HEADING -->
<template #heading>
- <h2>
- Authors
- </h2>
+ <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" />
</template>
<template #aboveExplanation>
<div
@@ -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}`"
@@ -58,7 +60,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 +103,12 @@
// define props
const props = defineProps({
+ title: {
+ type: String,
+ },
+ titleLevel: {
+ type: String,
+ },
authors:{
type: Object,
},
@@ -113,7 +121,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);
@@ -126,4 +134,8 @@
</script>
<style>
+ #authors {
+ font-style: italic;
+ font-weight: 300;
+ }
</style>
\ No newline at end of file
diff --git a/src/components/ChartGrid.vue b/src/components/ChartGrid.vue
index 7f2c7b7ec4577c18e21c41288af7f5806e480375..e5f7982e396551ce995f96dfe7c55759e574f809 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
diff --git a/src/components/FishAsFoodCirclePackingViz.vue b/src/components/FishAsFoodCirclePackingViz.vue
index 389a6375da3f184c773e9e87fde6f005ff913a2a..18abd2bb784d46986cbb5fbfecbb02f3944ab58f 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.
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 0e9e77f4c8074e95117af0961e736e2f2f1761c9..6a6800f0b8852dd92ff6eac6681902728f81bfb2 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/components/SubPage.vue b/src/components/SubPage.vue
index da975a3bb1cb2775ad1e94409ae648f1152c0852..f76800856fdd9e8305d648aaf686a073bb6cb0ca 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="" titleLevel="3" :authors="vizAuthors"/>
</div>
<PreFooterCodeLinks :gitHubRepositoryLink="vizGitHubRepositoryLink"/>
</section>
diff --git a/src/router/index.js b/src/router/index.js
index b67a77895e5e082a4dc56352d415dbde924e3e3d..54431de34d328b79dc608bc2a99999a61514ca86 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 0005b3c22a9e72bae2e7449301ddf034b3bc70fe..820158cee6f111e3968cf948cb051992435865d7 100644
--- a/src/views/VisualizationView.vue
+++ b/src/views/VisualizationView.vue
@@ -2,52 +2,113 @@
<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">
+ {{ pageText.pageTitle }}
+ </h1>
+ </div>
+ <h2 class="subtitle">
+ {{ pageText.pageSubTitle }}
+ </h2>
</div>
<h2 v-if="projectPage" class="subtitle">
- {{ projectText.title }} project visualizations
+ The {{ pageText.title }} project
</h2>
</div>
- <ChartGrid :view="currentView"/>
- <!---VizSection-->
- <VizSection
- v-if="projectPage"
+ <ChartGrid v-if="!projectPage" :view="currentView"/>
+ <div v-if="!projectPage">
+ <!---About the project-->
+ <VizSection
+ :figures="false"
+ :fig-caption="false"
+ >
+ <template #heading>
+ <hr>
+ <h2>
+ {{ pageText.collaborationHeading }}
+ </h2>
+ </template>
+ <template #aboveExplanation>
+ <p v-if="pageText.collaborationDescription" v-html="pageText.collaborationDescription" />
+ </template>
+ </VizSection>
+ <!---About Vizlab-->
+ <VizSection
:figures="true"
:fig-caption="false"
- >
- <!-- HEADING -->
+ >
+ <template #heading>
+ <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>
- <h2>
- About the {{ projectText.title }} project
- </h2>
+ <h3>About the {{ pageText.title }} research</h3>
</template>
<template #aboveExplanation>
- <h3>Project motivation</h3>
- <p v-html="projectText.motivation" />
- <h3 v-if="projectText.teamData">Project team</h3>
- <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-->
+ <p v-html="pageText.motivation" />
+ </template>
+ </VizSection>
+ <VizSection
+ :figures="true"
+ :fig-caption="false"
+ >
+ <template #heading>
+ <h3>{{ pageText.title }} visualizations</h3>
</template>
<template #figures>
- <AboutTheTeam v-if="projectText.teamData" :key="projectRoute" :data="projectText.teamData"/>
+ <ChartGrid :view="currentView"/>
</template>
- </VizSection>
+ </VizSection>
+ <VizSection
+ :figures="true"
+ :fig-caption="false"
+ >
+ <template #heading>
+ <h3 v-if="pageText.teamData">Meet the team</h3>
+ </template>
+ <template #aboveExplanation>
+ <p v-if="pageText.teamData && pageText.teamText" v-html="pageText.teamText" />
+ </template>
+ <template #figures>
+ <AboutTheTeam v-if="pageText.teamData" :key="projectRoute" :data="pageText.teamData"/>
+ </template>
+ </VizSection>
+ </div>
<ReferencesSection v-if="projectReferences" title="Project resources" titleLevel="3" :references="projectReferences"/>
</div>
<PreFooterCodeLinks :gitHubRepositoryLink="gitHubRepositoryLink"/>
@@ -71,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