diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js index 79e1485ec818b2d5efbb8b065d5a5b27d48210a9..fc943d83a32b42dff0c97866554070e71186e601 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 6045464a019f447e763c0363a227c47b5720b168..eb0d4eca4096c521383789795d1f3cba709ef422 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 df16c8a5d478980f30d8d6fd1d9d8a7ab46074aa..c36fc6ee003586042f557201494a1c7532e9bdb5 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 934739fe56e944defab6c733b5a6e6b524f0358b..14cc29c1b844b522a12ef002b26fd30cb960d465 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