Skip to content
Snippets Groups Projects
Commit 20766d84 authored by Hayley Corson-Dosch's avatar Hayley Corson-Dosch
Browse files

Merge branch 'update_fii_viz1' into 'main' 

Update fii viz1

See merge request wma/vizlab/climate-charts!62
parents d81ef8f2 265c703e
No related branches found
No related tags found
1 merge request!62Update fii viz1
Hide whitespace changes
Inline Side-by-side
src/assets/content/ChartGrid.js
+ 1
− 1
View file @ 20766d84
......@@ -33,7 +33,7 @@ export default {
description: 'Inland fish that are recreationally fished are vulnerable'
},
{
title: 'Glacier/Topography 3D Cross-Section Scan',
title: 'Explore the Juneau Ice Field',
project: 'Fire in Ice',
vizKey: 'GlacierScan',
vizRoute: 'glacier-scan',
......
src/assets/css/base.css
+ 1
− 1
View file @ 20766d84
......@@ -73,7 +73,7 @@ body {
}
}
h1 {
font-size: 5rem;
font-size: 4rem;
font-weight: 800;
padding: 0rem 0 1rem 0;
@media screen and (max-width: 600px) {
......
src/assets/text/text.js
+ 37
− 2
View file @ 20766d84
......@@ -62,8 +62,43 @@ export default {
},
visualizations: {
GlacierScan: {
heading: "Glacier X-Ray",
paragraph1: "The Juneau Icefield is located just north of Juneau Alaska and extends to the Canadian border. In 2016 and 2017, the Fire in Ice team collected ice cores across the Juneau Icefield to investigate whether ice cores can record wildfires. Use the interactive visualization below to explore the the rock and ice topography.",
paragraph1: "The Juneau Icefield is just north of Juneau, Alaska and extends into Canada. In 2016 and 2017, researchers collected ice cores across the icefield to determine if the ice traps records of wildfires.",
paragraph1Mobile: "The Juneau Icefield is just north of Juneau, Alaska. In 2016 and 2017, researchers collected ice cores across the icefield to determine if the ice traps records of wildfires.",
promptDesktop: "Hover over the map to explore the topography and learn about coring a glacier.",
promptMobile: "Click on the map below to explore the topography and learn about coring a glacier.",
heading: "How are ice cores collected?",
paragraph2: "The ideal location for drilling an ice core is the highest, flattest section of a glacier, as this region minimizes any influence from the glacier flow. Snow builds up layer by layer on a glacier surface and eventually compresses into ice. High, flat drilling locations increase the possibility that ice layers remain horizontal and decreases the possibility of melt layers.",
paragraph3: "Once researchers have arrived at the drilling location, the first thing that they do is to create some sort of shelter for comfort and incase the weather becomes bad. For short (~10 m) ice cores that can be drilled in a day, this shelter is often a snow pit with a bench, as well as a tarp to block blowing wind. Once the pit is dug, scientists can start drilling. The ice core drill has bits called “core dogs” on the bottom that cut into the ice. The drill is a metal cylinder with threads on the outside that help grip the snow and ice. Researchers attach a handle to the top and turn the drill until the have collected a meter of ice. This meter of ice is then passed to the people in the snow pit who are processing the core. This processing entails documenting the ice stratigraphy, measuring the core, and determining its mass. On the Juneau Icefield, cores were not kept in a frozen state, and instead were homogenized and placed into clean labeled bottles. The drilling and processing continue simultaneously, with team members measuring one core section while the next section is being drilled. The ice core drill returns to the initial hole and retrieves the next meter of ice. As the drill goes deeper and deeper into the ice, metal rods are connected to the top of the drill to extend the drill length until eventually reaching ~10 m depth. Pulling up 10 m of metal extension rods, the drill, and the ice core section can be heavy, but allows for a continuous climate record.",
photo010: "Clear, sunny days on the Juneau Icefield are appreciated, and people spend every possible moment outside to enjoy the spectacular scenery.",
photo010Mobile: "Clear, sunny days on the Juneau Icefield are appreciated, and people spend every possible moment outside to enjoy the spectacular scenery.",
photo010Alt: "",
photo018: "Drilling and processing ice cores involves teamwork. While a new core section is being drilled, team members measure physical properties like ice stratigraphy and the mass of the previous core section. Processing the core in a snow pit allows shelter from the wind, and creates a stable bench for examining the cores.",
photo018Mobile: "While a new core section is being drilled, team members measure physical properties like ice stratigraphy and the mass of the previous section.",
photo018Alt: "",
photo051: "Drilling an ice core on the Lemon Creek glacier to help determine past melt events affecting the glacier mass balance. The ice core drill can obtain one meter of ice at a time, where poles help extend the drill as it goes deeper into the ice. Team members record the depth and stratigraphy of ice core sections.",
photo051Mobile: "The ice core drill can obtain one meter of ice at a time, where poles help extend the drill as it goes deeper into the ice.",
photo051Alt: "",
photo085: "Sunsets on the Juneau Icefield are spectacular, with the combination of jagged peaks and glowing snow.",
photo085Mobile: "Sunsets on the Juneau Icefield are spectacular, with the combination of jagged peaks and glowing snow.",
photo085Alt: "",
photo138: "Traversing between camps involves a combination of skiing across glaciers and hiking over slopes. By the time that teams are ready to traverse to a new camp, they are well-practiced in safety skills such as crevasse rescue and rope management.",
photo138Mobile: "Moving between camps involves skiing across glaciers and hiking over slopes. Teams practice safety skills like rope management and crevasse rescue.",
photo138Alt: "",
photo140: "Natalie Kehrwald takes a break from drilling ice cores on the Taku Glacier, one of the deepest temperate alpine glaciers in the world.",
photo140Mobile: "Natalie Kehrwald takes a break from drilling ice cores on the Taku Glacier, one of the deepest temperate alpine glaciers in the world.",
photo140Alt: "",
photo156: "After multiple days without snowfall, a ski track forms from people passing through on their way to collect scientific data and explore the landscape.",
photo156Mobile: "After multiple days without snowfall, a ski track develops from people on their way to collect scientific data and explore the landscape.",
photo156Alt: "",
photo183: "Crevasses form in a glacier where it stretches through extension or passes over obstacles. Traveling through crevasse fields requires caution. Crevasses near glacier edges are often substantially smaller, but probing ice bridges and crevasse depth is necessary. Traveling across most crevassed terrain requires rope teams.",
photo183Mobile: "Crevasses form in a glacier where it stretches through extension or passes over obstacles. Traveling through crevasse fields requires caution.",
photo183Alt: "",
photo203: "Glaciers scour the landscape, creating U-shaped valleys between surrounding peaks. At their terminus, glacier melt creates lakes and rivers. The relatively low elevation and coastal location of the Juneau Icefield means that glacier melt mixes with seawater to create vibrant saltwater wetlands.",
photo203Mobile: "Glaciers scour the landscape, creating U-shaped valleys between surrounding peaks. At their terminus, glacier melt creates lakes and rivers.",
photo203Alt: "",
photo021: "The Gilkey Trench viewed from Camp 18 shows a classic example of ogives, or alternating bands of light and dark ice that are caused by compression and glacier flow.",
photo021Mobile: "The Gilkey Trench shows ogives, or alternating bands of light and dark ice that are caused by compression and glacier flow.",
photo021Alt: ""
},
RegionalFires: {
paragraph1: "From analysis of <a href='/visualizations/climate-charts/#/fire-in-ice/glacier-scan' target='_blank'>glacial ice cores</a>, we know that <a href='/visualizations/climate-charts/#/fire-in-ice/wildfire-aerosols' target='_blank'>wildfires burning softwoods have deposited aerosols</a> on the Juneau Ice Field. We also know that Alaska has many softwood forests, and that some have burned. But how can we tell which regional fires deposited aerosols on the glacier?",
......
src/components/GlacierScanViz.vue
+ 153
− 94
View file @ 20766d84
<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" />
</template>
<template #figures>
<div id="cross_section-grid-container">
<img id="juneau-if-010" src="https://labs.waterdata.usgs.gov/visualizations/images/FireInIce/juneau_icefield_010.jpeg" alt="" />
<img id="juneau-if-018" src="https://labs.waterdata.usgs.gov/visualizations/images/FireInIce/juneau_icefield_018.jpeg" alt="" />
<img id="juneau-if-021" src="https://labs.waterdata.usgs.gov/visualizations/images/FireInIce/juneau_icefield_021.jpeg" alt="" />
<img id="juneau-if-051" src="https://labs.waterdata.usgs.gov/visualizations/images/FireInIce/juneau_icefield_051.jpeg" alt="" />
<img id="juneau-if-085" src="https://labs.waterdata.usgs.gov/visualizations/images/FireInIce/juneau_icefield_085.jpeg" alt="" />
<img id="juneau-if-138" src="https://labs.waterdata.usgs.gov/visualizations/images/FireInIce/juneau_icefield_138.jpeg" alt="" />
<img id="juneau-if-140" src="https://labs.waterdata.usgs.gov/visualizations/images/FireInIce/juneau_icefield_140.jpeg" alt="" />
<img id="juneau-if-156" src="https://labs.waterdata.usgs.gov/visualizations/images/FireInIce/juneau_icefield_156.jpeg" alt="" />
<img id="juneau-if-183" src="https://labs.waterdata.usgs.gov/visualizations/images/FireInIce/juneau_icefield_183.jpeg" alt="" />
<img id="juneau-if-203" src="https://labs.waterdata.usgs.gov/visualizations/images/FireInIce/juneau_icefield_203.jpeg" alt="" />
</div>
</template>
<!-- FIGURE CAPTION -->
<template #figureCaption>
</template>
<!-- EXPLANATION -->
<template #belowExplanation>
</template>
</VizSection>
<section>
<VizSection
id="cross-section"
:figures="true"
:fig-caption="false"
>
<template #figures>
<div id="cross-section-grid-container">
<div id="caption-container" >
<img v-if="defaultView" id="globe-image" src="https://labs.waterdata.usgs.gov/visualizations/images/FireInIce/globe_marker_40.png" alt="locator map showing location of Juneau ice field in Alaska">
<img v-if="!defaultView" class="jif-image" :id=currentPhotoID :src=getImageSrc(currentPhotoID) alt="currentPhotoAlt">
<div v-if="!mobileView && defaultView">
<p v-html="text.paragraph1" />
<p v-html="text.promptDesktop" />
</div>
<p v-if="mobileView && defaultView" v-html="text.paragraph1Mobile" />
<p v-if="!defaultView" v-html="currentPhotoText"></p>
</div>
</div>
</template>
</VizSection>
<VizSection
id="cross-section-how-to"
:figures="false"
:fig-caption="false"
>
<template #heading>
<h2>
{{ text.heading }}
</h2>
</template>
<template #aboveExplanation>
<p v-html="text.paragraph2" />
<p v-html="text.paragraph3" />
</template>
</VizSection>
</section>
</template>
<script setup>
import { onMounted } from "vue";
import { onMounted, ref } from "vue";
import * as d3 from 'd3';
import { isMobile } from 'mobile-device-detect';
import VizSection from '@/components/VizSection.vue';
// define props
defineProps({
const props = defineProps({
text: { type: Object }
})
// global variables
const mobileView = isMobile;
const currentPhotoID = ref(null)
const currentPhotoAlt = ref("")
const currentPhotoText = ref("")
const defaultView = ref(true)
const default_xs = "113";
// Declare behavior on mounted
......@@ -60,21 +65,41 @@
// Use external svg from s3
d3.xml("https://labs.waterdata.usgs.gov/visualizations/svgs/glacial_mri_v9.svg").then(function(xml) {
// add svg content to DOM
const svgGrid = document.getElementById("cross_section-grid-container")
const svgGrid = document.getElementById("cross-section-grid-container")
svgGrid.appendChild(xml.documentElement);
// add id to svg
d3.select("#cross_section-grid-container").select("svg")
.attr("id", "cross_section-svg")
const crossSectionSVG = d3.select("#cross-section-grid-container").select("svg")
.attr("id", "cross-section-svg")
.attr("width", "100%")
.attr("height", "100%")
// hide some components
crossSectionSVG.select("#tutorial-dt-1")
.attr("display", "none")
crossSectionSVG.select("#tutorial-dt-2")
.attr("display", "none")
// crossSectionSVG.select("#tutorial-mb-1")
// .attr("display", "none")
crossSectionSVG.select("#tutorial-mb-2")
.attr("display", "none")
crossSectionSVG.select("#legend_1")
.style("transform", "translate(-100px, 210px)")
crossSectionSVG.select("#legend_1").select("#patch_3")
.attr("display", "none")
// add interactivity
addInteractions();
addInteractions(crossSectionSVG);
});
} catch (error) {
console.error('Error during component mounting', error);
}
});
function getImageSrc(photoID) {
return `https://labs.waterdata.usgs.gov/visualizations/images/FireInIce/juneau_icefield_${photoID}.jpeg`
}
function draw_xs(line_id,photo_id){
d3.select("#xs-main-" + line_id).selectAll("path")
.style("stroke-opacity", 1.0);
......@@ -156,13 +181,14 @@
}
function draw_image(photo_id){
d3.select("#juneau-if-"+photo_id)
.style("visibility", "visible");
currentPhotoID.value = photo_id
currentPhotoText.value = mobileView ? props.text[`photo${photo_id}Mobile`] : props.text[`photo${photo_id}`];
currentPhotoAlt.value = props.text[`photo${photo_id}Alt`];
defaultView.value = !defaultView.value
}
function remove_image(photo_id){
d3.select("#juneau-if-"+photo_id)
.style("visibility", "hidden");
function remove_image(){
defaultView.value = !defaultView.value
}
function mouseover(event) {
......@@ -194,7 +220,7 @@
const line_id = event.currentTarget.id.slice(13);
const photo_id = event.currentTarget.id.slice(9,12);
remove_xs(line_id,photo_id);
remove_image(photo_id);
remove_image();
}
}
......@@ -214,11 +240,7 @@
}
}
function addInteractions() {
// set viewbox for svg with loss function chart
const cross_sectionSVG = d3.select("#cross_section-svg")
.attr("width", "100%")
.attr("height", "100%");
function addInteractions(svg) {
if (mobileView == true){
d3.select('#tutorial-dt-1').selectAll("path")
......@@ -258,8 +280,8 @@
draw_xs(default_xs,-9999);
// Add interaction to loss function chart
cross_sectionSVG.selectAll("g")
// Add interaction events
svg.selectAll("g")
.on("mouseover", (event) => mouseover(event))
.on("mouseout", (event) => mouseout(event))
.on("mouseenter", (event) => mouseenter(event))
......@@ -268,47 +290,84 @@
</script>
<style scoped lang="scss">
#cross_section-grid-container {
display: grid;
width: 100%;
max-width: 1200px;
max-height: 85vh;
margin: 4rem auto 0 auto;
grid-template-areas:
"chart";
#cross-section-grid-container {
display: flex;
flex-direction: column;
@media screen and (max-height: 770px) {
flex-direction: row;
}
@media screen and (max-width: 600px) {
flex-direction: column;
}
}
#caption-container {
height: 15vh;
margin-top: 3rem;
display: flex;
flex-direction: row;
align-items: center;
padding: 0rem 2rem 0 0rem;
background-color: var(--faded-usgs-blue);
border-radius: 5px;
box-shadow: 5px 5px 10px rgba(57, 61, 66, 0.2);
font-style: italic;
@media screen and (max-height: 770px) {
flex-direction: column;
height: 80vh;
width: 40vw;
padding: 0rem 2rem 0 2rem;
flex-grow: 0;
flex-shrink: 0;
}
@media screen and (max-width: 600px) {
flex-direction: column;
width: 100%;
height: 40vh;
padding: 1rem 1.5rem 0 1.5rem;
}
}
.jif-image {
height: 100%;
pointer-events: none;
border-radius: 5px;
margin-right: 3rem;
@media screen and (max-height: 770px) {
max-width: 100%;
max-height: 45vh;
margin: 2rem 2rem 2rem 2rem;
}
@media screen and (max-width: 600px) {
padding-right: 0rem;
max-height: 22vh;
max-width: 100%;
margin: 1rem;
}
}
#globe-image {
width: 15vw;
align-items: center;
pointer-events: none;
border-radius: 5px;
@media screen and (max-height: 770px) {
margin: 4rem 2rem 2rem 2rem;
}
@media screen and (max-width: 600px) {
width: 35vw;
margin: 1rem;
}
}
</style>
<style lang="scss">
/* css for elements added/classed w/ d3 */
#cross_section-svg {
grid-area: chart;
place-self: center;
max-height: 100%;
max-width: 100%;
#cross-section-svg {
height: 50vh;
z-index: 1;
}
#juneau-if-010,
#juneau-if-018,
#juneau-if-021,
#juneau-if-051,
#juneau-if-085,
#juneau-if-138,
#juneau-if-140,
#juneau-if-156,
#juneau-if-183,
#juneau-if-203{
grid-area: chart;
justify-self: end;
align-self: start;
max-height: 25%;
max-width: 25%;
visibility: hidden;
pointer-events: none;
border: 2px solid black;
border-radius: 15px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
z-index: 2;
}
margin-top: 3rem;
@media screen and (max-height: 770px) {
height: 80vh;
}
@media screen and (max-width: 600px) {
height: 45vh;
}
}
</style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment