Merge pull request #60 from DOI-USGS/add_vulnerability_indicators_site

Add vulnerability indicators site
DOI-USGS · Sep 24, 2024 · 74c4d49 · 74c4d49
2 parents 5cc0a39 + bfe602a
commit 74c4d49
Show file tree

Hide file tree

Showing 11 changed files with 133 additions and 97 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -9,9 +9,9 @@ RUN apt-get update && \
       apt-get purge -y --auto-remove && \
       apt-get clean
 
-# Enable the NodeSource repository and install the latest nodejs
-RUN curl -sL https://deb.nodesource.com/setup_current.x | bash - && \
-      apt-get install nodejs -y
+# Enable the NodeSource repository and install nodejs version 20 (current LTS as of April 2024)
+RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - &&\
+      apt-get install -y nodejs
 
 # Create temp directory for building viz app
 RUN mkdir -p /tmp/vizlab-home

diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -44,9 +44,7 @@
             "affiliation": { "@type": "Organization", "legalName": "U.S. Geological Survey" }
           },
           { "@type": "Person",
-            "name": "Lindsay Platt",
-            "email": "[email protected]",
-            "affiliation": { "@type": "Organization", "legalName": "U.S. Geological Survey" }
+            "name": "Lindsay Platt"
           },
           { "@type": "Person",
             "name": "Cee Nell",
@@ -69,7 +67,5 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-    <!--the next line is the required USGS Google Analytics Script -->
-    <script async src="https://www2.usgs.gov/scripts/analytics/usgs-analytics.js" type="application/javascript"></script>
   </body>
 </html>
diff --git a/public/viz-list.csv b/public/viz-list.csv
@@ -1,4 +1,5 @@
 id,released,viz-type,group,title,description,img,alt,url,utm,tags,code,
+vulnerability-indicators,9/23/2024,,interactives,Unequal access to water,,vulnerability_thumbnail_not_stylized_square.png,Two contrasting images of water sources with the top image showing a close-up of a hand holding a clear glass being filled with water from a kitchen faucet. The bottom image shows a rustic landscape with a blue well tank labeled WELL-X-TROL with a wired fence and dry grass in the background.,https://labs.waterdata.usgs.gov/visualizations/vulnerability-indicators/index.html#/,https://labs.waterdata.usgs.gov/visualizations/vulnerability-indicators/index.html#/?utm_source=web&utm_medium=vizlab_home&utm_campaign=card,water,https://github.com/DOI-USGS/vulnerability-indicators,
 river-conditions-202307-202309,1/16/2024,,event,"River Conditions: Oct 1 to Dec 31, 2023",,river_conditions_oct_dec_2022_square_thumbnail.png,A map of all USGS streamflow gages in the U.S. with a color scale from red to blue to indicate dry to wet flow conditions.,https://www.usgs.gov/media/videos/us-river-conditions-october-december-2023,https://www.usgs.gov/media/videos/us-river-conditions-october-december-2023,,https://github.com/USGS-VIZLAB/gage-conditions-gif,
 bottled-water,11/21/2023,,interactives,Water bottling across the U.S.,,bottled_water_thumbnail.webp,A map of Texas showing the count of bottled water facilities in each county.,https://labs.waterdata.usgs.gov/visualizations/bottled-water/index.html#/,https://labs.waterdata.usgs.gov/visualizations/bottled-water/index.html#/?utm_source=web&utm_medium=vizlab_home&utm_campaign=card,water use,https://github.com/DOI-USGS/vizlab-bottled-water,
 drought-timeline,9/20/2023,,interactives,Five droughts that changed history,,drought_timeline_thumbnail.webp,"An image of dried, cracked mud overlain by a chart with long vertical bands representing drought events",https://labs.waterdata.usgs.gov/visualizations/drought-timeline/index.html#/,https://labs.waterdata.usgs.gov/visualizations/drought-timeline/index.html#/?utm_source=web&utm_medium=vizlab_home&utm_campaign=card,drought,https://github.com/DOI-USGS/drought-timeline,

diff --git a/src/components/FlowTiles_Carousel.vue b/src/components/FlowTiles_Carousel.vue
@@ -1,46 +1,46 @@
 <template v-slot:figures>
-    <div class="maxWidth carouselContainer">
-        <carousel 
-            class="image-slider"
-            :autoplay="false"
-            :autoplay-hover-pause="true"
-            :per-page="3"
-            navigation-enabled
-            :speed="800"
-        >
-            <slide
-                v-for="chart in charts"
-                :id="`flow-tiles-${chart.id}`"
-                :key="chart.id"
-                class="slide"
-                >
-                <div class="slider-image-container">
-                    <picture>
-                    <source
-                    :srcset="getImgUrl(chart.folder, chart.image_basename, 'png')"
-                    type="image/png"
-                    >
-                    <source
-                    :srcset="getImgUrl(chart.folder, chart.image_basename, chart.image_type)"
-                    type="image/jpg"
-                    >
-                    <img 
-                        :id="`flow-tiles-${chart.id}`"
-                        v-img="{
-                        thumbnails: true,
-                        group: 'flow-tiles', 
-                        title: chart.caption
-                        }"
-                    class="sliderImage"
-                    :src="getImgUrl(chart.folder, chart.image_basename, chart.image_type)"
-                    :alt="chart.image_alt"
-                    loading="lazy"
-                    >
-                    </picture>
-                </div>
-            </slide>
-        </carousel>
-    </div>
+  <div class="maxWidth carouselContainer">
+    <carousel 
+      class="image-slider"
+      :autoplay="false"
+      :autoplay-hover-pause="true"
+      :per-page="3"
+      navigation-enabled
+      :speed="800"
+    >
+      <slide
+        v-for="chart in charts"
+        :id="`flow-tiles-${chart.id}`"
+        :key="chart.id"
+        class="slide"
+      >
+        <div class="slider-image-container">
+          <picture>
+            <source
+              :srcset="getImgUrl(chart.folder, chart.image_basename, 'png')"
+              type="image/png"
+            >
+            <source
+              :srcset="getImgUrl(chart.folder, chart.image_basename, chart.image_type)"
+              type="image/jpg"
+            >
+            <img 
+              :id="`flow-tiles-${chart.id}`"
+              v-img="{
+                thumbnails: true,
+                group: 'flow-tiles', 
+                title: chart.caption
+              }"
+              class="sliderImage"
+              :src="getImgUrl(chart.folder, chart.image_basename, chart.image_type)"
+              :alt="chart.image_alt"
+              loading="lazy"
+            >
+          </picture>
+        </div>
+      </slide>
+    </carousel>
+  </div>
 </template>
 
 <script>

