diff --git a/app/assets/graphics/content/Pixabay_ship-4490857_1280.jpg b/app/assets/graphics/content/Pixabay_ship-4490857_1280.jpg new file mode 100644 index 00000000..42f9912a Binary files /dev/null and b/app/assets/graphics/content/Pixabay_ship-4490857_1280.jpg differ diff --git a/app/assets/graphics/content/indicators/co2.jpg b/app/assets/graphics/content/indicators/co2.jpg new file mode 100644 index 00000000..c2fd534c Binary files /dev/null and b/app/assets/graphics/content/indicators/co2.jpg differ diff --git a/app/assets/graphics/content/indicators/shipping.jpg b/app/assets/graphics/content/indicators/shipping.jpg new file mode 100644 index 00000000..7317da0d Binary files /dev/null and b/app/assets/graphics/content/indicators/shipping.jpg differ diff --git a/app/assets/graphics/content/indicators/water-quality.jpg b/app/assets/graphics/content/indicators/water-quality.jpg new file mode 100644 index 00000000..532fa614 Binary files /dev/null and b/app/assets/graphics/content/indicators/water-quality.jpg differ diff --git a/app/assets/graphics/content/la-port.png b/app/assets/graphics/content/la-port.png new file mode 100644 index 00000000..a87bbcce Binary files /dev/null and b/app/assets/graphics/content/la-port.png differ diff --git a/app/assets/graphics/content/water-quality-chlorophyll-a-sf.png b/app/assets/graphics/content/water-quality-chlorophyll-a-sf.png new file mode 100644 index 00000000..47c46743 Binary files /dev/null and b/app/assets/graphics/content/water-quality-chlorophyll-a-sf.png differ diff --git a/app/assets/scripts/components/common/data-layers-block.js b/app/assets/scripts/components/common/data-layers-block.js index 09962cd9..3ea52d2c 100644 --- a/app/assets/scripts/components/common/data-layers-block.js +++ b/app/assets/scripts/components/common/data-layers-block.js @@ -24,7 +24,7 @@ class DataLayersBlock extends React.Component { return ( - Data + Indicators diff --git a/app/assets/scripts/components/common/layers/layer-co2-diff.js b/app/assets/scripts/components/common/layers/layer-co2-diff.js index b3f00a95..3a6542d1 100644 --- a/app/assets/scripts/components/common/layers/layer-co2-diff.js +++ b/app/assets/scripts/components/common/layers/layer-co2-diff.js @@ -4,8 +4,7 @@ import { indicatorGroupColors } from '../../../styles/theme/theme.js'; export default { id: 'co2-diff', - name: 'CO₂ Diff', - description: '', + name: 'Carbon Dioxide - change', type: 'raster-timeseries', timeUnit: 'day', domain: [ @@ -33,5 +32,5 @@ export default { '#DD7059' ] }, - info: null + info: 'This layer shows changes in carbon dioxide (CO₂) levels during coronavirus lockdowns versus previous years. Redder colors indicate increases in CO₂. Bluer colors indicate lower levels of CO₂.' }; diff --git a/app/assets/scripts/components/common/layers/layer-co2.js b/app/assets/scripts/components/common/layers/layer-co2.js index b2eff5a7..24fdb645 100644 --- a/app/assets/scripts/components/common/layers/layer-co2.js +++ b/app/assets/scripts/components/common/layers/layer-co2.js @@ -6,8 +6,7 @@ import { indicatorGroupColors } from '../../../styles/theme/theme.js'; export default { id: 'co2', - name: 'CO₂ Mean', - description: '', + name: 'Carbon Dioxide - avg', type: 'raster-timeseries', timeUnit: 'day', domain: [ @@ -17,7 +16,7 @@ export default { source: { type: 'raster', tiles: [ - `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/xco2_15day_mean.{date}.tif&resampling_method=bilinear&bidx=1&rescale=0.0004%2C0.00042&color_map=reds&color_formula=gamma r {gamma}` + `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/xco2_15day_mean.{date}.tif&resampling_method=bilinear&bidx=1&rescale=0.000408%2C0.000419&color_map=rdylbu_r&color_formula=gamma r {gamma}` ] }, @@ -31,7 +30,7 @@ export default { source: { type: 'raster', tiles: [ - `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/xco2_15day_base.{date}.tif&resampling_method=bilinear&bidx=1&rescale=0.0004%2C0.00042&color_map=reds&color_formula=gamma r {gamma}` + `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/xco2_15day_base.{date}.tif&resampling_method=bilinear&bidx=1&rescale=0.000408%2C0.000419&color_map=rdylbu_r&color_formula=gamma r {gamma}` ] } }, @@ -39,12 +38,17 @@ export default { swatch: indicatorGroupColors['greenhouse-gas'], legend: { type: 'gradient-adjustable', - min: 'less', - max: 'more', + min: '< 408 ppm', + max: '> 419 ppm', stops: [ - '#FFFFFF', - '#FF0000' + '#5D4FA2', + '#2F75BE', + '#6DC7A3', + '#D7ED96', + '#FFEA9B', + '#FA894C', + '#B11E4D' ] }, - info: null + info: 'This layer shows the average background concentration of carbon dioxide (CO₂) in our atmosphere for 2020. Redder colors indicate more CO₂. Whiter colors indicate less CO₂.' }; diff --git a/app/assets/scripts/components/common/layers/layer-detection-ship.js b/app/assets/scripts/components/common/layers/layer-detection-ship.js index 1864b554..03c60db5 100644 --- a/app/assets/scripts/components/common/layers/layer-detection-ship.js +++ b/app/assets/scripts/components/common/layers/layer-detection-ship.js @@ -3,8 +3,7 @@ import { indicatorGroupColors } from '../../../styles/theme/theme'; export default { id: 'detection-ship', - name: 'Ship Detections', - description: 'Ship detections by machine learning', + name: 'Shipping', type: 'inference-timeseries', domain: [ '2020-03-11' diff --git a/app/assets/scripts/components/common/layers/layer-nightlights-hd.js b/app/assets/scripts/components/common/layers/layer-nightlights-hd.js index 49154bdf..0d36bf5d 100644 --- a/app/assets/scripts/components/common/layers/layer-nightlights-hd.js +++ b/app/assets/scripts/components/common/layers/layer-nightlights-hd.js @@ -30,5 +30,5 @@ export default { '#f7cf39' ] }, - info: 'The High Definition Nightlights dataset is processed to eliminate light sources like moonlight reflectance and other interferences. The darker shades are places with less light while the lighter shades of yellow are areas with more light.' + info: 'The High Definition Nightlights dataset is processed to eliminate light sources, including moonlight reflectance and other interferences. Darker colors indicate fewer night lights and less activity. Lighter colors indicate more night lights and more activity.' }; diff --git a/app/assets/scripts/components/common/layers/layer-nightlights-viirs.js b/app/assets/scripts/components/common/layers/layer-nightlights-viirs.js index a7490a73..7987779f 100644 --- a/app/assets/scripts/components/common/layers/layer-nightlights-viirs.js +++ b/app/assets/scripts/components/common/layers/layer-nightlights-viirs.js @@ -23,5 +23,5 @@ export default { max: 'more', stops: ['#08041d', '#1f0a46', '#52076c', '#f57c16', '#f7cf39'] }, - info: 'The darker purple indicates fewer night lights while the lighter yellow indicates more night lights. Check out the HD dataset below to see a light-corrected version of this dataset.' + info: 'Darker colors indicate fewer night lights and less activity. Lighter colors indicate more night lights and more activity. Check out the HD dataset below to see a light-corrected version of this dataset.' }; diff --git a/app/assets/scripts/components/common/layers/layer-no2.js b/app/assets/scripts/components/common/layers/layer-no2.js index b3f06558..5c04eb68 100644 --- a/app/assets/scripts/components/common/layers/layer-no2.js +++ b/app/assets/scripts/components/common/layers/layer-no2.js @@ -7,7 +7,6 @@ import { indicatorGroupColors } from '../../../styles/theme/theme.js'; export default { id: 'no2', name: 'Nitrogen dioxide', - description: 'Acute harm due to NO2 exposure is only likely to arise in occupational settings. Direct exposure to the skin can cause irritations and burns.', type: 'raster-timeseries', domain: [ '2019-03-01', @@ -40,5 +39,5 @@ export default { '#050308' ] }, - info: 'Darker colors indicate higher nitrogen dioxide (NO₂) levels associated with higher levels of travel and economic activity. Lighter colors indicate lower levels of NO₂ and less activity.' + info: 'Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.' }; diff --git a/app/assets/scripts/components/common/layers/layer-water-chlorophyll.js b/app/assets/scripts/components/common/layers/layer-water-chlorophyll.js index 5441768b..2d2636c7 100644 --- a/app/assets/scripts/components/common/layers/layer-water-chlorophyll.js +++ b/app/assets/scripts/components/common/layers/layer-water-chlorophyll.js @@ -29,5 +29,5 @@ export default { '#67001F' ] }, - info: 'Chlorophyll is an indicator of algae growth. This dataset shows the difference in chlorophyll abundance in 2020 compared to previous years. Redder colors indicate increases in chlorophyll, while bluer colors indicate decreases in chlorophyll. White areas indicate no change.' + info: 'Chlorophyll is an indicator of algae growth. Redder colors indicate increases in chlorophyll-a and worse water quality. Bluer colors indicate decreases in chlorophyll-a and improved water quality. White areas indicate no change.' }; diff --git a/app/assets/scripts/components/common/layers/layer-water-spm.js b/app/assets/scripts/components/common/layers/layer-water-spm.js index ce95deb4..420f95a8 100644 --- a/app/assets/scripts/components/common/layers/layer-water-spm.js +++ b/app/assets/scripts/components/common/layers/layer-water-spm.js @@ -29,5 +29,5 @@ export default { '#67001F' ] }, - info: 'Turbidity refers to the amount of sediment or particles suspended in water. For this dataset, darker colors indicate more sediment and murkier water, while lighter colors indicate less sediment and clearer water.' + info: 'Turbidity refers to the amount of sediment or particles suspended in water. Darker colors indicate more sediment and murkier water. Lighter colors indicate less sediment and clearer water.' }; diff --git a/app/assets/scripts/components/common/mb-map-explore/mb-popover/popover-inner.js b/app/assets/scripts/components/common/mb-map-explore/mb-popover/popover-inner.js index 9893dbb2..d3b80ac5 100644 --- a/app/assets/scripts/components/common/mb-map-explore/mb-popover/popover-inner.js +++ b/app/assets/scripts/components/common/mb-map-explore/mb-popover/popover-inner.js @@ -56,7 +56,10 @@ export default class MBPopoverInner extends React.Component { } componentDidUpdate (prevProps) { - if (prevProps.lngLat !== this.props.lngLat) { + if ( + prevProps.lngLat !== this.props.lngLat || + prevProps.content !== this.props.content + ) { this.preventNextClick = true; setTimeout(() => { this.preventNextClick = false; diff --git a/app/assets/scripts/components/common/meta-tags.js b/app/assets/scripts/components/common/meta-tags.js index 45ffad5b..c5b13493 100644 --- a/app/assets/scripts/components/common/meta-tags.js +++ b/app/assets/scripts/components/common/meta-tags.js @@ -18,7 +18,7 @@ const MetaTags = ({ title, description, children }) => { {/* Twitter */} - + {description ? ( diff --git a/app/assets/scripts/components/home/index.js b/app/assets/scripts/components/home/index.js index 74c0e654..d77211dc 100644 --- a/app/assets/scripts/components/home/index.js +++ b/app/assets/scripts/components/home/index.js @@ -275,7 +275,7 @@ const Story = styled.article` display: flex; `; -const StoryContent = styled.a` +const StoryContent = styled(Link)` display: flex; flex-flow: row nowrap; align-items: center; @@ -291,12 +291,6 @@ const StoryCopy = styled.div` grid-gap: ${glsp()} 0; `; -const StoryTitle = styled.h1` - font-size: 1.25rem; - line-height: 1.75rem; - margin: 0; -`; - const StoryProse = styled(Prose)` display: grid; grid-gap: ${glsp()} 0; @@ -537,9 +531,8 @@ class Home extends React.Component { - + - {currentStory.title}

{currentStory.prose}

 diff --git a/app/assets/scripts/components/home/stories/index.js b/app/assets/scripts/components/home/stories/index.js index 7d7bd58b..4cbc597f 100644 --- a/app/assets/scripts/components/home/stories/index.js +++ b/app/assets/scripts/components/home/stories/index.js @@ -1,11 +1,11 @@ import storyNy from './story-ny.js'; import storySf from './story-sf.js'; -import storyLa from './story-la.js'; import storyBe from './story-be.js'; +import storyNyWq from './story-ny-wq.js'; export default [ storyNy, storySf, - storyLa, - storyBe + storyBe, + storyNyWq ]; diff --git a/app/assets/scripts/components/home/stories/story-be.js b/app/assets/scripts/components/home/stories/story-be.js index b1af9969..9731530f 100644 --- a/app/assets/scripts/components/home/stories/story-be.js +++ b/app/assets/scripts/components/home/stories/story-be.js @@ -1,7 +1,6 @@ export default { spotlightId: 'be', - title: 'The drop in CO₂ emission', - prose: 'Beijing has some indication of reduction in activity based on the drop in CO₂ during lockdown.', + prose: 'Global CO₂ concentrations are so large that it is difficult to detect temporary COVID-19-related changes.', layers: ['co2-diff'], link: '/explore/be' }; diff --git a/app/assets/scripts/components/home/stories/story-la.js b/app/assets/scripts/components/home/stories/story-la.js deleted file mode 100644 index 56d59b16..00000000 --- a/app/assets/scripts/components/home/stories/story-la.js +++ /dev/null @@ -1,7 +0,0 @@ -export default { - spotlightId: 'la', - title: '19% reduction in shipping', - prose: 'Los Angeles has the busiest port in the United States, which this year saw a 19% reduction in shipping cargo volumes compared to 2019. NASA researchers are using artificial intelligence techniques and high resolution satellite imagery to track shipping activity over time.', - layers: ['detection-ship'], - link: '/explore/la' -}; diff --git a/app/assets/scripts/components/home/stories/story-ny-wq.js b/app/assets/scripts/components/home/stories/story-ny-wq.js new file mode 100644 index 00000000..bb0795c2 --- /dev/null +++ b/app/assets/scripts/components/home/stories/story-ny-wq.js @@ -0,0 +1,6 @@ +export default { + spotlightId: 'ny', + prose: 'Coronavirus-related shutdowns may affect the amount of algae and sediment in water bodies.', + layers: ['water-chlorophyll'], + link: '/explore/ny' +}; diff --git a/app/assets/scripts/components/home/stories/story-ny.js b/app/assets/scripts/components/home/stories/story-ny.js index 90f57765..96dc0aa9 100644 --- a/app/assets/scripts/components/home/stories/story-ny.js +++ b/app/assets/scripts/components/home/stories/story-ny.js @@ -1,6 +1,5 @@ export default { spotlightId: 'ny', - title: '30% reduction in NO₂', prose: 'Air pollution levels in New York City dropped by as much as 30% during COVID-19 lockdowns.', layers: ['no2'], link: '/explore/ny' diff --git a/app/assets/scripts/components/home/stories/story-sf.js b/app/assets/scripts/components/home/stories/story-sf.js index 6ab1c483..42e28868 100644 --- a/app/assets/scripts/components/home/stories/story-sf.js +++ b/app/assets/scripts/components/home/stories/story-sf.js @@ -1,7 +1,6 @@ export default { spotlightId: 'sf', - title: 'Nightlights', - prose: 'While the shelter-in-place mandate was in effect, non-essential businesses were closed and approximately 6.7 million residents in the San Francisco Bay Area were asked to stay home.', + prose: 'While the shelter-in-place mandate was in effect, non-essential businesses were closed, and approximately 6.7 million residents in the San Francisco Bay Area were asked to stay home.', layers: ['nightlights-hd'], link: '/explore/sf' }; diff --git a/app/assets/scripts/components/indicators/hub/index.js b/app/assets/scripts/components/indicators/hub/index.js index 62368010..902f7d89 100644 --- a/app/assets/scripts/components/indicators/hub/index.js +++ b/app/assets/scripts/components/indicators/hub/index.js @@ -41,23 +41,31 @@ class IndicatorsHub extends React.Component { - Indicators + Understanding the Indicators -

- Although NASA cannot directly observe COVID-19 from space, we can observe how human actions in response to COVID-19 affect the world around us. We refer to these as indicators. + Although NASA cannot see the novel coronavirus from space, + we can observe how human actions in response to the + coronavirus affect the world around us. We refer to these + as indicators. +

+

+ This dashboard explores key indicators to track and compare + changes over time including: Water quality, nighttime + lights, carbon dioxide (CO2), nitrogen dioxide (NO2), and + ship activity in major ports.

- This dashboard explores 10 key indicators -- 4 environmental and 6 economic -- that show how the planet is responding to our changing behavior. + These indicators were chosen based on NASA researchers' + observations and the availability of satellite data to track + human-induced changes of our planet. Click an indicator + below to find out more.

diff --git a/app/assets/scripts/components/indicators/index.js b/app/assets/scripts/components/indicators/index.js index d67ee2ac..7fcb8abf 100644 --- a/app/assets/scripts/components/indicators/index.js +++ b/app/assets/scripts/components/indicators/index.js @@ -35,13 +35,19 @@ * */ import no2 from './indicator-no2'; +import co2 from './indicator-co2'; import bm from './indicator-nightlights'; import population from './indicator-population'; +import waterQuality from './indicator-water-quality'; +import shipping from './indicator-shipping'; const indicators = [ bm, no2, - population + co2, + population, + waterQuality, + shipping ]; export default indicators; diff --git a/app/assets/scripts/components/indicators/indicator-co2.js b/app/assets/scripts/components/indicators/indicator-co2.js new file mode 100644 index 00000000..9cb5e189 --- /dev/null +++ b/app/assets/scripts/components/indicators/indicator-co2.js @@ -0,0 +1,285 @@ +import React from 'react'; +import styled from 'styled-components'; + +import Prose from '../../styles/type/prose'; +import Gridder from '../../styles/gridder'; +import InpageHGroup from '../../styles/inpage-hgroup'; +import { Fold, FoldDetails } from '../../styles/fold'; +import { + IntroLead +} from '../../styles/datasets'; +import media from '../../styles/utils/media-queries'; + +import { glsp } from '../../styles/utils/theme-values'; +import Heading from '../../styles/type/heading'; + +const LeadFold = styled(Fold)` + padding-bottom: 0; + + ${media.largeUp` + padding-bottom: ${glsp(3)}; + `} +`; + +const IntroFold = styled(Fold)` + padding-bottom: 0; + + ${Gridder} { + align-items: center; + } + + ${FoldDetails} { + grid-column: content-start / content-end; + + ${media.mediumUp` + grid-column: content-start / content-8; + `} + + ${media.largeUp` + grid-column: content-start / content-10; + `} + } +`; + +const ResearchFold = styled(Fold)` + padding-bottom: 0; + + ${Gridder} { + align-items: center; + } + + /* stylelint-disable-next-line */ + ${InpageHGroup} { + grid-row: 1; + grid-column: content-start / content-end; + + ${media.largeUp` + grid-column: content-start / content-7; + `} + } + + ${Prose} { + grid-column: content-start / content-end; + + ${media.mediumUp` + grid-column: content-start / content-8; + `} + + ${media.largeUp` + grid-column: content-start / content-10; + `} + } +`; + +const InterpretDataFold = styled(Fold)` + padding-bottom: 0; + + ${Gridder} { + align-items: center; + } + + ${FoldDetails} { + grid-column: content-start / content-end; + + ${media.mediumUp` + grid-column: content-start / content-8; + `} + + ${media.largeUp` + grid-column: content-start / content-10; + `} + } +`; + +const CreditsFold = styled(Fold)` + padding-bottom: 0; + + ${Gridder} { + align-items: center; + } + + /* stylelint-disable-next-line */ + ${InpageHGroup} { + grid-row: 1; + grid-column: content-start / content-end; + + ${media.largeUp` + grid-column: content-start / content-7; + `} + } + + ${Prose} { + grid-column: content-start / content-end; + + ${media.mediumUp` + grid-column: content-start / content-8; + `} + + ${media.largeUp` + grid-column: content-start / content-10; + `} + } +`; + +const FactsFold = styled(Fold)` + ${Gridder} { + align-items: center; + } + + /* stylelint-disable-next-line */ + ${InpageHGroup} { + grid-row: 1; + grid-column: content-start / content-end; + + ${media.largeUp` + grid-column: content-start / content-7; + `} + } + + ${Prose} { + grid-column: content-start / content-end; + + ${media.mediumUp` + grid-column: content-start / content-8; + `} + + ${media.largeUp` + grid-column: content-start / content-10; + `} + } +`; + +const metadata = { + id: 'co2', + name: 'Carbon Dioxide', + color: '#2276AC' +}; + +class CO2LongForm extends React.Component { + render () { + return ( + + + + + Reductions in carbon dioxide (CO2) emissions due to COVID-19 shutdowns are expected to reduce the rate at which CO2 accumulates in the atmosphere, but not its total atmospheric concentration. + + + + + + + + + + +

+ Reductions in carbon dioxide (CO2) emissions due to COVID-19 shutdowns are expected to reduce the rate at which CO2 accumulates in the atmosphere, but not its total atmospheric concentration. +

+

+ + Carbon dioxide (CO2) is a greenhouse gas primarily emitted from the combustion of fossil fuels such as petroleum, coal, and natural gas. Scientists widely agree that the build-up of excess carbon dioxide and other greenhouse gases within Earth’s atmosphere has contributed to the rapid change in global climate. +

+

+ + During lockdowns and in response to other social distancing measures throughout the COVID-19 pandemic, there have been significant but temporary reductions in CO2 emissions. These reductions are accompanied by comparable reductions in short-lived air pollutants, such as nitrogen dioxide (NO2). While fossil fuel combustion emits far more CO2 than NO2, scientists anticipate much smaller changes in the atmospheric concentration of CO2 due to its larger atmospheric abundance, relatively long lifespan, and role of trees and other plants in its seasonal absorption. +

+

+ Because of this, regional-scale changes in CO2 concentrations are expected to be no larger than 1 part per million (ppm), out of the 415 ppm CO2 background – a change of only 0.25%. The longer-term implications of this temporary reduction will take time and rigorous scientific study to fully understand. +

+ + + + + + + + + + +

+ To track the changes in atmospheric CO2 during COVID-19 shutdowns, researchers are using observations from the NASA Orbiting Carbon Observatory 2 (OCO-2) and Japan’s Greenhouse gases Observing SATellite (GOSAT). +

+

+ OCO-2 and GOSAT provide estimates of average column atmospheric CO2 concentrations from Earth’s surface to space. OCO-2, which launched in 2014, provides changes in atmospheric CO2 on regional scales across the globe. GOSAT, which launched in 2009, provides targeted atmospheric CO2 observations that can be used to track changes over large urban areas. +

+

+ Ongoing research by the OCO-2 Science Team at NASA’s Jet Propulsion Laboratory (JPL), Colorado State University, and the Global Modeling and Assimilation Office (GMAO) at NASA’s Goddard Space Flight Center seeks to better understand the atmospheric CO2 effects of the COVID-19 shutdowns. The Japan Aerospace Exploration Agency (JAXA) GOSAT Project Team and the GOSAT Earth Observation Research Center (EORC) generated the GOSAT products. +

+ + + + + + + + + + +

+ Unlike satellite-derived NO2 measurements, which are captured continuously on a daily basis, the coverage of CO2 measurements from OCO-2 and GOSAT is not as dense. Because of this, measurements from OCO-2 and GOSAT collected over weeks to months must be combined to yield high-resolution global maps of CO2. In addition, in order to account for long-range transport of CO2 by the wind, the data must further be assimilated into atmospheric transport models like those used to predict the weather. + +

+ +

+ The NASA dashboard uses NASA’s Global Earth Observing System Constituent Data Assimilation System (GEOS CoDAS) developed by GMAO to ingest the OCO-2 data and produce gap-filled maps. + +

+ +

+ To more clearly discriminate between the COVID-19 related changes and much larger seasonal variations, observations from 2020 are compared with a carefully constructed baseline CO2 climatology derived from a reference simulation that was corrected for persistent biases between the model and OCO-2 observations collected in 2015-2019. + +

+ + + + + + + + + +

+ Carbon dioxide data courtesy of the OCO-2 Science Team at NASA’s Jet Propulsion Laboratory, Colorado State University, and the Global Modeling and Assimilation Office at NASA’s Goddard Space Flight Center using OCO-2 and GOSAT data. +

+ + + + + + + + + NASA Features + + + + + + ); + } +} + +CO2LongForm.propTypes = {}; + +export default { + ...metadata, + LongForm: CO2LongForm +}; diff --git a/app/assets/scripts/components/indicators/indicator-nightlights.js b/app/assets/scripts/components/indicators/indicator-nightlights.js index 5c20d479..d3b488d0 100644 --- a/app/assets/scripts/components/indicators/indicator-nightlights.js +++ b/app/assets/scripts/components/indicators/indicator-nightlights.js @@ -10,8 +10,20 @@ import Heading from '../../styles/type/heading'; import MediaImage, { MediaCompare } from '../../styles/media-image'; import media from '../../styles/utils/media-queries'; import config from '../../config'; +import { glsp } from '../../styles/utils/theme-values'; + +import { + IntroLead +} from '../../styles/datasets'; const { baseUrl } = config; +const LeadFold = styled(Fold)` + padding-bottom: 0; + + ${media.largeUp` + padding-bottom: ${glsp(3)}; + `} +`; const IntroFold = styled(Fold)` padding-bottom: 0; @@ -165,15 +177,25 @@ class BMLongForm extends React.Component { render () { return ( + + + + During the COVID-19 pandemic, researchers are using night light observations to track variations in energy use, migration, and transportation in response to social distancing and lockdown measures. + + + + +

- Images of the Earth at night give us an extraordinary view of human activity over time. The nighttime environment illuminates Earth features like city infrastructure, lightning flashes, fishing boats navigating open water, gas flares, aurora, and natural hazards like lava flowing from an active volcano. Paired with the moonlight, researchers can also spot snow and ice, as well as other reflective surfaces that allow nighttime land and ocean analysis. + Images of Earth at night give us an extraordinary view of human activity over time. The nighttime environment illuminates Earth features, including city infrastructure, lightning flashes, fishing boats navigating open water, gas flares, aurora, and natural hazards, such as lava flowing from an active volcano. Paired with the moonlight, researchers can also spot snow and ice, as well as other reflective surfaces that allow nighttime land and ocean analysis.

During the COVID-19 pandemic, researchers are using night light observations to track variations in energy use, migration, and transportation in response to social distancing and lockdown measures.

+ @@ -187,20 +209,19 @@ class BMLongForm extends React.Component { />

- Nightlights data are collected by the Visible Infrared Radiometer Suite (VIIRS) Day/Night Band (DNB) on the Suomi-National Polar-Orbiting Partnership (Suomi-NPP) platform, a joint NOAA (National Oceanic and Atmospheric Administration) and NASA satellite. The images are produced by NASA’s Black Marble products suite. - All data are calibrated daily, corrected, and validated with ground measurements for science-ready analysis. + Nightlights data are collected by the Visible Infrared Radiometer Suite (VIIRS) Day/Night Band (DNB) on the Suomi-National Polar-Orbiting Partnership (Suomi-NPP) platform, a joint National Oceanic and Atmospheric Administration (NOAA) and NASA satellite. The images are produced by NASA’s Black Marble products suite. All data are calibrated daily, corrected, and validated with ground measurements for science-ready analysis.

- New research funded by NASA’s Rapid Response and Novel Research in the Earth Sciences - (RRNES) program seeks to better understand what nightlights can tell us - about the impacts of COVID-19. + New research funded by NASA’s Rapid Response and Novel Research in the Earth Sciences (RRNES) program seeks to discover what nightlights can tell us about the impacts of novel coronavirus-related shutdowns.

+ > + Lighting changes in Jianghan District, a commercial area of Wuhan, and nearby residential areas. Image Credit: NASA + @@ -213,23 +234,12 @@ class BMLongForm extends React.Component { />

- Each spotlight city has a slider for turning night lights on and off. The - darker purple indicates fewer night lights while the lighter yellow - indicates more night lights. By comparing regions before and after - guidelines to shelter-in-place began, researchers are able to visualize - the extent to which social distancing measures impacted various economic - activities based on whether or not light pollution increased or decreased, - which highways were shut down, and which cities stayed the same. + Each spotlight city has a slider for turning night lights on and off. The darker purple indicates fewer night lights, while the lighter yellow indicates more. By comparing regions before and after guidelines to shelter-in-place began, researchers are able to visualize the extent to which social distancing measures affected various economic activities based on whether or not light pollution increased or decreased, which highways were shut down, and which cities stayed the same.

- The products featured are 500-meter (VNP46) and 30-meter Black Marble - High Definition (HD) nighttime lights. Black Marble HD downscales radiances - from the 500-meter product to street level using optical imagery from - Landsat 8, a NASA and USGS (U.S. Geological Survey) satellite, along with - OpenStreetMap ancillary layers. This helps visualize neighborhoods and - commercial centers that have less activity – or closures – due to social - distancing restrictions. + The products featured are 500-meter (VNP46) and 30-meter Black Marble High Definition (HD) nighttime lights. Black Marble HD downscales radiances from the 500-meter product to street level using optical imagery from Landsat 8, a NASA and the U.S. Geological Survey (USGS) satellite, along with OpenStreetMap ancillary layers. This helps visualize neighborhoods and commercial centers that have less activity – or closures – due to social distancing restrictions.

+ @@ -241,6 +251,7 @@ class BMLongForm extends React.Component { rightImageAlt='Hubei' rightImageLabel='After' /> + Images of the cities of Wuhan (left) and Hefei (top right) before and after COVID-19 related shutdowns were enacted. Image Credit: NASA @@ -253,11 +264,7 @@ class BMLongForm extends React.Component { />

- Black Marble data courtesy of Universities Space Research Association (USRA) - Earth from Space Institute (EfSI) and NASA Goddard Space Flight Center's - Terrestrial Information Systems Laboratory using VIIRS day-night band data - from the Suomi National Polar-orbiting Partnership and Landsat-8 Operational - Land Imager (OLI) data from the U.S. Geological Survey. + Black Marble data courtesy of Universities Space Research Association (USRA) Earth from Space Institute (EfSI) and NASA Goddard Space Flight Center’s Terrestrial Information Systems Laboratory using VIIRS day-night band data from the Suomi National Polar-orbiting Partnership and Landsat-8 Operational Land Imager (OLI) data from the U.S. Geological Survey.

diff --git a/app/assets/scripts/components/indicators/indicator-no2.js b/app/assets/scripts/components/indicators/indicator-no2.js index 22527c6f..c737113d 100644 --- a/app/assets/scripts/components/indicators/indicator-no2.js +++ b/app/assets/scripts/components/indicators/indicator-no2.js @@ -130,36 +130,6 @@ const InterpretDataFold = styled(Fold)` } `; -const CreditsFold = styled(Fold)` - padding-bottom: 0; - - ${Gridder} { - align-items: center; - } - - /* stylelint-disable-next-line */ - ${InpageHGroup} { - grid-row: 1; - grid-column: content-start / content-end; - - ${media.largeUp` - grid-column: content-start / content-7; - `} - } - - ${Prose} { - grid-column: content-start / content-end; - - ${media.mediumUp` - grid-column: content-start / content-8; - `} - - ${media.largeUp` - grid-column: content-start / content-10; - `} - } -`; - const FactsFold = styled(Fold)` ${Gridder} { align-items: center; @@ -201,7 +171,7 @@ class NO2LongForm extends React.Component { - Since the onset of COVID-19, atmospheric concentrations of nitrogen dioxide have changed by as much as 60% in some regions. + Since the outbreak of the novel coronavirus, atmospheric concentrations of nitrogen dioxide have changed by as much as 60% in some regions. @@ -211,24 +181,18 @@ class NO2LongForm extends React.Component {

- NO2 is a common air pollutant primarily emitted from the burning of fossil fuels in cars, - power plants and industrial facilities. Lower to the ground, NO2 can directly irritate peoples' - lungs and contributes to the production of particulate pollution and smog when it reacts with sunlight. + Nitrogen dioxide (NO2) is a common air pollutant primarily emitted from the burning of fossil fuels in cars and power plants. Lower to the ground, nitrogen dioxide can directly irritate the lungs and contributes to the production of particulate pollution and smog when it reacts with sunlight.

- During the COVID-19 pandemic, scientists observed considerable decreases in NO2 levels - around the world. These decreases are predominantly associated with changing human behavior in - response to the spread of COVID-19. As communities worldwide have implemented lockdown restrictions - in an attempt to stem the spread of the virus, the reduction in human transportation activity has - resulted in less NO2 emitted into the atmosphere. + During the COVID-19 pandemic, scientists have observed considerable decreases in nitrogen dioxide levels around the world. These decreases are predominantly associated with changing human behavior in response to the spread of COVID-19. As communities worldwide have implemented lockdown restrictions in an attempt to stem the spread of the virus, the reduction in human transportation activity has resulted in less NO2 being emitted into the atmosphere.

- These changes are particularly apparent over large urban areas and economic corridors, which - typically have high levels of automobile traffic, airline flights, and other related activity. + These changes are particularly apparent over large urban areas and economic corridors, which typically have high levels of automobile traffic, airline flights, and other related activity.

- NASA has been able to observe subsequent rebounds in nitrogen dioxide as the lockdown restrictions ease. + NASA has observed subsequent rebounds in nitrogen dioxide levels as the lockdown restrictions ease.

+ @@ -241,7 +205,7 @@ class NO2LongForm extends React.Component { rightImageLabel='March 2020' />
- NO2 levels fell by as much as 30% over much of the Northeast U.S. Credit: NASA Scientific Visualization Studio + NO2 levels fell by as much as 30% over much of the Northeast U.S. Image Credit: NASA Scientific Visualization Studio
@@ -264,22 +228,18 @@ class NO2LongForm extends React.Component {

For nitrogen dioxide levels related to COVID-19, NASA uses data collected - by the joint NASA/Royal Netherlands Meteorological Institute (KNMI) Ozone Monitoring Instrument (OMI) aboard + by the joint NASA-Royal Netherlands Meteorological Institute (KNMI) Ozone Monitoring Instrument (OMI) aboard the Aura satellite, as well as data collected by the Tropospheric Monitoring Instrument (TROPOMI) aboard the European Commission’s Copernicus Sentinel-5P satellite, built by the European Space Agency.

- OMI, which launched in 2004, is the predecessor to TROPOMI. Although TROPOMI, - which launched in 2017, provides higher resolution information, the longer - OMI data record provides good context for the current TROPOMI observations. + OMI, which launched in 2004, preceded TROPOMI, which launched in 2017. While TROPOMI provides higher resolution information, the longer OMI data record provides context for the TROPOMI observations.

- Scientists will be using these data to investigate how travel bans and lockdown - orders related to COVID-19 are impacting regional air quality and chemistry, as - well as why these restrictions may be having inconsistent effects on air quality - around the world. + Scientists will use these data to investigate how travel bans and lockdown orders related to the novel coronavirus are impacting regional air quality and chemistry, as well as why these restrictions may be having inconsistent effects on air quality around the world.

+ @@ -293,29 +253,15 @@ class NO2LongForm extends React.Component { />

- Each spotlight city has a slider for turning nitrogen dioxide data on and off. The darker purple - indicates higher levels of nitrogen dioxide associated with increased travel and economic activity, - while the lighter blues indicate lower levels of NO2 and decreased activity. -

-

- Nitrogen dioxide has a relatively short lifetime in the atmosphere. Once it is emitted, it lasts - only a few hours before it dissipates, so it does not travel far from its source. -

-

- Because nitrogen dioxide is primarily emitted from burning fossil fuels, changes in its - atmospheric concentration can be related to changes in human activity if the data are properly - processed and interpreted. + Nitrogen dioxide has a relatively short lifetime in the atmosphere. Once it is emitted, it lasts only a few hours before it dissipates, so it does not travel far from its source.

+

- However, care must be taken when interpreting satellite NO 2 data, as the quantity observed by - satellite is not exactly the same as the abundance at ground level, and natural variations in - weather (e.g., temperature, wind speed, solar intensity) influence the amount of NO 2 in the - atmosphere. In addition, the OMI and TROPOMI instruments cannot observe the NO 2 - abundance underneath clouds. For more information on processing and cautions related to - interpreting this data, please click here. + Because nitrogen dioxide is primarily emitted from burning fossil fuels, changes in its atmospheric concentration can be related to changes in human activity, if the data are properly processed and interpreted.

+

- Scientists will be using this data to investigate how travel bans and lockdown orders related to COVID-19 are impacting regional air quality and chemistry. + Interpreting satellite NO2 data must be done carefully, as the quantity observed by satellite is not exactly the same as the abundance at ground level, and natural variations in weather (e.g., temperature, wind speed, solar intensity) influence the amount of NO2 in the atmosphere. In addition, the OMI and TROPOMI instruments cannot observe the NO2 abundance underneath clouds. For more information on processing and cautions related to interpreting this data, please click here.

@@ -323,25 +269,11 @@ class NO2LongForm extends React.Component { src={`${baseUrl}/assets/graphics/content/no2_south_america.png`} alt='NO2 over South America' > - NO2 levels over South America from the Ozone Monitoring Instrument. The dark green areas in the northwest indicate areas of no data, most likely associated with cloud cover or snow. + NO2 levels over South America from the Ozone Monitoring Instrument. The dark green areas in the northwest indicate areas of no data, most likely associated with cloud cover or snow. Image Credit: NASA - - - - -

- Nitrogen dioxide data courtesy of NASA Goddard Space Flight Center's Atmospheric Chemistry and Dynamics Laboratory using OMI data from the Aura satellite. -

- - - - + + + + Travel restrictions and lockdown measures have disrupted the + shipping industry and the global economy broadly. NASA researchers + are using artificial intelligence to track shipping activities + across major ports in the U.S. + + + + + + + + +

+ Supply chains around the world dependent on cargo shipping + have been interrupted by travel restrictions and quarantines + designed to stop the spread of the novel coronavirus. Many + ports are closed, shipments have been canceled, and, in some + locations, altered shipping routes have prevented the + efficient movement of cargo. +

+

+ NASA researchers are using cutting-edge artificial + intelligence technology and high-resolution satellite imagery + from Planet Labs to track shipping activity at major U.S. + ports during the novel coronavirus pandemic. This data will + help quantify the level of shipping-related economic activity + over time and could eventually contribute to our understanding + of the environmental implications of global decreases in + shipping on key air pollutants like nitrogen dioxide (NO + 2) and sulphur dioxide (SO2). +

+ + + +
+ Los Angeles has the busiest port in the United States, which + this year saw a 19% reduction in shipping cargo volumes compared + to 2019, according to the Port of Los Angeles. Image Credit: + Planet Labs/NASA. +
+ + + + + + + +

+ NASA’s Interagency Implementation and Advanced Concepts Team + (IMPACT), based at NASA’s Marshall Space Flight Center in + Huntsville, Alabama, trained an algorithm using supervised + machine learning techniques to detect ships on PlanetScope + images. The algorithm detects a ship on the image and geolocates + it. The NASA team has also built an Application Programming + Interface (API) that allows ship detections to be aggregated + across a port area for a given day. Efforts are also underway to + conduct a study of ship detections in U.S. ports during the + period of pandemic travel restrictions, as compared to the same + period of time in previous years. +

+ + + + + + + + +

+ NASA researchers have access to the high-resolution imagery + from Planet Labs, through the Commercial SmallSat Data + Acquisition Program ( + + CSDAP + + ), which acquires data from commercial sources that support + NASA's Earth science research goals. The PlanetScope + image resolution is 3 meters per pixel, which allows + researchers to get a detailed look at changes occurring on the + ground. Commercial small satellites also provide high temporal + resolution, making images available almost every day + (depending on cloud cover) for key areas of interest. +

+

+ Ship detections will be provided daily, except when prevented + by significant cloud cover. After the machine learning model + detects the ships, a secondary human validation is also + performed before the detections are made available for the + dashboard. +

+ + + +
+ Supply chains around the world dependent on cargo shipping have + been interrupted by travel restrictions and quarantines designed + to stop the spread of the novel coronavirus. Image Credit: Open + Source. +
+ + + + + + + +

+ The CSDAP and IMPACT are elements of NASA’s Earth Science Data + Systems program. +

+ + + + + + + + + NASA Features + + + + + + + ); + } +} + +ShippingLongForm.propTypes = {}; + +export default { + ...metadata, + LongForm: ShippingLongForm +}; diff --git a/app/assets/scripts/components/indicators/indicator-water-quality.js b/app/assets/scripts/components/indicators/indicator-water-quality.js new file mode 100644 index 00000000..52db30bf --- /dev/null +++ b/app/assets/scripts/components/indicators/indicator-water-quality.js @@ -0,0 +1,276 @@ +import React from 'react'; +import styled from 'styled-components'; + +import Prose from '../../styles/type/prose'; +import Gridder from '../../styles/gridder'; +import InpageHGroup from '../../styles/inpage-hgroup'; +import { Fold } from '../../styles/fold'; +import MediaImage from '../../styles/media-image'; +import media from '../../styles/utils/media-queries'; + +import Heading from '../../styles/type/heading'; +import config from '../../config'; +import { indicatorGroupColors } from '../../styles/theme/theme'; + +const { baseUrl } = config; + +const IntroFold = styled(Fold)` + padding-bottom: 0; + + ${Prose} { + grid-column: content-start / content-end; + + ${media.mediumUp` + grid-column: content-start / content-8; + `} + + ${media.largeUp` + grid-column: content-start / content-10; + `} + } +`; + +const ResearchFold = styled(Fold)` + padding-bottom: 0; + + ${Gridder} { + align-items: center; + } + + /* stylelint-disable-next-line */ + ${InpageHGroup} { + grid-row: 1; + grid-column: content-start / content-end; + + ${media.largeUp` + grid-column: content-start / content-7; + `} + } + + ${Prose} { + grid-column: content-start / content-end; + + ${media.mediumUp` + grid-column: content-start / content-8; + `} + + ${media.largeUp` + grid-column: content-start / content-10; + `} + } +`; + +const InterpretingDataFold = styled(Fold)` + padding-bottom: 0; + + ${Gridder} { + align-items: center; + } + + /* stylelint-disable-next-line */ + ${InpageHGroup} { + grid-row: 1; + grid-column: content-start / content-end; + + ${media.largeUp` + grid-column: content-start / content-7; + `} + } + + ${Prose} { + grid-column: content-start / content-end; + + ${media.mediumUp` + grid-column: content-start / content-8; + `} + + ${media.largeUp` + grid-column: content-start / content-10; + `} + } +`; + +const AdditionalResourcesFold = styled(Fold)` + + ${Gridder} { + align-items: center; + } + + /* stylelint-disable-next-line */ + ${InpageHGroup} { + grid-row: 1; + grid-column: content-start / content-end; + + ${media.largeUp` + grid-column: content-start / content-7; + `} + } + + ${Prose} { + grid-column: content-start / content-end; + + ${media.mediumUp` + grid-column: content-start / content-8; + `} + + ${media.largeUp` + grid-column: content-start / content-10; + `} + } +`; + +const metadata = { + id: 'water-quality', + name: 'Water Quality', + color: indicatorGroupColors['water-quality'].color +}; + +class WQLongForm extends React.Component { + render () { + return ( + + + + +

+ Images of the Earth at night give us an extraordinary view of + human activity over time. The nighttime environment illuminates + Earth features like city infrastructure, lightning flashes, + fishing boats navigating open water, gas flares, aurora, and + natural hazards like lava flowing from an active volcano. Paired + with the moonlight, researchers can also spot snow and ice, as + well as other reflective surfaces that allow nighttime land and + ocean analysis. +

+

+ During the COVID-19 pandemic, researchers are using night light + observations to track variations in energy use, migration, and + transportation in response to social distancing and lockdown + measures. +

+

+ Scientists are examining whether the amount of algae + (chlorophyll-a) and sediment (turbidity) in water bodies was + affected by the shutdowns in response to the COVID-19 pandemic. + However, teasing out those signals from normal variations due to + weather and economic changes is challenging. +

+ +
+ Chlorophyll-a is an indicator of algae growth. During + coronavirus-related shutdowns, changes in our activity may + affect the amount of nutrients flowing in water bodies. This + image shows the changes in chlorophyll-a for the San Francisco + Bay Area on April 3, 2020. Redder colors indicate higher + levels of chlorophyll-a and worse water quality. Bluer colors + indicate lower levels of chlorophyll-a and improved water + quality. Image Credit: NASA. +
+ + + + + + + + + +

+ To determine the effect that COVID-19 lockdowns may have had on + global water quality, NASA is using satellite data and imagery + from the Moderate Resolution Imaging Spectroradiometer (MODIS) + instrument aboard the Aqua satellite and imagery from the + NASA-U.S. Geological Survey Landsat satellites to look for + changes in chlorophyll or turbidity. +

+

+ + New research + {' '} + funded by NASA’s Rapid Response and Novel research in the Earth + Sciences (RRNES) program element is also using these data to + explore changes in water quality resulting from the shutdowns. +

+ + + + + + + + +

+ Both chlorophyll-a concentrations and turbidity fluctuate + naturally based on a variety of factors, including natural + geography and the weather. For example, in coastal areas + strongly influenced by river runoff and human activities, such + as shipping and tourism, higher chlorophyll-a concentration can + result from the discharge of urban sewage and fertilizers from + agriculture over the watershed, which could counter any effects + we may have seen due to the shutdowns. +

+

+ Therefore, these data must be interpreted cautiously before + drawing conclusions on how COVID-19 shutdowns may have affected + water quality. +

+ + + + + + + + + Explore the missions + + + + + + + ); + } +} + +WQLongForm.propTypes = {}; + +export default { + ...metadata, + LongForm: WQLongForm +}; diff --git a/app/assets/scripts/components/spotlight/hub/index.js b/app/assets/scripts/components/spotlight/hub/index.js index 124a64eb..98c5b963 100644 --- a/app/assets/scripts/components/spotlight/hub/index.js +++ b/app/assets/scripts/components/spotlight/hub/index.js @@ -43,20 +43,40 @@ class SpotlightAreasHub extends React.Component { - Explore + Understanding Spotlight Areas - -

The global trajectory of the virus and different levels of response to its spread have led to regional variations in environmental and economic indicators.

-

This dashboard highlights 6 key Spotlight Areas around the world, allowing you to explore how specific locations’ response to COVID-19 have influenced local environmental signals.

+

+ The global trajectory of the coronavirus and different + levels of response to its spread have led to regional + changes to air and water quality, night lights, and other + economic indicators. +

+

+ This dashboard highlights seven spotlight areas around the + world, allowing you to explore how a specific location's + response to COVID-19 outbreaks has influenced local + environmental signals. +

+

+ The seven spotlight areas were chosen based on their large + populations and high level of economic activity, which + reveal significant changes in response to coronavirus + lockdown measures. For instance, larger urban areas where + more people live and work see more significant fluctuations + in NO2, while locations with active ports reveal changes in + water quality. This unique vantage point from space allows + researchers to track global and regional changes on our + planet, particularly during times of stress and crisis. +

+

+ Click below to visit a spotlight area. +

diff --git a/app/assets/scripts/config/production.js b/app/assets/scripts/config/production.js index a760c2e0..0e7956a1 100644 --- a/app/assets/scripts/config/production.js +++ b/app/assets/scripts/config/production.js @@ -1,7 +1,7 @@ export default { environment: 'production', appTitle: 'COVID-19 Dashboard', - appDescription: 'COVID-19 Dashboard', + appDescription: 'Although NASA can't see the novel #coronavirus from space, we can see how our response to it affects the environment. Explore the data using our new experimental dashboard.', gaTrackingCode: 'UA-170089104-1', mbToken: 'pk.eyJ1IjoiY292aWQtbmFzYSIsImEiOiJja2F6eHBobTUwMzVzMzFueGJuczF6ZzdhIn0.8va1fkyaWgM57_gZ2rBMMg', api: 'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1', diff --git a/package.json b/package.json index 43f765f9..a84bdd73 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "covid-dashboard", - "version": "0.7.0", + "version": "0.8.0", "description": "Frontend application for the Covid Dashboard", "repository": { "type": "git",