diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js
index 7f19da36b84209cca51bef676b23f35f0fc7043b..e1af4dfebbe8b8c55c791082cc25e5c90a379665 100644
--- a/src/assets/content/ChartGrid.js
+++ b/src/assets/content/ChartGrid.js
@@ -47,7 +47,7 @@ export default {
project: 'Fire in Ice',
vizKey: 'Aerosols',
vizRoute: 'aerosol-paths',
- img_src: 'aerosols_thumbnail.png',
+ img_src: 'aerosols_map_thumbnail.png',
alt: '',
chartOrder: 2,
description: 'Wildfire particles are deposited on glaciers.'
diff --git a/src/components/AerosolsViz.vue b/src/components/AerosolsViz.vue
index 3c53e7c1c8eb87dc21bf61f0f90fec80dfde1f9c..ab0318f985e5dae8406d96a4536e3f7ae60cd1a8 100644
--- a/src/components/AerosolsViz.vue
+++ b/src/components/AerosolsViz.vue
@@ -42,7 +42,7 @@
onMounted(async () => {
try {
// Use external svg from s3
- d3.xml("https://labs.waterdata.usgs.gov/visualizations/svgs/aerosols.svg").then(function(xml) {
+ d3.xml("https://labs.waterdata.usgs.gov/visualizations/svgs/aerosols_map.svg").then(function(xml) {
// add svg content to DOM
const svgGrid = document.getElementById("aerosols-grid-container")
svgGrid.appendChild(xml.documentElement);
@@ -60,56 +60,96 @@
});
- function draw_trajectories(fire){
- for(let trajectory_num=1;trajectory_num<=24;trajectory_num++){
- d3.select("#trajectory-" + fire + "-" + trajectory_num).selectAll("path")
- .style("stroke-opacity", 0.4);
- var trajectory_line = d3.select("#trajectory-" + fire + "-" + trajectory_num).selectAll("path");
+ function draw_trajectories(fire,trajectory_num,smoke_lines,delay,duration){
+ for(let smoke_num=0;smoke_num<smoke_lines;smoke_num++){
+ var trajectory_line = d3.select("#trajectory-" + fire + "-" + trajectory_num + "-" + smoke_num).selectAll("path");
var totalLength = trajectory_line.node().getTotalLength();
+ var opacity = 0.6;
+
// Animate the line
trajectory_line.style("transition", "none")
.style("stroke-dasharray", totalLength + " " + totalLength)
- .style("stroke-dashoffset", totalLength)
+ .style("stroke-dashoffset", totalLength - 1) //minus 1 remove artifacts that show before animation.
+ .style("stroke-opacity", opacity)
.transition()
- .delay(200*(trajectory_num-1))
- .duration(2000)
+ .delay(delay)
+ .duration(duration)
.ease(d3.easeLinear)
.style("stroke-dashoffset", 0);
-
- d3.select('#wildfire-label-'+fire).select("text")
- .style("opacity", 1.0);
}
}
- function remove_trajectories(fire){
- for(let trajectory_num=1;trajectory_num<=24;trajectory_num++){
- d3.select("#trajectory-" + fire + "-" + trajectory_num).selectAll("path")
- .style("stroke-opacity", 0.0);
- d3.select('#wildfire-label-'+fire).select("text")
- .style("opacity", 0.0);
+ function remove_trajectories(fire,trajectory_num,smoke_lines){
+ for(let smoke_num=0;smoke_num<smoke_lines;smoke_num++){
+ d3.select("#trajectory-" + fire + "-" + trajectory_num + "-" + smoke_num).selectAll("path")
+ .style("stroke-opacity", 0.0)
+ .interrupt();
}
}
- function highlight_core(coreid, corealpha, corecolor){
- console.log(coreid)
- d3.select("#"+coreid).selectAll("path")
- .style("stroke-opacity", corealpha)
- .style("stroke", corecolor);
- }
-
- function mouseover(event,coreids) {
+ function mouseover(event,number_of_fires,smoke_lines) {
if (event.currentTarget.id.startsWith("source-")){
+ for (let fire=0;fire<number_of_fires;fire++){
+ d3.select('#wildfire-label-'+fire).selectAll("path")
+ .style("opacity", 0.0);
+ d3.select('#wildfire-label-'+fire).selectAll("text")
+ .style("opacity", 0.0);
+ }
+ d3.select('#multi-path-label').selectAll("text")
+ .style("opacity", 0.0);
+ d3.select('#multi-path-label').selectAll("path")
+ .style("opacity", 0.0);
let fire = event.currentTarget.id.slice(7);
- draw_trajectories(fire);
- highlight_core(coreids[fire], 1.0, "#d62728");
+ for(let trajectory_num=1;trajectory_num<=24;trajectory_num++){
+ draw_trajectories(fire,trajectory_num,smoke_lines,0.0,2700);//300*(trajectory_num-1),2700);
+ }
}
}
- function mouseout(event,coreids) {
+ function mouseout(event,number_of_fires,smoke_lines) {
if (event.currentTarget.id.startsWith("source-")){
+ for (let fire=0;fire<number_of_fires;fire++){
+ d3.select('#wildfire-label-'+fire).selectAll("path")
+ .style("opacity", 0.75);
+ d3.select('#wildfire-label-'+fire).selectAll("text")
+ .style("opacity", 1.0);
+ }
+ d3.select('#multi-path-label').selectAll("path")
+ .style("opacity", 0.75);
+ d3.select('#multi-path-label').selectAll("text")
+ .style("opacity", 1.0);
let fire = event.currentTarget.id.slice(7);
- remove_trajectories(fire);
- highlight_core(coreids[fire], 0.2, "#000000");
+ for(let trajectory_num=1;trajectory_num<=24;trajectory_num++){
+ remove_trajectories(fire,trajectory_num,smoke_lines);
+ }
+ }
+ }
+
+ function mouseenter(event,default_fire,number_of_fires,default_smoke_num,smoke_lines) {
+ if (event.currentTarget.id.startsWith("figure_1")){
+ d3.select('#single-path-label').selectAll("path")
+ .style("opacity", 0.0);
+ d3.select('#single-path-label').selectAll("text")
+ .style("opacity", 0.0);
+ d3.select('#multi-path-label').selectAll("path")
+ .style("opacity", 0.75);
+ d3.select('#multi-path-label').selectAll("text")
+ .style("opacity", 1.0);
+ remove_trajectories(default_fire,default_smoke_num,smoke_lines)
+ }
+ }
+
+ function mouseleave(event,default_fire,number_of_fires,default_smoke_num,smoke_lines) {
+ if (event.currentTarget.id.startsWith("figure_1")){
+ d3.select('#single-path-label').selectAll("path")
+ .style("opacity", 0.75);
+ d3.select('#single-path-label').selectAll("text")
+ .style("opacity", 1.0);
+ d3.select('#multi-path-label').selectAll("text")
+ .style("opacity", 0.0);
+ d3.select('#multi-path-label').selectAll("path")
+ .style("opacity", 0.0);
+ draw_trajectories(default_fire,default_smoke_num,smoke_lines,0,1000)
}
}
@@ -117,11 +157,38 @@
// set viewbox for svg with loss function chart
const aerosolsSVG = d3.select("#aerosols-svg");
- const coreids = ["id-2017-Core-1","id-2016-Core-3"]
+ // draw default line
+ const default_fire = 1;
+ const default_smoke_num = 8;
+ const smoke_lines = 1;
+ const number_of_fires = 2;
+ for (let fire=0;fire<number_of_fires;fire++){
+ d3.select('#wildfire-label-'+fire).selectAll("path")
+ .style("opacity", 0.75);
+ d3.select('#wildfire-label-'+fire).selectAll("text")
+ .style("opacity", 1.0);
+ }
+ d3.select('#JIF-label').selectAll("path")
+ .style("opacity", 0.75);
+ d3.select('#JIF-label').selectAll("text")
+ .style("opacity", 1.0);
+ d3.select('#single-path-label').selectAll("path")
+ .style("opacity", 0.75);
+ d3.select('#single-path-label').selectAll("text")
+ .style("opacity", 1.0);
+ d3.select('#multi-path-label').selectAll("path")
+ .style("opacity", 0.0);
+ d3.select('#multi-path-label').selectAll("text")
+ .style("opacity", 0.0);
+
+ draw_trajectories(default_fire,default_smoke_num,smoke_lines,0,1000)
+
// Add interaction to loss function chart
aerosolsSVG.selectAll("g")
- .on("mouseover", (event) => mouseover(event,coreids))
- .on("mouseout", (event) => mouseout(event,coreids));
+ .on("mouseover", (event) => mouseover(event,number_of_fires,smoke_lines))
+ .on("mouseout", (event) => mouseout(event,number_of_fires,smoke_lines))
+ .on("mouseenter", (event) => mouseenter(event,default_fire,number_of_fires,default_smoke_num,smoke_lines))
+ .on("mouseleave", (event) => mouseleave(event,default_fire,number_of_fires,default_smoke_num,smoke_lines));
}
</script>
@@ -135,6 +202,7 @@
"chart";
}
</style>
+
<style lang="scss">
/* css for elements added/classed w/ d3 */
#aerosols-svg {
@@ -143,4 +211,19 @@
max-height: 100%;
max-width: 100%;
}
+</style>
+
+<style>
+ #wildfire-label-0 {
+ cursor: default;
+ }
+ #wildfire-label-1 {
+ cursor: default;
+ }
+ #single-path-label {
+ cursor: default;
+ }
+ #multi-path-label {
+ cursor: default;
+ }
</style>
\ No newline at end of file