diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js
index b13bf48c3c8f11b654094d5ab80fdfb7dd0de9b6..ad450e764a541fb5ec5222781fca6c3659031d8b 100644
--- a/src/assets/content/ChartGrid.js
+++ b/src/assets/content/ChartGrid.js
@@ -5,13 +5,23 @@ export default {
{
title: 'Inland fisheries are threatened',
project: 'Findex',
- vizKey: 'ThreatSankey',
+ vizKey: 'FindexThreatSankey',
vizRoute: 'inland-fish-total-threats',
img_src: 'Placeholder_thumbnail.webp',
alt: '',
chartOrder: 1,
description: 'Land use change is threatening inland fisheries.'
},
+ {
+ title: 'A global view of threats',
+ project: 'Findex',
+ vizKey: 'FindexGlobalThreats',
+ vizRoute: 'inland-fish-global-threats',
+ img_src: 'Placeholder_thumbnail.webp',
+ alt: '',
+ chartOrder: 2,
+ description: 'Inland fisheries are threatened globally.'
+ },
{
title: 'Explore the Juneau Icefield',
project: 'Fire in Ice',
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index a275007bcd4535123ba80c1205766e304ecc5b61..b09b08cc8d196faf87f494dcb7355adc06ff509a 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -43,6 +43,9 @@
background-color: #d2e9ff;
border-radius: 2px;
}
+button {
+ cursor: pointer;
+}
/* set color of links throughout */
a {
color: var(--color-link);
@@ -115,6 +118,177 @@ a:hover {
top: 105px;
}
}
+
+/* css for tab components */
+ul {
+ padding-inline-start: 0px;
+}
+li {
+ padding: 0;
+}
+.tabs-component {
+ margin: auto;
+ width: 90vw;
+ max-width: 1000px;
+}
+@media (min-width: 1000px) {
+ .tabs-component {
+ width: 70vw;
+ }
+}
+.tab-image {
+ max-width: 2.5rem;
+ max-height: 2.5rem;
+ margin-right: 1rem;
+ height: auto;
+ width: auto;
+}
+@media (min-width: 1000px) {
+ .tab-image {
+ max-width: fit-content;
+ max-height: 5rem;
+ margin-bottom: 1rem;
+ height: 5rem;
+ width: auto;
+ }
+}
+.tabs-component-tab.is-inactive img {
+ opacity: 0.5;
+}
+/* css modified from vue-tabs-component demo: https://tabs-component.jakubpotocky.sk/ */
+.tabs-component-tabs {
+ border: solid 1px #ddd;
+ border-radius: 6px;
+ margin-bottom: 5px;
+}
+
+@media (min-width: 1000px) {
+ .tabs-component-tabs {
+ border: 0;
+ align-items: stretch;
+ display: flex;
+ justify-content: flex-start;
+ margin-bottom: -1px;
+ }
+}
+
+.tabs-component-tab, .tabs-component-tab--custom {
+ color: #999;
+ font-size: 1.6rem;
+ font-weight: 600;
+ margin-right: 0;
+ list-style: none;
+}
+
+.tabs-component-tab:not(:last-child) {
+ border-bottom: dotted 1px #ddd;
+}
+
+.tabs-component-tab:hover {
+ color: #666;
+}
+
+.tabs-component-tab.is-active {
+ color: #000;
+}
+.tabs-component-tab.is-disabled *, .tabs-component-tab--custom.is-disabled * {
+ color: #cdcdcd;
+ cursor: not-allowed !important;
+}
+
+@media (min-width: 1000px) {
+ .tabs-component-tab, .tabs-component-tab--custom {
+ background-color: #fff;
+ border: solid 1px #ddd;
+ border-radius: 3px 3px 0 0;
+ margin-right: .5em;
+ /* transform: translateY(4px); */
+ transition: transform .3s ease;
+ font-size: 1.6rem;
+ text-align: center;
+ flex-grow: 1;
+ }
+
+ .tabs-component-tab.is-active, .tabs-component-tab--custom.is-active {
+ border-bottom: solid 1px #fff;
+ z-index: 2;
+ transform: translateY(0);
+ }
+}
+
+@media (min-width: 1000px) {
+ .tabs-component-tab-a, .tabs-component-tab-a--custom {
+ align-items: center;
+ color: inherit;
+ display: flex;
+ flex-direction: column;
+ padding: .75em 1em;
+ text-decoration: none;
+ }
+}
+
+.tabs-component-tab-a, .tabs-component-tab-a--custom {
+ align-items: center;
+ color: inherit;
+ display: flex;
+ padding: .75em 1em;
+ text-decoration: none;
+}
+
+.tabs-component-panels {
+ padding: 2em 1em;
+ background-color: #fff;
+ border: solid 1px #ddd;
+ border-radius: 0 6px 6px 6px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, .05);
+}
+
+@media (min-width: 1000px) {
+ .tabs-component-panels {
+ background-color: #fff;
+ border: solid 1px #ddd;
+ border-radius: 0 6px 6px 6px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, .05);
+ padding: 2em 2em;
+ }
+}
+
+.tabs-component-btn {
+cursor: pointer;
+background: #e1ecf4;
+border-radius: 3px;
+border: 1px solid #7aa7c7;
+padding: 4px 8px;
+color: #39739d;
+}
+
+.tabs-component-btn:hover {
+background-color: #b3d3ea;
+color: #2c5777;
+}
+
+.tabs-component-btn:active {
+background-color: #a0c7e4;
+box-shadow: none;
+color: #2c5777;
+}
+
+.tabs-component-tab--custom {
+ border-color: #e1ecf4;
+ color: #68838d;
+}
+
+.tabs-component-tab--custom:hover {
+ border-color: #e1ecf4;
+ color: #39739d;
+}
+
+.tabs-component-tab--custom.is-active {
+ color: #39739d;
+ border-color: #7aa7c7;
+ border-bottom: solid 1px #fff;
+}
+
/* css for Fire in ice viz */
.chart-text {
font-family: var(--chart-font) !important;
@@ -123,11 +297,11 @@ a:hover {
/* css for Beaufort species-related viz */
.highlight {
- padding: 0.5px 8px 0.5px 5px;
+ padding: 0.05rem 0.8rem 0.15rem 0.5rem;
border-radius: 10px;
white-space: nowrap;
font-weight: bold;
- transition: all 0.1s;
+ /* transition: all 0.1s; */
}
#cassidulina {
color: white;
diff --git a/src/assets/images/noun-drain-7131918-7A562B.png b/src/assets/images/noun-drain-7131918-7A562B.png
new file mode 100644
index 0000000000000000000000000000000000000000..b00c509f2248d2386773bb0a1781f4d24751f106
Binary files /dev/null and b/src/assets/images/noun-drain-7131918-7A562B.png differ
diff --git a/src/assets/svgs/noun-canal-29572-4E6D6E.svg b/src/assets/svgs/noun-canal-29572-4E6D6E.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e585cfa6db7214a7dd7fd06d3bcb0be809627cca
--- /dev/null
+++ b/src/assets/svgs/noun-canal-29572-4E6D6E.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <path d="m0 21.109v62h28l-19.602-62z" fill="#4d6c6e"/>
+ <path d="m72 83.109h28v-62h-8.3984z" fill="#4d6c6e"/>
+ <path d="m50 82.465c4.1602 0 6.9336-3 11.094-3 2.0703 0 4.293 0.96094 6.0195 1.7031l2.3906-8.1133c-2.8242-0.81641-5.207-2.5898-8.4062-2.5898-4.1602 0-6.9336 3-11.094 3h-0.003906c-4.1602 0-6.9336-3-11.094-3-3.1992 0-5.5859 1.7695-8.4062 2.5898l2.3906 8.1133c1.7227-0.74219 3.9492-1.7031 6.0156-1.7031 4.1602 0 6.9336 3 11.094 3z" fill="#4d6c6e"/>
+ <path d="m50 38.328c4.1289 0 6.8828-3 11.012-3 4.1328 0 6.8828 3 11.016 3 3.4102 0 5.8906-2.0234 8.9727-2.7344l-3.0898 10.43c-1.0156 0.34766-4.707 1.3086-5.8867 1.3086-4.1289 0-6.8828-3-11.012-3-4.1289 0-6.8828 3-11.012 3s-6.8828-3-11.012-3c-4.1289 0-6.8828 3-11.016 3-1.1758 0-4.8672-0.96094-5.8828-1.3086l-3.0898-10.43c3.082 0.71484 5.5625 2.7344 8.9727 2.7344 4.1289 0 6.8828-3 11.016-3 4.1289 0 6.8828 3 11.012 3z" fill="#4d6c6e"/>
+ <path d="m50 55.898c4.1602 0 6.9297-3 11.09-3s6.9336 3 11.09 3c1.0078 0 1.9336-0.17578 2.8203-0.4375l-2.8203 9.4375c-4.1562 0-6.9297-3-11.09-3-4.1562 0-6.9297 3-11.09 3-4.1562 0-6.9297-3-11.09-3s-6.9297 3-11.09 3l-2.8203-9.4375c0.88672 0.26562 1.8125 0.4375 2.8203 0.4375 4.1602 0 6.9297-3 11.09-3s6.9297 3 11.09 3z" fill="#4d6c6e"/>
+</svg>
diff --git a/src/assets/svgs/noun-drain-7131918-7A562B.svg b/src/assets/svgs/noun-drain-7131918-7A562B.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ac299bb5d33db0e49f9bbed9c36c30b19a68a6d5
--- /dev/null
+++ b/src/assets/svgs/noun-drain-7131918-7A562B.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <path d="m54.91 61.273c0.34375 1.1289 0.22266 2.3203-0.32812 3.2656-0.49219 0.84766-1.2812 1.4336-2.2227 1.6484-0.26172 0.058594-0.52344 0.089844-0.78516 0.089844-1.7617 0-3.4727-1.2891-4.0391-3.168-0.50781-1.6562 0.27734-4.1289 0.85547-5.9297 0.078125-0.24609 0.15234-0.47656 0.21094-0.67969 0.10156-0.33594 0.36719-0.59766 0.70703-0.69141 0.33984-0.097656 0.70312-0.011719 0.96484 0.22266 0.16797 0.14844 0.36328 0.32031 0.57031 0.5 1.8789 1.6367 3.6055 3.2305 4.0664 4.7422zm7.2422-27.168c1.4453 1.5859 3.4219 3.7578 5.3398 4.207 0.39062 0.089844 0.78125 0.13281 1.1719 0.13281 2.0742 0 3.9922-1.2461 4.5703-3.1211 0.32031-1.0469 0.19531-2.1562-0.35938-3.1172-0.61719-1.0703-1.7148-1.8555-3.0078-2.1562-1.7422-0.40625-4.2734 0.38281-6.9336 1.2969-0.30078 0.10156-0.57812 0.19922-0.82422 0.28125-0.37891 0.12109-0.66406 0.43359-0.76562 0.81641-0.097656 0.38281 0.007812 0.79297 0.27734 1.082 0.16016 0.17188 0.33594 0.36719 0.53125 0.57812zm19.137 26.566c0.25781 0 0.51563-0.027344 0.76563-0.085937 0.92578-0.21094 1.6992-0.78516 2.1836-1.6133 0.53906-0.92578 0.65625-2.0938 0.32031-3.1992-0.44922-1.4805-2.1328-3.0352-3.9688-4.6328-0.21484-0.18359-0.40625-0.35547-0.57422-0.50391-0.25781-0.23047-0.61328-0.3125-0.94531-0.21875-0.33203 0.09375-0.59375 0.35156-0.69141 0.67969-0.0625 0.19922-0.13281 0.42969-0.21094 0.67578-0.5625 1.7617-1.3281 4.1797-0.83984 5.8047 0.5625 1.832 2.2422 3.0938 3.9609 3.0938zm-26.551-23.766c-1.9414-0.80078-4.0625-1.418-6.3359-1.8438 0.10938 1.5664 0.28125 3.0625 0.51172 4.4492 0.074219 0.45312 0.15625 0.89453 0.24609 1.3203 10.809 4.7344 11.711 21.777 12.164 30.395 0.097656 1.9258 0.17578 3.9609 0.22266 6.0664 0.66406 0.26562 1.332 0.62891 2.0625 1.1055 0.61328 0.40234 1.3984 0.60156 2.3398 0.60156 1.2109 0 1.7773-0.23047 2.8555-0.93359 1.4141-0.91797 3.1367-1.3828 5.1211-1.3828 0.09375 0 0.19141 0 0.28125 0.003906-0.035156-1.875-0.12109-3.6953-0.25-5.418-1.3711-18.371-7.6562-29.613-19.219-34.363zm-19.918 7.6797c0.26172 0.89062 0.53906 1.6602 0.82813 2.332 1.4219 3.3086 3.0781 4.0898 4.3203 4.1016h9.9414c1.4141-0.011719 2.6523-0.96484 3.6914-2.8281-0.53125-0.82812-1.1211-1.5977-1.7812-2.2852-0.82812 1.9414-1.5977 2.5-1.9375 2.5117-0.52734 0-1.6758-1.2109-2.6562-4.5508-0.10156-0.34766-0.19922-0.70703-0.29297-1.0781-0.22656-0.89062-0.42188-1.8438-0.58984-2.8477-0.27344-1.6406-0.46875-3.4219-0.57812-5.2812-0.050781-0.85938-0.085937-1.7383-0.097656-2.6328-0.007813-0.34375-0.007813-0.69141-0.007813-1.0391 0-4.8828 0.55469-9.4531 1.5664-12.871 0.98438-3.3398 2.1289-4.5508 2.6562-4.5508h0.007813c0.53125 0.003906 1.6758 1.2227 2.6602 4.5625 1.0078 3.4219 1.5586 7.9844 1.5586 12.859 0 0.96094-0.023437 1.918-0.066406 2.8711 0.57422 0.19531 1.1367 0.41016 1.6875 0.63672 0.29297 0.11719 0.57812 0.24219 0.86328 0.375 0.078125-1.2812 0.12109-2.5859 0.12109-3.8828 0-5.1172-0.59375-9.9414-1.668-13.594-1.5586-5.2969-3.6562-6.4219-5.1406-6.4336h-9.9492c-1.2344 0.007812-2.8906 0.78906-4.3125 4.1016-0.28906 0.66797-0.56641 1.4414-0.82812 2.332-0.027344 0.089844-0.050781 0.17969-0.078125 0.27344l-14.543 0.003906v26.645h14.547c0.027343 0.089844 0.050781 0.17969 0.078124 0.26953zm58.758 28.77c-0.98828-0.64062-2.2344-0.96875-3.7031-0.96875-1.4727 0-2.7227 0.32422-3.707 0.96875l-0.51172 0.33594c-1.0508 0.67578-2.3125 1.0195-3.7539 1.0195-1.4453 0-2.707-0.34375-3.7539-1.0156-0.55469-0.35937-1.0078-0.62891-1.4766-0.82422 0.074219 1.3555 0.125 2.7578 0.14844 4.1914 0.89844 0.26953 1.7617 0.70312 2.7461 1.3438 0.60547 0.39453 1.3945 0.59375 2.3359 0.59375 1.2109 0 1.7734-0.23047 2.8438-0.93359 1.4258-0.91797 3.1445-1.3828 5.1211-1.3828 1.9805 0 3.707 0.46484 5.1211 1.3789l0.011719 0.003906v-3.793zm-3.707 5.9336c-1.4688 0-2.7148 0.32422-3.707 0.96094-1.3711 0.89453-2.4102 1.3516-4.2617 1.3516-1.4531 0-2.7188-0.34375-3.7578-1.0156-1.5273-0.99219-2.5156-1.2969-4.2188-1.2969-1.4727 0-2.7227 0.32422-3.7031 0.96094-1.3828 0.89453-2.4219 1.3516-4.2695 1.3516-1.4531 0-2.7188-0.34375-3.7578-1.0156-1.5273-0.99219-2.5156-1.2969-4.2188-1.2969-1.4727 0-2.7188 0.32422-3.7031 0.96094-1.3828 0.89453-2.4219 1.3516-4.2695 1.3516-1.4531 0-2.7188-0.34375-3.7578-1.0156-1.5273-0.99219-2.5117-1.2969-4.2188-1.2969-1.4727 0-2.7188 0.32422-3.7031 0.96094-1.3789 0.89453-2.4219 1.3516-4.2695 1.3516-1.457 0-2.7188-0.34375-3.7539-1.0195-1.5273-0.99219-2.5156-1.293-4.2227-1.293-1.4727 0-2.7227 0.32422-3.7031 0.96094-0.73828 0.48047-1.3555 0.85156-2.1758 1.082v4.0938c0.22656-0.12109 0.46484-0.26953 0.75781-0.46094 1.4102-0.91797 3.1328-1.3867 5.1211-1.3867 2.2031 0 3.6836 0.45312 5.6406 1.7227 0.61328 0.39453 1.3984 0.59375 2.3359 0.59375 0.93359 0 1.7188-0.19922 2.3359-0.59766 1.957-1.2695 3.4336-1.7188 5.6367-1.7188 2.2109 0 3.6836 0.45312 5.6406 1.7227 0.61328 0.39453 1.3984 0.59375 2.3359 0.59375 0.93359 0 1.7188-0.19922 2.3359-0.59766 1.957-1.2695 3.4336-1.7188 5.6367-1.7188 2.207 0 3.6836 0.45312 5.6367 1.7227 0.61328 0.39453 1.4023 0.59375 2.3359 0.59375 0.93359 0 1.7188-0.19922 2.3359-0.59766 1.9492-1.2695 3.4258-1.7188 5.6367-1.7188 2.207 0 3.6836 0.45312 5.6367 1.7227 0.61328 0.39453 1.3984 0.59375 2.3359 0.59375 0.93359 0 1.7188-0.19922 2.3359-0.59766 1.9492-1.2695 3.4258-1.7188 5.6328-1.7188 1.9844 0 3.7109 0.46875 5.1289 1.3867l0.007812 0.003906v-3.7969l-1.4219-0.92188c-0.98438-0.63672-2.2344-0.96094-3.707-0.96094zm0 6.8945c-1.6992 0-2.6836 0.30469-4.2188 1.3008-1.0508 0.67578-2.3125 1.0156-3.75 1.0156-1.4453 0-2.707-0.34375-3.7539-1.0117-1.5391-1.0039-2.5234-1.3047-4.2227-1.3047-1.7031 0-2.6914 0.30469-4.2266 1.3008-1.0508 0.67578-2.3125 1.0156-3.75 1.0156-1.4414 0-2.707-0.34375-3.75-1.0117-1.5391-1.0039-2.5234-1.3047-4.2266-1.3047-1.6992 0-2.6836 0.30469-4.2266 1.3008-1.0508 0.67578-2.3086 1.0156-3.75 1.0156s-2.707-0.34375-3.75-1.0117c-1.5391-1.0039-2.5234-1.3047-4.2266-1.3047-1.6992 0-2.6836 0.30469-4.2266 1.3008-1.0508 0.67578-2.3086 1.0156-3.75 1.0156-1.4453 0-2.7109-0.34375-3.75-1.0156-1.543-1-2.5273-1.3047-4.2266-1.3047-1.4766 0-2.7227 0.32422-3.6992 0.96484-0.73828 0.48047-1.3555 0.84766-2.1797 1.0859v4.0898c0.22266-0.11719 0.46484-0.26953 0.75781-0.46094 1.4141-0.91797 3.1367-1.3789 5.1211-1.3789 2.2109 0 3.6875 0.44922 5.6406 1.7148 0.60938 0.39844 1.3906 0.59766 2.3359 0.59766 0.9375 0 1.7227-0.19922 2.332-0.59766 1.9531-1.2695 3.4297-1.7148 5.6406-1.7148 2.2148 0 3.6875 0.44922 5.6445 1.7148 0.60547 0.39844 1.3906 0.59766 2.332 0.59766 0.9375 0 1.7227-0.19922 2.332-0.59766 1.957-1.2695 3.4336-1.7148 5.6445-1.7148 1.9805 0 3.6992 0.46484 5.1172 1.3789l0.52344 0.33984c0.60547 0.39453 1.3945 0.59375 2.3359 0.59375 0.9375 0 1.7227-0.19922 2.332-0.59766 1.9492-1.2656 3.4258-1.7148 5.6445-1.7148 2.2148 0 3.6875 0.44922 5.6367 1.7188 0.60938 0.39453 1.3945 0.59375 2.3359 0.59375 0.9375 0 1.7227-0.19922 2.332-0.59766 1.9492-1.2656 3.4258-1.7148 5.6406-1.7148 1.9805 0 3.6992 0.46484 5.1172 1.3789l0.015625 0.003906v-3.7891l-1.4219-0.92188c-0.98438-0.64453-2.2344-0.96875-3.707-0.96875zm-84.871 6.7734h12.594v-85.914h-12.594zm21.074-16.273c2.2109 0 3.6875 0.44922 5.6406 1.7188 0.60938 0.39844 1.3906 0.59766 2.3359 0.59766 1.2188 0 1.7578-0.22266 2.8516-0.93359 1.4141-0.91797 3.1406-1.3828 5.1211-1.3828 2.2148 0 3.6875 0.44922 5.6406 1.7188 0.60938 0.39844 1.3945 0.59766 2.3359 0.59766 1.2227 0 1.7578-0.22266 2.8555-0.93359 1.4141-0.91797 3.1367-1.3828 5.1211-1.3828 0.33203 0 0.65234 0.011718 0.95313 0.03125-0.035157-1.4766-0.089844-2.9102-0.15234-4.293-0.25781-0.023437-0.52344-0.035156-0.80078-0.035156-1.4766 0-2.7188 0.32422-3.6992 0.96484-1.3945 0.89844-2.4375 1.3555-4.2734 1.3555-1.4453 0-2.707-0.34375-3.75-1.0156-1.5391-1-2.5273-1.3047-4.2266-1.3047-1.4727 0-2.7188 0.32422-3.6992 0.96484l-0.52734 0.33984c-1.0469 0.67188-2.3086 1.0156-3.7461 1.0156-1.4453 0-2.7109-0.34375-3.75-1.0156-1.5391-1-2.5273-1.3047-4.2266-1.3047-1.4766 0-2.7227 0.32422-3.6992 0.96484-0.73828 0.48047-1.3555 0.84766-2.1797 1.082v4.0898c0.22266-0.12109 0.46484-0.26953 0.75781-0.46484 1.4102-0.91016 3.1328-1.375 5.1172-1.375z" fill="#79552a"/>
+</svg>
diff --git a/src/assets/svgs/noun-fish-7471722.svg b/src/assets/svgs/noun-fish-7471722.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ca4b4594fd3bc68372a526b9213a19593be85689
--- /dev/null
+++ b/src/assets/svgs/noun-fish-7471722.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128pt" height="128pt" version="1.1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" fill="#4E6D6E">
+ <path d="m67.859 83.73c9.2812-2.2383 17.391-7.5391 23.191-14.758 4.1562 5.1758 9.4961 9.3555 15.613 12.125-2.4102-5.3203-3.75-11.211-3.75-17.43 0-6.2148 1.3516-12.109 3.75-17.426-6.1211 2.7695-11.461 6.9492-15.613 12.113-2.5352-3.1484-5.5117-5.9414-8.8086-8.2461 0.75391-2.4805 1.7148-4.8516 2.8555-7.0898-4.6836-2.4336-12.859-6.2344-18.18-7.3281-3.2383 1.8516-6.2383 4.1445-8.9102 6.8008-15.668 0-29.34 8.5352-36.668 21.168 7.3281 12.648 21 21.184 36.668 21.184 3.9414 3.9297 9.0352 6.5664 14.566 7.4688-2.0391-2.4766-3.6562-5.3594-4.7109-8.5859" fill-rule="evenodd"/>
+</svg>
diff --git a/src/assets/text/authors.js b/src/assets/text/authors.js
index 77765a1503f301da44078a50584c5e209ff41df4..5ac69f47d003d8ef36314b47222fd9eaea9a9c1d 100644
--- a/src/assets/text/authors.js
+++ b/src/assets/text/authors.js
@@ -100,7 +100,19 @@ export default {
profile_link: 'https://www.usgs.gov/staff-profiles/hayley-corson-dosch'
},
],
- ThreatSankey: [
+ FindexThreatSankey: [
+ {
+ fullName: 'Hayley Corson-Dosch',
+ initials: 'HCD',
+ profile_link: 'https://www.usgs.gov/staff-profiles/hayley-corson-dosch'
+ },
+ ],
+ FindexGlobalThreats: [
+ {
+ fullName: 'Kaysa Vaarre-Lamoureux',
+ initials: 'KVL',
+ profile_link: null
+ },
{
fullName: 'Hayley Corson-Dosch',
initials: 'HCD',
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index 3d4befe9e1e74324767356eaebaa5e7df87642d2..3d7d98dc4c5efc93c99d15e2c5ebcd09e310ff07 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -232,8 +232,172 @@ export default {
explanation1: "As scientists <a href='/visualizations/earth-in-flux/#/fire-in-ice/glacier-scan' target='_blank'>collected the snow core</a>, they carefully stored each ten-centimeter section for transport off the Juneau Icefield. The retrieved samples were analyzed in a laboratory for particle counts, major ions, stable isotopes of oxygen and hydrogen, and the three sugars that are markers of biomass combustion—mannosan, galactosan, and levoglucosan.",
explanation2: "In this visual representation of the core, the darker grey shows layers of the snow that had high amounts of particulate matter. The high-particulate layer present in both 2015 and 2016 likely represents the summer melt surface."
},
- ThreatSankey: {
+ FindexThreatSankey: {
paragraph1: 'Land use change is the biggest threat to inland fisheries.'
+ },
+ FindexGlobalThreats: {
+ heading1:"Global variability of threats",
+ paragraph1: "While threats related to habitat are the <a href='/visualizations/earth-in-flux/#/findex/inland-fish-total-threats' target='_blank'>overall highest threat</a> to inland fisheries worldwide, the severity of threats varies globally.",
+ tabData: [
+ {
+ tabTitle: "Habitat",
+ tabContentTitle: "Habitat",
+ tabContentTitleID: "habitat",
+ tabIcon: "noun-canal-29572-4E6D6E",
+ tabText: "Habitat text.",
+ tabMapImageAlt: "Habitat alt.",
+ tabLegendImageAlt: "Legend",
+ subThreatPrefix: "H",
+ subThreatData: [
+ {
+ subThreat: "Dams",
+ subThreatText: "Dams text",
+ subThreatIcon: "noun-canal-29572-4E6D6E"
+ },
+ {
+ subThreat: "Wetland drainage",
+ subThreatText: "Wetland drainage text",
+ subThreatIcon: "noun-canal-29572-4E6D6E"
+ },
+ {
+ subThreat: "Deforestation and associated runoff",
+ subThreatText: "Deforestation and associated runoff text",
+ subThreatIcon: "noun-canal-29572-4E6D6E"
+ },
+ {
+ subThreat: "Riparian degradation",
+ subThreatText: "Riparian degradation text",
+ subThreatIcon: "noun-canal-29572-4E6D6E"
+ },
+ {
+ subThreat: "Agricultural extraction",
+ subThreatText: "Agricultural extraction text",
+ subThreatIcon: "noun-canal-29572-4E6D6E"
+ },
+ {
+ subThreat: "Urban extraction",
+ subThreatText: "Urban extraction text",
+ subThreatIcon: "noun-canal-29572-4E6D6E"
+ },
+ {
+ subThreat: "Industrial Extraction",
+ subThreatText: "Industrial Extraction text",
+ subThreatIcon: "noun-canal-29572-4E6D6E"
+ }
+ ]
+ },
+ {
+ tabTitle: "Pollution",
+ tabContentTitle: "Pollution",
+ tabContentTitleID: "pollution",
+ tabIcon: "noun-drain-7131918-7A562B",
+ tabText: "Pollution text.",
+ tabMapImageAlt: "Pollution alt.",
+ tabLegendImageAlt: "Legend",
+ subThreatPrefix: "P",
+ subThreatData: [
+ {
+ subThreat: "Agricultural effluents",
+ subThreatText: "Agricultural effluents text",
+ subThreatIcon: "noun-drain-7131918-7A562B"
+ },
+ {
+ subThreat: "Urban wastewater",
+ subThreatText: "Urban wastewater text",
+ subThreatIcon: "noun-drain-7131918-7A562B"
+ },
+ {
+ subThreat: "Industrial effluents",
+ subThreatText: "Industrial effluents text",
+ subThreatIcon: "noun-drain-7131918-7A562B"
+ },
+ {
+ subThreat: "Aquaculture effluents",
+ subThreatText: "Aquaculture effluents text",
+ subThreatIcon: "noun-drain-7131918-7A562B"
+ },
+ {
+ subThreat: "Pharmaceuticals",
+ subThreatText: "Pharmaceuticals text",
+ subThreatIcon: "noun-drain-7131918-7A562B"
+ },
+ {
+ subThreat: "Oil or gas exploration",
+ subThreatText: "Oil or gas exploration text",
+ subThreatIcon: "noun-drain-7131918-7A562B"
+ },
+ {
+ subThreat: "Plastics",
+ subThreatText: "Plastics text",
+ subThreatIcon: "noun-drain-7131918-7A562B"
+ },
+ {
+ subThreat: "Mining",
+ subThreatText: "Mining text",
+ subThreatIcon: "noun-drain-7131918-7A562B"
+ }
+ ]
+ },
+ {
+ tabTitle: "Climate and Weather",
+ tabContentTitle: "Climate and Weather",
+ tabContentTitleID: "climate-and-weather",
+ tabIcon: "noun-drain-7131918-7A562B",
+ tabText: "Climate and Weather text.",
+ tabMapImageAlt: "Climate and Weather alt.",
+ tabLegendImageAlt: "Legend",
+ subThreatPrefix: "CW",
+ subThreatData: [
+ {
+ subThreat: "Change in water temperature",
+ subThreatText: "Change in water temperature text",
+ subThreatIcon: "noun-drain-7131918-7A562B"
+ },
+ {
+ subThreat: "Drought",
+ subThreatText: "Drought text",
+ subThreatIcon: "noun-drain-7131918-7A562B"
+ },
+ {
+ subThreat: "Change in flooding",
+ subThreatText: "Change in flooding text",
+ subThreatIcon: "noun-drain-7131918-7A562B"
+ },
+ {
+ subThreat: "Change in wind patterns",
+ subThreatText: "Change in wind patterns text",
+ subThreatIcon: "noun-drain-7131918-7A562B"
+ },
+ {
+ subThreat: "Change in ice cover",
+ subThreatText: "Change in ice cover text",
+ subThreatIcon: "noun-drain-7131918-7A562B"
+ }
+ ]
+ },
+ {
+ tabTitle: "Invasive species",
+ tabContentTitle: "Invasive species",
+ tabContentTitleID: "invasive-species",
+ tabIcon: "noun-drain-7131918-7A562B",
+ tabText: "Invasive species text.",
+ tabMapImageAlt: "Invasive species alt.",
+ tabLegendImageAlt: "Legend",
+ subThreatPrefix: "IS",
+ subThreatData: []
+ },
+ {
+ tabTitle: "Fishing pressure",
+ tabContentTitle: "Fishing pressure",
+ tabContentTitleID: "fishing-pressure",
+ tabIcon: "noun-drain-7131918-7A562B",
+ tabText: "Fishing pressure text.",
+ tabMapImageAlt: "Fishing pressure alt.",
+ tabLegendImageAlt: "Legend",
+ subThreatPrefix: "E",
+ subThreatData: []
+ }
+ ],
}
}
}
\ No newline at end of file
diff --git a/src/components/BeaufortSeaSpeciesViz.vue b/src/components/BeaufortSeaSpeciesViz.vue
index 72a91e2109d1b767b5beca6a5b997ac9c1ce2de8..f62a66d7b82bca1f752956b332969bf83f4cd3c8 100644
--- a/src/components/BeaufortSeaSpeciesViz.vue
+++ b/src/components/BeaufortSeaSpeciesViz.vue
@@ -130,45 +130,11 @@
#species-tabs {
margin-top: 3rem;
}
-ul {
- padding-inline-start: 0px;
-}
-li {
- padding: 0;
-}
-.tabs-component {
- margin: auto;
- width: 90vw;
- max-width: 1000px;
-}
-@media (min-width: 1000px) {
- .tabs-component {
- width: 70vw;
- }
-}
-.tab-image {
- max-width: 2.5rem;
- max-height: 2.5rem;
- margin-right: 1rem;
- height: auto;
- width: auto;
-}
-
-@media (min-width: 1000px) {
- .tab-image {
- max-width: fit-content;
- max-height: 5rem;
- margin-bottom: 1rem;
- height: 5rem;
- width: auto;
- }
-}
.subheading-container {
margin: 1rem 0 1rem 0;
height: 5rem;
}
.subheading-image {
- /* max-width: 5rem; */
height: 5rem;
margin: 0 1rem 0 1rem;
}
@@ -177,9 +143,6 @@ li {
display: inline-block;
transform: translate(0%, -50%);
}
-.tabs-component-tab.is-inactive img {
- opacity: 0.5;
-}
.tab-content-image {
width: 100%;
}
@@ -187,136 +150,4 @@ li {
padding: 0rem 0 1rem 0;
line-height: 2.6rem;
}
-/* css modified from vue-tabs-component demo: https://tabs-component.jakubpotocky.sk/ */
-.tabs-component-tabs {
- border: solid 1px #ddd;
- border-radius: 6px;
- margin-bottom: 5px;
-}
-
-@media (min-width: 1000px) {
- .tabs-component-tabs {
- border: 0;
- align-items: stretch;
- display: flex;
- justify-content: flex-start;
- margin-bottom: -1px;
- }
-}
-
-.tabs-component-tab, .tabs-component-tab--custom {
- color: #999;
- font-size: 1.6rem;
- font-weight: 600;
- margin-right: 0;
- list-style: none;
-}
-
-.tabs-component-tab:not(:last-child) {
- border-bottom: dotted 1px #ddd;
-}
-
-.tabs-component-tab:hover {
- color: #666;
-}
-
-.tabs-component-tab.is-active {
- color: #000;
-}
-.tabs-component-tab.is-disabled *, .tabs-component-tab--custom.is-disabled * {
- color: #cdcdcd;
- cursor: not-allowed !important;
-}
-
-@media (min-width: 1000px) {
- .tabs-component-tab, .tabs-component-tab--custom {
- background-color: #fff;
- border: solid 1px #ddd;
- border-radius: 3px 3px 0 0;
- margin-right: .5em;
- /* transform: translateY(4px); */
- transition: transform .3s ease;
- font-size: 1.6rem;
- text-align: center;
- }
-
- .tabs-component-tab.is-active, .tabs-component-tab--custom.is-active {
- border-bottom: solid 1px #fff;
- z-index: 2;
- transform: translateY(0);
- }
-}
-
-@media (min-width: 1000px) {
- .tabs-component-tab-a, .tabs-component-tab-a--custom {
- align-items: center;
- color: inherit;
- display: flex;
- flex-direction: column;
- padding: .75em 1em;
- text-decoration: none;
- }
-}
-
-.tabs-component-tab-a, .tabs-component-tab-a--custom {
- align-items: center;
- color: inherit;
- display: flex;
- padding: .75em 1em;
- text-decoration: none;
-}
-
-.tabs-component-panels {
- padding: 2em 1em;
- background-color: #fff;
- border: solid 1px #ddd;
- border-radius: 0 6px 6px 6px;
- box-shadow: 0 0 10px rgba(0, 0, 0, .05);
-}
-
-@media (min-width: 1000px) {
- .tabs-component-panels {
- background-color: #fff;
- border: solid 1px #ddd;
- border-radius: 0 6px 6px 6px;
- box-shadow: 0 0 10px rgba(0, 0, 0, .05);
- padding: 2em 2em;
- }
-}
-
-.tabs-component-btn {
- cursor: pointer;
- background: #e1ecf4;
- border-radius: 3px;
- border: 1px solid #7aa7c7;
- padding: 4px 8px;
- color: #39739d;
-}
-
-.tabs-component-btn:hover {
- background-color: #b3d3ea;
- color: #2c5777;
-}
-
-.tabs-component-btn:active {
- background-color: #a0c7e4;
- box-shadow: none;
- color: #2c5777;
-}
-
-.tabs-component-tab--custom {
- border-color: #e1ecf4;
- color: #68838d;
-}
-
-.tabs-component-tab--custom:hover {
- border-color: #e1ecf4;
- color: #39739d;
-}
-
-.tabs-component-tab--custom.is-active {
- color: #39739d;
- border-color: #7aa7c7;
- border-bottom: solid 1px #fff;
-}
</style>
\ No newline at end of file
diff --git a/src/components/FindexGlobalThreatsViz.vue b/src/components/FindexGlobalThreatsViz.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af38c6c657d153ece9a40448bad3e8cb3830f735
--- /dev/null
+++ b/src/components/FindexGlobalThreatsViz.vue
@@ -0,0 +1,274 @@
+<template>
+ <section>
+ <!---VizSection-->
+ <VizSection
+ :figures="false"
+ :fig-caption="false"
+ >
+ <!-- HEADING -->
+ <template #heading>
+ <h2 v-html="text.heading1" />
+ </template>
+ <!-- FIGURES -->
+ <template #aboveExplanation>
+ <p v-html="text.paragraph1" />
+ </template>
+ </VizSection>
+ <tabsGroup id="map-tabs" :options="{ useUrlFragment: false }" >
+ <tabItem v-for="tab in text.tabData" :name="tab.tabTitle" :key="tab.tabTitle" :prefix="getPrefixImageHTML(tab.tabIcon)">
+ <h3>
+ Threat category:
+ <button v-html="tab.tabContentTitle" @click = "switchToPrimaryCategory(tab.tabContentTitle, tab.subThreatPrefix)" :class="[tab.tabContentTitleID, { 'highlight': currentCategory == tab.tabContentTitle }]" :id="tab.tabContentTitleID" class="category-button primary" />
+ </h3>
+ <div id="button-container">
+ <h4 v-if="tab.subThreatData.length > 1">Subthreat categories:
+ <span v-for="subThreatCategory, index in tab.subThreatData" :key="subThreatCategory.subThreat">
+ <button @click="switchToSubCategory(subThreatCategory.subThreat, tab.subThreatPrefix)" :class="[tab.tabContentTitleID, { 'highlight': currentCategory == subThreatCategory.subThreat }]" v-html="subThreatCategory.subThreat" class="category-button sub"></button>
+ <span v-if="index < tab.subThreatData.length-1" :class="tab.tabContentTitleID" class="separator">
+ <FishIcon id="findex-fish" :class="tab.tabContentTitleID"/>
+ </span>
+ </span>
+ </h4>
+ </div>
+ <p v-html="tab.tabText" v-if="primaryCategorySelected"/>
+ <p v-html="subThreatText" v-if="!primaryCategorySelected"/>
+ <div id="icon-legend-container">
+ <img class="tab-icon-image" :src="iconSource" alt="">
+ <img class="tab-legend-image" :src="legendSource" :alt="tab.tabLegendImageAlt">
+ </div>
+ <img class="tab-map-image" :src="mapSource" :alt="tab.tabMapImageAlt">
+ </tabItem>
+ </tabsGroup>
+ </section>
+</template>
+
+<script setup>
+ import { computed, nextTick, onMounted, ref } from "vue";
+ import VizSection from '@/components/VizSection.vue';
+ import FishIcon from '@/assets/svgs/noun-fish-7471722.svg';
+
+ // define props
+ const props = defineProps({
+ text: { type: Object }
+ })
+
+ // Global variables
+ let primaryCategorySelected = ref(true);
+ let currentCategory = ref(null);
+ let currentCategorySubThreatPrefix = ref(null);
+ let legendSource = ref(null);
+ let mapSource = ref(null);
+ let iconSource = ref(null);
+
+ // Set up computed variables that depend on ref values
+ const primaryCategoryData = computed(() => {
+ return props.text.tabData.filter(d => d.subThreatPrefix == currentCategorySubThreatPrefix.value)[0]
+ })
+ // undefined if primaryCategorySelected
+ const subCategoryData = computed(() => {
+ return primaryCategoryData.value.subThreatData.filter(d => d.subThreat == currentCategory.value)[0]
+ })
+ const subThreatText = computed(() => {
+ return subCategoryData.value.subThreatText;
+ });
+
+ // Declare behavior on mounted
+ // functions called here
+ onMounted(async () => {
+ try {
+ // Once DOM is up to date, make sure the currently shown tab is updated
+ await nextTick()
+ updateTab()
+
+ // add event listeners to all tabs, so that update on click
+ const tabs = document.getElementById("map-tabs")
+ const tabList = tabs.querySelectorAll("a")
+ tabList.forEach(tab => {
+ tab.href = ""
+ tab.addEventListener("click", updateTab)
+ })
+ } catch (error) {
+ console.error('Error during component mounting', error);
+ }
+ });
+ function updateTab() {
+ // identify active tab
+ const tabs = document.getElementById("map-tabs")
+ const activeTab = tabs.querySelectorAll(".is-active a")
+
+ // pull category information
+ currentCategory.value = activeTab[0].text
+ const currentData = props.text.tabData.filter(d => d.tabContentTitle == currentCategory.value)[0]
+ currentCategorySubThreatPrefix.value = currentData.subThreatPrefix
+
+ // update map - always show primary category on page load
+ switchToPrimaryCategory(currentCategory.value, currentCategorySubThreatPrefix.value)
+ }
+ function getPrefixImageURL(filename) {
+ return `src/assets/svgs/${filename}.svg`
+ }
+ function getPrefixImageHTML(filename) {
+ const imgURL = getPrefixImageURL(filename)
+ return `<img class='tab-image' src=${imgURL}>`
+ }
+ function getContentImageUrl(title, category_prefix, content_type) {
+ if (primaryCategorySelected.value) {
+ return `src/assets/images/${title.replace(/ /g, "_")}_${content_type}.png`
+ } else {
+ return `src/assets/images/${category_prefix}_${title.replace(/ /g, "_")}_${content_type}.png`
+ }
+ }
+ function updateTabContent(category, prefix) {
+ currentCategory.value = category
+ currentCategorySubThreatPrefix.value = prefix
+ mapSource.value = getContentImageUrl(currentCategory.value, currentCategorySubThreatPrefix.value, "map")
+ legendSource.value = getContentImageUrl(currentCategory.value, currentCategorySubThreatPrefix.value, "legend")
+ }
+ function updateIcon() {
+ if (primaryCategorySelected.value) {
+ iconSource.value = getPrefixImageURL(primaryCategoryData.value.tabIcon)
+ } else {
+ iconSource.value = getPrefixImageURL(subCategoryData.value.subThreatIcon)
+ }
+ }
+ function switchToSubCategory(category, prefix) {
+ primaryCategorySelected.value = false;
+ updateTabContent(category, prefix);
+ updateIcon();
+ }
+ function switchToPrimaryCategory(category, prefix) {
+ primaryCategorySelected.value = true;
+ updateTabContent(category, prefix);
+ updateIcon();
+ }
+
+</script>
+
+<style lang="scss">
+$habitat: #4E6D6E;
+$habitat-faded: #C9D8D9;
+$habitat-dark: #405959;
+$pollution: #7A562B;
+$pollution-faded: #E1C8AA;
+$pollution-dark: #5B401F;
+$climate-and-weather: #002D5E;
+$climate-and-weather-faded: #B2C0CE;
+$climate-and-weather-dark: #002D5E;
+$invasive-species: #B74F49;
+$fishing-pressure: #835192;
+#map-tabs {
+ margin-top: 3rem;
+}
+#button-container {
+ margin-bottom: 2rem;
+}
+#findex-fish {
+ width: 20px;
+ height: 20px;
+ transform: translate(0, 4px);
+}
+#icon-legend-container{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+.tab-icon-image {
+ max-width: 50px;
+ max-height: 50px;
+ margin-right: 1rem;
+ height: auto;
+ width: auto;
+ @media only screen and (max-width: 600px) {
+ max-width: 40px;
+ max-height: 40px;
+ }
+}
+.tab-legend-image {
+ width: 230px;
+ @media only screen and (max-width: 600px) {
+ width: min(190px, 100vw);
+ }
+}
+.tab-map-image {
+ width: 100%;
+}
+.habitat {
+ color: $habitat;
+ fill: $habitat;
+}
+.pollution {
+ color: $pollution;
+ fill: $pollution;
+}
+.climate-and-weather {
+ color: $climate-and-weather;
+ fill: $climate-and-weather;
+}
+.invasive-species {
+ color: $invasive-species;
+ fill: $invasive-species;
+}
+.fishing-pressure {
+ color: $fishing-pressure;
+ fill: $fishing-pressure;
+}
+.highlight.habitat {
+ background-color: $habitat;
+}
+.highlight.pollution {
+ background-color: $pollution;
+}
+.highlight.climate-and-weather {
+ background-color: $climate-and-weather;
+}
+.highlight.invasive-species {
+ background-color: $invasive-species;
+}
+.highlight.fishing-pressure {
+ background-color: $fishing-pressure;
+}
+.category-button {
+ background-color: transparent;
+ border: 0rem;
+ padding: 0.05rem 0.8rem 0.2rem 0.75rem;
+ border-radius: 10px;
+ text-decoration: underline;
+}
+.category-button.highlight {
+ text-decoration: none;
+ color: white;
+}
+@media (hover: hover) {
+ .category-button.habitat:hover {
+ background-color: $habitat-faded;
+ color: $habitat-dark;
+ }
+ .category-button.pollution:hover {
+ background-color: $pollution-faded;
+ color: $pollution-dark;
+ }
+ .category-button.climate-and-weather:hover {
+ background-color: $climate-and-weather-faded;
+ color: $climate-and-weather-dark;
+ }
+ .category-button.invasive-species:hover {
+ color: white;
+ }
+ .category-button.fishing-pressure:hover {
+ color: white;
+ }
+}
+.habitat {
+ text-decoration: underline solid $habitat-faded;
+}
+.pollution {
+ text-decoration: underline solid $pollution-faded;
+}
+.climate-and-weather {
+ text-decoration: underline solid $climate-and-weather-faded;
+}
+.separator {
+ background-color: transparent;
+ text-decoration: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ThreatSankeyViz.vue b/src/components/FindexThreatSankeyViz.vue
similarity index 100%
rename from src/components/ThreatSankeyViz.vue
rename to src/components/FindexThreatSankeyViz.vue