diff --git a/src/components/HeaderUSWDSBanner.vue b/src/components/HeaderUSWDSBanner.vue
@@ -110,15 +110,29 @@
 
 <style scoped lang="scss">
   @import '~uswds/dist/css/uswds.css';
+  $nearBlack: #212222;
+  .usa-banner {
+    background-color: $nearBlack;
+  }
+  .usa-banner p, text {
+    color: #F0F0F0;
+    padding: 0;
+  }
   .usa-banner__inner {
     margin-left: 10px;
     padding-left: 5px;
   }
+  .usa-banner__button {
+    color: #78B4E8;
+  }
   .usa-banner__button::after {
     content: none;
   }
+  .usa-banner__button:hover {
+    color: #A2CCF1;
+  }
   .usa-banner__button::after:hover {
-    content: none;
+    background-color: #A2CCF1;
   }
   .usa-banner__button::after:hover [aria-expanded="true"] {
     content: none;

diff --git a/src/components/PortfolioAccordions.vue b/src/components/PortfolioAccordions.vue
@@ -76,18 +76,18 @@
           id="head-river-conditions"
         >
           U.S. River Conditions (quarterly) <a
-          href="https://github.com/DOI-USGS/gage-conditions-gif"
-          target="_blank"
-          style="font-style: italic; font-size: 0.9em"
-        >View Code<span class="arrow">&#8594;</span></a> 
+            href="https://github.com/DOI-USGS/gage-conditions-gif"
+            target="_blank"
+            style="font-style: italic; font-size: 0.9em"
+          >View Code<span class="arrow">&#8594;</span></a> 
         </h4>
         <RiverConditionsCarousel />
         <h4
           id="head-streamflow"
         >
           Monthly Streamflow
         </h4>
-        <FlowTilesCarousel/>
+        <FlowTilesCarousel />
         <h4
           id="head-chart-challenge"
         >

diff --git a/src/components/PortfolioCard.vue b/src/components/PortfolioCard.vue
@@ -54,7 +54,8 @@
                 default: process.env.VUE_APP_TITLE
             },
             viz: { 
-              type: Object
+              type: Object,
+              default: null
             } 
         },
         data() {

diff --git a/src/components/PortfolioImage.vue b/src/components/PortfolioImage.vue
@@ -31,7 +31,8 @@
                 default: process.env.VUE_APP_TITLE
             },
             viz: { 
-              type: Object
+              type: Object,
+              default: null
             } 
         },
         methods: {

diff --git a/src/components/RiverConditions_Carousel.vue b/src/components/RiverConditions_Carousel.vue
@@ -1,33 +1,47 @@
 <template v-slot:figures>
-    <div class="maxWidth carouselContainer">
-        <carousel 
-            class="image-slider"
-            :autoplay="false"
-            :autoplay-hover-pause="true"
-            :per-page="3"
-            :center-mode="true"
-            navigation-enabled
-            :speed="800"        >
-            <slide
-                v-for="(chart, index) in charts"
-                :id="`river-conditions-${chart.id}`"
-                :key="chart.id"
-                class="slide"
-                @slideclick="handleSlideClick(index)">
-                <div class="slider-video-container">
-                    <div class="video-border">
-                        <center>
-                            <a :href="chart.drupal_url" target="_blank" class="video-title">{{ chart.name }}</a>
-                        </center>
-                        <video class="video" width="100%" :poster="getThumbnailUrl(chart.folder, chart.image_thumbnail)" controls> 
-                        <source :src="getVideoUrl(chart.folder, chart.video_basename, chart.video_type)" type="video/mp4">
-                        Your browser does not support the video tag.
-                        </video>
-                    </div>
-                </div>
-            </slide>
-        </carousel>
-    </div>
+  <div class="maxWidth carouselContainer">
+    <carousel 
+      class="image-slider"
+      :autoplay="false"
+      :autoplay-hover-pause="true"
+      :per-page="3"
+      :center-mode="true"
+      navigation-enabled
+      :speed="800"
+    >
+      <slide
+        v-for="(chart, index) in charts"
+        :id="`river-conditions-${chart.id}`"
+        :key="chart.id"
+        class="slide"
+        @slideclick="handleSlideClick(index)"
+      >
+        <div class="slider-video-container">
+          <div class="video-border">
+            <center>
+              <a
+                :href="chart.drupal_url"
+                target="_blank"
+                class="video-title"
+              >{{ chart.name }}</a>
+            </center>
+            <video
+              class="video"
+              width="100%"
+              :poster="getThumbnailUrl(chart.folder, chart.image_thumbnail)"
+              controls
+            > 
+              <source
+                :src="getVideoUrl(chart.folder, chart.video_basename, chart.video_type)"
+                type="video/mp4"
+              >
+              Your browser does not support the video tag.
+            </video>
+          </div>
+        </div>
+      </slide>
+    </carousel>
+  </div>
 </template>
 
 <script>

diff --git a/src/components/WhatsNew.vue b/src/components/WhatsNew.vue
@@ -29,13 +29,22 @@
         <div id="viz-text">
           <div class="text-container">
             <!-- begin blog items -->
-            <li v-for="item in blogItems" :key="item.id">
+            <li
+              v-for="item in blogItems"
+              :key="item.id"
+            >
               <span class="date-text">{{ item.date }}</span>
               {{ item.title }}
-              <a :href="item.url" target="_blank">
+              <a
+                :href="item.url"
+                target="_blank"
+              >
                 <span class="arrow">Read &#8594;</span>
               </a>
-              <div class="thumbnail-container" v-if="item.img_src">
+              <div
+                v-if="item.img_src"
+                class="thumbnail-container"
+              >
                 <img 
                   class="blog-thumbnail"
                   :src="item.img_src"
@@ -53,14 +62,14 @@
       <div class="img-container">
         <img
           class="recent-image"
-          src="https://labs.waterdata.usgs.gov/visualizations/banners/bottled_water_barplot.gif"
-          alt="Map showing the counts of bottled water facilities in all states and territories, by county. The counts are showed as scaled proportional symbols."
+          src="https://labs.waterdata.usgs.gov/visualizations/banners/unequal_access_to_water-vizlab_banner.gif"
+          alt="Animation showing interaction with a dendrogram chart of demographic characteristics relating to water insecurity in the western United States. A cursor is clicking the node of the dendrogram showing the leaves can be expanded to see the various levels of social indicators studied."
         >
         <h3 id="title-new">
-          Water bottling across the U.S.
+          Unequal access to water
         </h3> <a
           id="twitter-link"
-          href="https://labs.waterdata.usgs.gov/visualizations/bottled-water/index.html#/"
+          href="https://labs.waterdata.usgs.gov/visualizations/vulnerability-indicators/index.html#/"
           target="_blank"
         >Check out the interactive data viz<span class="arrow">&#8594;</span></a> 
       </div>