From 1ab1cf599c35655e3995d38cc8acb97f4272d88a Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Thu, 10 Oct 2024 21:31:25 -0500
Subject: [PATCH] clean up and rearrange timeline text
---
src/assets/content/ChartGrid.js | 2 +-
src/assets/css/main.css | 5 ++++-
src/assets/text/text.js | 12 ++++++------
src/components/BeaufortSeaTimelineViz.vue | 4 ++--
4 files changed, 13 insertions(+), 10 deletions(-)
diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js
index 79e1485..fc943d8 100644
--- a/src/assets/content/ChartGrid.js
+++ b/src/assets/content/ChartGrid.js
@@ -90,7 +90,7 @@ export default {
img_src: 'BeaufortSeaTimeline_thumbnail.PNG',
alt: '',
chartOrder: 3,
- description: 'Communities of microorganisms on the sea floor are affected.'
+ description: 'Microfossil records help reconstruct past climates.'
}
]
};
\ No newline at end of file
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 6045464..eb0d4ec 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -79,7 +79,10 @@ a {
border-radius: 10px;
white-space: nowrap;
font-weight: bold;
- transition: all 0.1s;
+ transition: all 0.1s;
+}
+.central {
+ margin-right: 5px;
}
#cassidulina {
color: white;
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index df16c8a..c36fc6e 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -156,12 +156,12 @@ export default {
},
BeaufortSeaTimeline: {
- heading1: "2000 years of climate history from microfossil assemblages",
- paragraph1: "USGS scientists <a href='/visualizations/climate-charts/#/beaufort-sea/beaufort-sea-ice-coring' target='_blank'>collected sediment cores</a> from the ocean floor at the Beaufort Sea continental shelf north of Yukon, Canada. From the sediment cores, they took 1-cm slices that each represent ~5 years of time to build a 2000-year history. The species of microfossils, including <a href='/visualizations/climate-charts/#/beaufort-sea/beaufort-sea-species' target='_blank'>forams and ostracodes</a>, along with other biochemical signatures in the core samples, help the researchers understand past and present climate conditions.",
- paragraph2: "This interactive bubble chart shows one bubble for each species of microfossil, including the indicator species in the genera <span class='highlight scientificName' id='elphidium'> Elphidium </span>, <span class='highlight scientificName' id='cassidulina'> Cassidulina </span>, and <span class='highlight scientificName' id='paracyprideis'> Paracyprideis </span>, which have declined in relative abundance lately, and <span class='highlight scientificName' id='kotorachythere'> Kotorachythere </span> and <span class='highlight scientificName' id='spiroplectimmina'> Spiroplectimmina </span>, which have increased. Additionally, <span class='highlight scientificName' id='other-species'> other species </span> of ostracodes and forams are represented in the remaining bubbles.",
- paragraph3: "Paired with the bubble chart is the full timeline, with one bar chart for every 100 years from 0 A.D. to 2000 A.D. Hover over the bar chart to see the proportion of each species (height of bar), averaged over the 100 years, and the corresponding bubbles, which are scaled in size to represent relative proportion.",
- heading2: "Why is this important?",
- paragraph4: "We need paleoenvironmental records to place current anthropogenic climate warming and sea-ice loss in a long-term context. Proxy records can extend modern time series, providing baselines for pre-anthropogenic conditions. Paleoclimate research provides a deeper understanding of processes influencing natural climate variability, which enables more reliable predictions for future climate scenarios. Although climate change is a global phenomenon, it has uneven local consequences."
+ heading1: "Microfossils help reconstruct climate records",
+ paragraph1: "Although climate change is a global phenomenon, it has uneven local consequences. Paleoclimate research provides a deeper understanding of processes influencing natural climate variability, which enables more reliable predictions for future climate scenarios. Proxy records, like those constructed from sediment cores, can extend modern time series, providing baselines for pre-anthropogenic conditions. In the Arctic, we need paleoenvironmental records to place current anthropogenic climate warming and loss of sea-ice in a long-term context.",
+ paragraph2: "Here, we can see the full record of microfossil species assemblages in the Beaufort Sea over the past 2000 years, as captured in the sediment record. The abundance of key indicator species has shifted over time, with recent increases in the relative abundance of <span class='highlight central scientificName' id='kotorachythere'> Kotorachythere </span> and <span class='highlight central scientificName' id='spiroplectimmina'> Spiroplectimmina </span> and decreases in the relative abundance of <span class='highlight scientificName' id='elphidium'> Elphidium </span>, <span class='highlight scientificName' id='cassidulina'> Cassidulina </span>, and <span class='highlight scientificName' id='paracyprideis'> Paracyprideis </span>.",
+ paragraph3: "Each bubble in the chart above is scaled to represent the relative abundance of an individual species of microfossil, including the indicator species in the genera <span class='highlight scientificName' id='elphidium'> Elphidium </span>, <span class='highlight scientificName' id='cassidulina'> Cassidulina </span>, <span class='highlight scientificName' id='paracyprideis'> Paracyprideis </span>, <span class='highlight central scientificName' id='kotorachythere'> Kotorachythere </span> and <span class='highlight scientificName' id='spiroplectimmina'> Spiroplectimmina </span>, alongside <span class='highlight central scientificName' id='other-species'> other species </span> of ostracodes and forams. Paired with the bubble chart is a timeline and bar chart displaying the assemblage of species for every 100 years from 0 A.D. to 2000 A.D. Hover over the bar chart to see the relative abundance of the different species within each 100-year window.",
+ heading2: "How was this record reconstructed?",
+ paragraph4: "USGS scientists <a href='/visualizations/climate-charts/#/beaufort-sea/beaufort-sea-ice-coring' target='_blank'>collected sediment cores</a> from the ocean floor at the Beaufort Sea continental shelf north of Yukon, Canada. From the sediment cores, they took 1-cm slices that each represent ~5 years of time to build a 2000-year history. The species of microfossils in each core sample, including <a href='/visualizations/climate-charts/#/beaufort-sea/beaufort-sea-species' target='_blank'>forams and ostracodes</a>, along with other biochemical signatures, help the researchers understand past and present climate conditions.",
},
FishAsFoodCirclePacking: {
paragraph1: "Explore the global economic value of recreationally-fished inland fish species, in U.S. dollars. Click on the circles in the diagram to see the economic value of species within each fish family, and click on the nested circles to see the economic value of each species in the various countries where it is recreationally fished.",
diff --git a/src/components/BeaufortSeaTimelineViz.vue b/src/components/BeaufortSeaTimelineViz.vue
index 934739f..14cc29c 100644
--- a/src/components/BeaufortSeaTimelineViz.vue
+++ b/src/components/BeaufortSeaTimelineViz.vue
@@ -12,7 +12,6 @@
<template #aboveExplanation>
<p class="increase-line-height" v-html="text.paragraph1" />
<p class="increase-line-height" v-html="text.paragraph2" />
- <p class="increase-line-height" v-html="text.paragraph3" />
</template>
<template #figures>
<div id="chart-container" class="maxWidth" ref="chart"></div>
@@ -22,6 +21,7 @@
</template>
<!-- EXPLANATION -->
<template #belowExplanation>
+ <p class="increase-line-height" v-html="text.paragraph3" />
<h2 v-html="text.heading2" />
<p v-html="text.paragraph4" />
</template>
@@ -276,7 +276,7 @@
simulation.value.nodes(nodes)
.force("center", d3.forceCenter(bubbleChartDimensions.boundedWidth / 2, bubbleChartDimensions.boundedHeight / 2))
.force("x", d3.forceX(bubbleChartDimensions.boundedWidth / 2).strength(0.1)) // Strong pull toward center on x-axis
- .force("y", d3.forceY(bubbleChartDimensions.boundedHeight / 2).strength(0.2)) // Strong pull toward center on y-axis
+ .force("y", d3.forceY(bubbleChartDimensions.boundedHeight / 2).strength(0.3)) // Strong pull toward center on y-axis
.force("collide", d3.forceCollide(d => d.radius + 4).strength(0.9)) // Strong collision force for tight packing
.force("boundaryX", d3.forceX(d => boundaryForceX(d)).strength(0.2)) // Weaker force to keep circles in x-bounds
.force("boundaryY", d3.forceY(d => boundaryForceY(d)).strength(0.2)) // Weaker force to keep circles in y-bounds
--
GitLab