From a972d5f213e34d0535dbc78f90326b190723b8d4 Mon Sep 17 00:00:00 2001 From: "Jaenicke, Margaret (Contractor) Ellen" Date: Mon, 11 Mar 2024 11:26:24 -0500 Subject: [PATCH] #50 Adds rest of river conditions videos, updates alt text for both flow and river conditions, adds link to river conditions code --- src/assets/content/FlowTiles.js | 37 +++++---- src/assets/content/RiverConditions.js | 86 +++++++++------------ src/components/PortfolioAccordions.vue | 8 +- src/components/RiverConditions_Carousel.vue | 14 +--- 4 files changed, 66 insertions(+), 79 deletions(-) diff --git a/src/assets/content/FlowTiles.js b/src/assets/content/FlowTiles.js index ccdb190..020f958 100644 --- a/src/assets/content/FlowTiles.js +++ b/src/assets/content/FlowTiles.js @@ -3,17 +3,24 @@ export default { //Directions for adding new streamflow tiles: //navigate to s3 water-visualizations-prod-website/visualizations/flow //create a new folder with the name YYYY/MM (example 2024_01) and upload the png into that folder - //add a new object below and update the folder with the name you created, the image_basename with the file name, and the image_alt to reflect the date + //add a new object below and update the folder with the name you created, the image_basename with the file name, and the image_alt (taken from twitter) { + id: '1', + author: '', + folder: '2024_02/', + twitter_url: 'https://twitter.com/USGS_DataSci/status/1765078810725413349', + image_basename: 'flow_cartogram-feb-2024', + image_type: 'png', + image_alt: 'A tile map of the US showing streamgages by flow levels through the month of February 2024. For each state, an area chart shows the proportion of streamgages in wet, normal, or dry conditions. Streamflow conditions are quantified using percentiles comparing the past month’s flow levels to the historic record for each streamgage. During the month of February, wet conditions persisted across much of California as an atmospheric river approached. Wet conditions persisted for states such as Mississippi, Alabama, Georgia, and Tennesse as severe weather and heavy rain brought wet conditions. ' + },{ id: '2', author: '', folder: '2024_01/', twitter_url: 'https://twitter.com/USGS_DataSci/status/1754552632742752744', image_basename: 'flow_cartogram-jan-2024', image_type: 'png', - image_alt: 'January 2024 Streamflow' - } - , + image_alt: 'A tile map of the US showing streamgages by flow levels through the month of January 2024. For each state, an area chart shows the proportion of streamgages in wet, normal, or dry conditions. Streamflow conditions are quantified using percentiles comparing the past month’s flow levels to the historic record for each streamgage. During the month of January, wet conditions persisted across much of the Eastern U.S. and Pacific Coast as a storm system and low-pressure system approached, respectively. Wet conditions persisted for states such as Connecticut, Rhode Island, Vermont, New Hampshire, Massachusetts, New Jersey, New York, Oregon, Washington, and California. States such as Iowa, Nebraska, and Colorado saw relatively dry conditions.' + }, { id: '3', author: '', @@ -21,7 +28,7 @@ export default { twitter_url: 'https://twitter.com/USGS_DataSci/status/1742622815944356338', image_basename: 'flow_cartogram-dec-2023', image_type: 'png', - image_alt: 'December 2023 Streamflow' + image_alt: 'A tile map of the US showing streamgages by flow levels through the month of December 2023. For each state, an area chart shows the proportion of streamgages in wet, normal, or dry conditions. Streamflow conditions are quantified using percentiles comparing the past month’s flow levels to the historic record for each streamgage. During the month of December, much of the Northeastern U.S. and Pacific Northwest saw wet conditions for stats such as Connecticut, Rhode Island, Vermont, New Hampshire, Massachusetts, New Jersey, New York, Oregon, and Washington, while states such as Louisiana, Mississippi, and Alabama in the Southern U.S. saw relatively dry conditions.' }, { id: '4', @@ -30,7 +37,7 @@ export default { twitter_url: 'https://twitter.com/USGS_DataSci/status/1731718693686563238', image_basename: 'flow_cartogram-nov-2023', image_type: 'png', - image_alt: 'November 2023 Streamflow' + image_alt: 'A tile map of the US showing streamgages by flow levels through the month of November 2023. For each state, an area chart shows the proportion of streamgages in wet, normal, or dry conditions. Streamflow conditions are quantified using percentiles comparing the past month’s flow levels to the historic record for each streamgage. During the month of November, much of the Northeastern U.S. saw wet conditions for stats such as Connecticut, Rhode Island, Vermont, New Hampshire and Maine, while states such as Louisiana, Mississippi, and Alabama in the Southern U.S. saw dry conditions.' }, { id: '5', @@ -39,7 +46,7 @@ export default { twitter_url: 'https://twitter.com/USGS_DataSci/status/1721583036540538940', image_basename: 'flow_cartogram-oct-2023', image_type: 'png', - image_alt: 'October 2023 Streamflow' + image_alt: 'A tile map of the US showing streamgages by flow levels through the month of October 2023. For each state, an area chart shows the proportion of streamgages in wet, normal, or dry conditions. Streamflow conditions are quantified using percentiles comparing the past month’s flow levels to the historic record for each streamgage. During the month of October, much of the Central and Southern U.S. saw dry conditions, while regions such as New England and Puerto Rico saw wet conditions.' }, { id: '6', @@ -48,7 +55,7 @@ export default { twitter_url: 'https://twitter.com/USGS_DataSci/status/1711856031322538063', image_basename: 'flow_cartogram-sep-2023', image_type: 'png', - image_alt: 'September 2023 Streamflow' + image_alt: 'A tile map of the US showing streamgages by flow levels through the month of September 2023. For each state, an area chart shows the proportion of streamgages in wet, normal, or dry conditions. Streamflow conditions are quantified using percentiles comparing the past month’s flow levels to the historic record for each streamgage. During the month of September, much of the Central U.S. and parts of the Pacific Northwest, such as Oregon and Washington, saw dry conditions. Later in the month, parts of New England experienced wet conditions for states such as Maine, Massachusetts, Connecticut, Rhode Island and Delaware.' }, { id: '7', @@ -57,7 +64,7 @@ export default { twitter_url: 'https://twitter.com/USGS_DataSci/status/1700176429202506152', image_basename: 'flow_cartogram-aug-2023', image_type: 'png', - image_alt: 'August 2023 Streamflow' + image_alt: 'A tile map of the US showing streamgages by flow levels through the month of August 2023. For each state, an area chart shows the proportion of streamgages in wet, normal, or dry conditions. Streamflow conditions are quantified using percentiles comparing the past month’s flow levels to the historic record for each streamgage. During the month of August, wetter than normal conditions persisted for part of New England in states such as Vermont, New Hampshire, and Maine. Concurrently, much of the U.S. saw dry conditions, namely, states in the Pacific Northwest, such as Washington and Oregon, as well as South Central U.S. such as Texas and Louisiana. ' }, { id: '8', @@ -66,7 +73,7 @@ export default { twitter_url: 'https://twitter.com/USGS_DataSci/status/1687206598052302851', image_basename: 'flow_cartogram-jul-2023', image_type: 'png', - image_alt: 'July 2023 Streamflow' + image_alt: 'A tile map of the US showing streamgages by flow levels through the month of July 2023. For each state, an area chart shows the proportion of streamgages in wet, normal, or dry conditions. Streamflow conditions are quantified using percentiles comparing the past month’s flow levels to the historic record for each streamgage. During the month of July, wetter than normal conditions persisted for much of New England for states such as Vermont, New Hampshire, Massachusetts, and Connecticut. Concurrently, states in the Pacific Northwest, such as Washington and Oregon, saw dry conditions.' }, { id: '9', @@ -75,7 +82,7 @@ export default { twitter_url: 'https://twitter.com/USGS_DataSci/status/1678795881225781248', image_basename: 'flow_cartogram-june-2023', image_type: 'png', - image_alt: 'June 2023 Streamflow' + image_alt: 'A tile map of the US showing streamgages by flow levels through the month of June 2023. For each state, an area chart shows the proportion of streamgages in wet, normal, or dry conditions. Streamflow conditions are quantified using percentiles comparing the past month’s flow levels to the historic record for each streamgage. During the month of June, wetter than normal conditions persisted for much of the Intermountain West for states such as Utah, Colorado, Nevada, and Wyoming, while the Eastern U.S. saw dry conditions.' }, { id: '10', @@ -93,7 +100,7 @@ export default { twitter_url: 'https://twitter.com/USGS_DataSci/status/1653869069429522432', image_basename: 'flow_cartogram-apr-2023', image_type: 'png', - image_alt: 'April 2023 Streamflow' + image_alt: 'A tile map of the US showing streamgages by flow levels through the month of May 2023. For each state, an area chart shows the proportion of streamgages in wet, normal, or dry conditions. Streamflow conditions are quantified using percentiles comparing the past month’s flow levels to the historic record for each streamgage. During the month of May, wetter than normal conditions persisted for much of the Western U.S., while the Southern Plains, such as Nebraska and Kansas, and parts of the Eastern U.S., such as the Mid-Atlantic and Florida, saw drought conditions.' }, { id: '12', @@ -102,7 +109,7 @@ export default { twitter_url: 'https://twitter.com/USGS_DataSci/status/1643383570965184514', image_basename: 'flow_cartogram_2023-03', image_type: 'png', - image_alt: 'March 2023 Streamflow' + image_alt: 'A tile map of the US showing streamgages by flow levels through the month of March 2023. For each state, an area chart shows the proportion of streamgages in wet, normal, or dry conditions. Streamflow conditions are quantified using percentiles comparing the past month’s flow levels to the historic record for each streamgage. During the month of March, storms brought wetter than normal conditions for much of the U.S. Concurrently, large parts of California, the Southwest and the Mississippi River Basin saw heightened precipitation, while much of the Northwest and Northern Plaines remain dry.' }, { id: '13', @@ -111,7 +118,7 @@ export default { twitter_url: 'https://twitter.com/USGS_DataSci/status/1632802669906518018', image_basename: 'flow_cartogram_2023-02', image_type: 'png', - image_alt: 'February 2023 Streamflow' + image_alt: 'A tile map of the US showing streamgages by flow levels through the month of February 2023. For each state, an area chart shows the proportion of streamgages in wet, normal, or dry conditions. Streamflow conditions are quantified using percentiles comparing the past month’s flow levels to the historic record for each streamgage. During the month of January, winter storms brought wetter than normal conditions for much of the U.S. Concurrently, California saw wetter than normal conditions as winter storms brought heightened precipitation. At the national scale, many sites experienced wetter than normal conditions as winter storms conditions persisted across the West Coast and Eastern U.S.' }, { id: '14', @@ -120,7 +127,7 @@ export default { twitter_url: 'https://twitter.com/USGS_DataSci/status/1622635541073387520', image_basename: 'flow_cartogram_2023_jan-01', image_type: 'png', - image_alt: 'January 2023 Streamflow' + image_alt: 'A tile map of the US showing streamgages by flow levels through the month of January 2023. For each state, an area chart shows the proportion of streamgages in wet, normal, or dry conditions. Streamflow conditions are quantified using percentiles comparing the past month’s flow levels to the historic record for each streamgage. During the month of January, Winter storms Jimenez and Kassandra brought wetter than normal conditions for much of the U.S. Concurrently, California saw wetter than normal conditions when a series of atmospheric rivers brought snow and rain. At the national scale, many sites experienced wetter than normal conditions as winter storms conditions persisted across much of the U.S., with a series of atmospheric rivers on the west coast.' } ] }; \ No newline at end of file diff --git a/src/assets/content/RiverConditions.js b/src/assets/content/RiverConditions.js index 4fca3ad..8eb0fbc 100644 --- a/src/assets/content/RiverConditions.js +++ b/src/assets/content/RiverConditions.js @@ -1,147 +1,135 @@ export default { riverConditionsCharts: [ - // TO DO: - //URL to a video/animation version of the RC? which file to point to for that - // - I think they should be the drupal: https://www.usgs.gov/media/videos/us-river-conditions-october-december-2022 for example. I think I can pull these URLS from the vislist.csv or whatever - //author? Do you want it to say Created By VizLab or Water Resources Mission Area or anything - //is the thumbnail a correct version to be pulling in and displaying here? Quality looks fine to me. - //some of the thumbnails are B&W - //some of them are small square vs the larger rectangle - pre FY22 { id: '1', name: 'Oct-Dec 2024', drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-october-december-2023', - code_url: 'https://github.com/DOI-USGS/gage-conditions-gif', folder: 'FY24_Q1/', video_basename: 'river_conditions_oct_dec_2023_insta', image_thumbnail: 'river_conditions_oct_dec_2023_square_thumbnail_color.png', video_type: 'mp4', - image_alt: 'River Conditions for Fiscal Year 2024, Quarter 1, spanning from October-December 2023.' + image_alt: 'U.S. River Conditions from October 1, 2023 to December 31, 2023 at USGS streamgages.' } , { id: '2', name: 'Jul-Sep 2023', drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-july-september-2023', - code_url: 'https://github.com/DOI-USGS/gage-conditions-gif', folder: 'FY23_Q4/', video_basename: 'river_conditions_jul_sep_2023_insta', image_thumbnail: 'river_conditions_jul_sep_2023_square_thumbnail_colorized.png', video_type: 'mp4', - image_alt: 'River Conditions for Fiscal Year 2023, Quarter 4, spanning from July-September 2023.' + image_alt: 'U.S. River Conditions from July 1, 2023 to September 30, 2023 at USGS streamgages.' }, { id: '3', name: 'Apr-Jun 2023', drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-april-june-2023', - code_url: 'https://github.com/DOI-USGS/gage-conditions-gif', folder: 'FY23_Q3/', video_basename: 'river_conditions_apr_jun_2023_insta', image_thumbnail: 'river_conditions_apr_jun_2023_square_thumbnail_colorized.png', video_type: 'mp4', - image_alt: 'River Conditions for Fiscal Year 2023, Quarter 3, spanning from April-June 2023.' + image_alt: 'U.S. River Conditions from April 1, 2023 to June 30, 2023 at USGS streamgages.' }, { id: '4', name: 'Jan-Mar 2023', drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-january-march-2023', - code_url: 'https://github.com/DOI-USGS/gage-conditions-gif', folder: 'FY23_Q2/', video_basename: 'river_conditions_jan_mar_2023_insta', image_thumbnail: 'river_conditions_jan_mar_2023_square_thumbnail_color.png', video_type: 'mp4', - image_alt: 'River Conditions for Fiscal Year 2023, Quarter 2, spanning from January-March 2023.' + image_alt: 'U.S. River Conditions from January 1, 2023 to March 31, 2023 at USGS streamgages.' }, { id: '5', name: 'Oct-Dec 2022', drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-october-december-2022', - code_url: 'https://github.com/DOI-USGS/gage-conditions-gif', folder: 'FY23_Q1/', video_basename: 'river_conditions_oct_dec_2022_insta', image_thumbnail: 'river_conditions_oct_dec_2022_square_thumbnail_colorized.png', video_type: 'mp4', - image_alt: 'River Conditions for Fiscal Year 2022, Quarter 1, spanning from October-December 2022.' + image_alt: 'U.S. River Conditions from October 1, 2022 to December 31, 2022 at USGS streamgages.' }, { id: '6', name: 'Jul-Sep 2022', drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-july-september-2022', - code_url: 'https://github.com/DOI-USGS/gage-conditions-gif', folder: 'FY22_Q4/', - image_basename: 'river_conditions_jul_sep_2022_square_thumbnail_colorized', - image_type: 'png', - image_alt: 'River Conditions for Fiscal Year 2022, Quarter 4, spanning from July-September 2022.' + video_basename: 'river_conditions_jul_sep_2022_insta', + image_thumbnail: 'river_conditions_jul_sep_2022_square_thumbnail_colorized.png', + video_type: 'mp4', + image_alt: 'U.S. River Conditions from July 1, 2022 to September 30, 2022 at USGS streamgages.' }, { id: '7', name: 'Apr-Jun 2022', drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-april-june-2022', - code_url: 'https://github.com/DOI-USGS/gage-conditions-gif', folder: 'FY22_Q3/', - image_basename: 'river_conditions_apr_jun_2022_thumbnail', - image_type: 'png', - image_alt: 'River Conditions for Fiscal Year 2022, Quarter 3, spanning from April-June 2022.' + video_basename: 'river_conditions_apr_jun_2022_insta', + image_thumbnail: 'river_conditions_apr_jun_2022_thumbnail.png', + video_type: 'mp4', + image_alt: 'U.S. River Conditions from April 1, 2022 to June 30, 2022 at USGS streamgages.' }, { id: '8', name: 'Jan-Mar 2022', drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-january-march-2022', - code_url: 'https://github.com/DOI-USGS/gage-conditions-gif', folder: 'FY22_Q2/', - image_basename: 'river_conditions_jan_mar_2022_thumbnail', - image_type: 'png', - image_alt: 'River Conditions for Fiscal Year 2022, Quarter 2, spanning from January-March 2022.' + video_basename: 'river_conditions_jan_mar_2022_insta', + image_thumbnail: 'river_conditions_jan_mar_2022_thumbnail.png', + video_type: 'mp4', + image_alt: 'U.S. River Conditions from January 1, 2022 to March 31, 2022 at USGS streamgages.' }, { id: '9', name: 'Oct-Dec 2021', drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-october-december-2021', - code_url: 'https://github.com/DOI-USGS/gage-conditions-gif', folder: 'FY22_Q1/', - image_basename: 'river_conditions_oct_dec_2021_thumbnail', - image_type: 'png', - image_alt: 'River Conditions for Fiscal Year 2022, Quarter 1, spanning from October-December 2021.' + video_basename: 'river_conditions_oct_dec_2021_insta', + image_thumbnail: 'river_conditions_oct_dec_2021_thumbnail.png', + video_type: 'mp4', + image_alt: 'U.S. River Conditions from October 1, 2021 to December 31, 2021 at USGS streamgages.' }, { id: '10', name: 'Jan-Mar 2021', drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-july-september-2021', - code_url: 'https://github.com/DOI-USGS/gage-conditions-gif', folder: 'FY21_Q4/', - image_basename: 'river_conditions_jul_sep_2021_square_thumbnail_colorized', - image_type: 'png', - image_alt: 'River Conditions for Fiscal Year 2021, Quarter 4, spanning from January-March 2021.' + video_basename: 'river_conditions_jul_sep_2021_insta', + image_thumbnail: 'river_conditions_jul_sep_2021_square_thumbnail_colorized.png', + video_type: 'mp4', + image_alt: 'U.S. River Conditions from July 1, 2021 to September 30, 2021 at USGS streamgages.' }, { id: '11', name: 'Apr-Jun 2021', drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-april-june-2021', - code_url: 'https://github.com/DOI-USGS/gage-conditions-gif', folder: 'FY21_Q3/', - image_basename: 'river_conditions_apr_jun_2021_thumbnail', - image_type: 'png', - image_alt: 'River Conditions for Fiscal Year 2021, Quarter 3, spanning from April-June 2021' + video_basename: 'river_conditions_apr_jun_2021_insta', + image_thumbnail: 'river_conditions_apr_jun_2021_thumbnail.png', + video_type: 'mp4', + image_alt: 'U.S. River Conditions from April 1, 2021 to June 30, 2021 at USGS streamgages.' }, { id: '12', name: 'Jan-Mar 2021', drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-january-march-2021', - code_url: 'https://github.com/DOI-USGS/gage-conditions-gif', folder: 'FY21_Q2/', - image_basename: 'river_conditions_jan_mar_2021_thumbnail', - image_type: 'png', - image_alt: 'River Conditions for Fiscal Year 2021, Quarter 2, spanning from January-March 2021' + video_basename: 'river_conditions_jan_mar_2021_insta', + image_thumbnail: 'river_conditions_jan_mar_2021_thumbnail.png', + video_type: 'mp4', + image_alt: 'U.S. River Conditions from January 1, 2021 to March 31, 2021 at USGS streamgages.' }, { id: '13', name: 'Oct-Dec 2020', drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-october-december-2020', - code_url: 'https://github.com/DOI-USGS/gage-conditions-gif', folder: 'FY21_Q1/', - image_basename: 'river_conditions_oct_dec_2020_thumbnail', - image_type: 'png', - image_alt: 'River Conditions for Fiscal Year 2021, Quarter 1, spanning from October-December 2020' + video_basename: 'river_conditions_oct_dec_2020_insta', + image_thumbnail: 'river_conditions_oct_dec_2020_thumbnail.png', + video_type: 'mp4', + image_alt: 'U.S. River Conditions from October 1, 2020 to December 31, 2020 at USGS streamgages.' } ] }; \ No newline at end of file diff --git a/src/components/PortfolioAccordions.vue b/src/components/PortfolioAccordions.vue index 62dd8af..9f8eb32 100644 --- a/src/components/PortfolioAccordions.vue +++ b/src/components/PortfolioAccordions.vue @@ -75,11 +75,15 @@

- Quarterly River Conditions + Quarterly River Conditions View Code

Monthly Streamflow

diff --git a/src/components/RiverConditions_Carousel.vue b/src/components/RiverConditions_Carousel.vue index 889c01d..93056ea 100644 --- a/src/components/RiverConditions_Carousel.vue +++ b/src/components/RiverConditions_Carousel.vue @@ -14,22 +14,12 @@ :key="chart.id" class="slide" @slideclick="handleSlideClick"> - -
- @@ -65,10 +55,8 @@ return 'https://labs.waterdata.usgs.gov/visualizations/river-conditions/' + folder + thumbnail; }, handleSlideClick () { - //console.log('drpual link') this.charts.forEach(chart => { - //console.log('chart', getVideoURL(chart)) - //window.open(chart.drupal_url, "_blank"); + window.open(chart.drupal_url, "_blank"); }) } }