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.
+ we can observe how human actions in response to it 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
+ lights, carbon dioxide (CO2 ), nitrogen dioxide (NO2 ), and
ship activity in major ports.
diff --git a/app/assets/scripts/components/indicators/indicator-cars-and-construction.js b/app/assets/scripts/components/indicators/indicator-cars-and-construction.js
index 14de5909..c64c7b82 100644
--- a/app/assets/scripts/components/indicators/indicator-cars-and-construction.js
+++ b/app/assets/scripts/components/indicators/indicator-cars-and-construction.js
@@ -349,8 +349,8 @@ class CarsAndConstructionLongForm extends React.Component {
- ARIA at NASA-JPL
- Caltech EOS at Nanyang Technological University
+ ARIA at NASA-JPL / Caltech
+ EOS at Nanyang Technological University
diff --git a/app/assets/scripts/components/spotlight/hub/index.js b/app/assets/scripts/components/spotlight/hub/index.js
index aed2141e..7d83f278 100644
--- a/app/assets/scripts/components/spotlight/hub/index.js
+++ b/app/assets/scripts/components/spotlight/hub/index.js
@@ -53,9 +53,9 @@ class SpotlightAreasHub extends React.Component {
- The global trajectory of the coronavirus and different
+ The global trajectory of the novel coronavirus and different
levels of response to its spread have led to regional
- changes to air and water quality, night lights, and other
+ changes in air and water quality, night lights, and other
economic indicators.
@@ -70,7 +70,7 @@ class SpotlightAreasHub extends React.Component {
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
+ 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.
diff --git a/app/assets/scripts/components/spotlight/single/summaries.js b/app/assets/scripts/components/spotlight/single/summaries.js
index 4fe65969..75fc7a54 100644
--- a/app/assets/scripts/components/spotlight/single/summaries.js
+++ b/app/assets/scripts/components/spotlight/single/summaries.js
@@ -122,7 +122,7 @@ const summaries = {
),
- wble: (
+ gl: (
<>
As human activity levels shift in accordance with social distancing measures during the COVID-19 pandemic, researchers are using NASA’s ocean color satellites to observe potential changes in water quality within the Great Lakes region that might occur as a result of the shutdowns. Specifically, scientists are comparing how regions of the lakes (e.g., the Western Basin of Lake Erie and Saginaw Bay in Lake Huron) typically impacted by human activity fare against more remote, pristine regions (e.g., Thunder Bay in Lake Huron) that are relatively untouched by society. These comparisons will help determine whether any observed changes during the pandemic are due to shifts in human activity or natural variation.
diff --git a/app/assets/scripts/components/stories/hub/index.js b/app/assets/scripts/components/stories/hub/index.js
new file mode 100644
index 00000000..8d9dd4d9
--- /dev/null
+++ b/app/assets/scripts/components/stories/hub/index.js
@@ -0,0 +1,124 @@
+import React from 'react';
+import T from 'prop-types';
+import { connect } from 'react-redux';
+import styled from 'styled-components';
+
+import App from '../../common/app';
+import {
+ Inpage,
+ InpageHeader,
+ InpageHeaderInner,
+ InpageHeadline,
+ InpageTitle,
+ InpageBody
+} from '../../../styles/inpage';
+import Prose from '../../../styles/type/prose';
+import InpageHGroup from '../../../styles/inpage-hgroup';
+import {
+ PageConstrainer,
+ HubFold,
+ EntriesList,
+ EntryNavLink,
+ EntryNavLinkTitle,
+ EntryNavLinkMedia,
+ EntryNavLinkInfo
+} from '../../../styles/hub-pages';
+import storiesList from '../';
+import { format } from 'date-fns';
+import media from '../../../styles/utils/media-queries';
+
+import config from '../../../config';
+const { baseUrl } = config;
+
+const metadata = {
+ color: '#2276AC'
+};
+
+export const StoriesList = styled(EntriesList)`
+ grid-template-columns: 1fr;
+
+ ${media.mediumUp`
+ grid-template-columns: 1fr 1fr;
+ `}
+`;
+
+export const StoriesNavLink = styled(EntryNavLink)`
+ min-height: 12rem;
+
+ ${media.mediumUp`
+ min-height: 16rem;
+ `}
+`;
+
+const StoriesHub = (props) => {
+ const { storiesList } = props;
+
+ return (
+
+
+
+
+
+ Discoveries
+
+
+
+
+
+
+
+
+ Explore the guided narratives below to discover how NASA satellites and other Earth observing resources reveal how the COVID-19 pandemic is affecting Earth’s air, land, water, and climate.
+
+
+
+
+
+ {storiesList.map((item) => (
+
+
+ {item.name}
+
+ {item.chapters.length} chapters
+
+ Published on{' '}
+ {format(new Date(item.publishDate), 'MMM do, yyyy')}
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+ );
+};
+
+StoriesHub.propTypes = {
+ storiesList: T.array
+};
+
+function mapStateToProps (state, props) {
+ return {
+ storiesList: storiesList
+ };
+}
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(StoriesHub);
diff --git a/app/assets/scripts/components/stories/index.js b/app/assets/scripts/components/stories/index.js
new file mode 100644
index 00000000..74658053
--- /dev/null
+++ b/app/assets/scripts/components/stories/index.js
@@ -0,0 +1,30 @@
+/**
+ * How to add a new story page:
+ * 1) Create a file for the page inside scripts/components/discoveries/.
+ * The name of the file should be `story-[name].js
+ * The file will have to export an object with the following properties:
+ * - id: string
+ * - name: string
+ *
+ * TODO: Document
+ *
+ * 2) Import the page below.
+ *
+ * 3) Add the page to the stories array
+ *
+ */
+import air from './story-air';
+import climate from './story-climate';
+import lcluc from './story-lcluc';
+import water from './story-water';
+
+const stories = [
+ air,
+ climate,
+ lcluc,
+ water
+];
+
+export default stories;
+
+export const getStory = (id) => stories.find((d) => d.id === id);
diff --git a/app/assets/scripts/components/stories/single/about-data.js b/app/assets/scripts/components/stories/single/about-data.js
new file mode 100644
index 00000000..942c8bfe
--- /dev/null
+++ b/app/assets/scripts/components/stories/single/about-data.js
@@ -0,0 +1,122 @@
+import React from 'react';
+import styled from 'styled-components';
+import T from 'prop-types';
+
+import LayerLegend from '../../common/layer-legend';
+import Heading from '../../../styles/type/heading';
+import collecticon from '../../../styles/collecticons';
+
+import { glsp } from '../../../styles/utils/theme-values';
+import {
+ getMapLayers
+} from './utils';
+import { replaceSub2 } from '../../../utils/format';
+
+const MapLayerLegend = styled.div`
+ display: grid;
+ grid-gap: ${glsp(0.5)};
+`;
+
+export const LayerInfo = styled.div`
+ display: grid;
+ grid-template-columns: min-content 1fr;
+ grid-gap: ${glsp(0.5)};
+ font-size: 0.875rem;
+ padding-top: ${glsp(0.5)};
+
+ &::before {
+ ${collecticon('circle-information')}
+ grid-column: 1;
+ grid-row: 1;
+ }
+
+ p {
+ grid-row: 1;
+ }
+`;
+
+const AboutData = ({ visual, id }) => {
+ // If there are no visuals there's nothing to do.
+ if (!visual) return null;
+
+ let layersWithLegend = [];
+
+ if (visual.type === 'map-layer') {
+ const { layers = [], spotlight } = visual.data;
+
+ const mapLayers = getMapLayers(spotlight, layers);
+ // Map the layer ids to layer definition objects.
+ layersWithLegend = layers
+ .map((l, idx) => {
+ if (typeof l === 'string') {
+ const layerDef = mapLayers.find((layer) => layer.id === l);
+ if (!layerDef) {
+ throw new Error(
+ `Layer definition not found for story layer with id [${l}]`
+ );
+ }
+ return layerDef;
+ }
+ return l;
+ })
+ .filter((l) => !!l.legend);
+ }
+
+ if (visual.type === 'multi-map' && visual.data.legend) {
+ const { legend, name, info } = visual.data;
+ layersWithLegend = [{
+ id: id,
+ legend,
+ info,
+ name: name || 'Multi map'
+ }];
+ }
+
+ if (!layersWithLegend.length && !visual.about) return null;
+
+ return (
+
+
+ About the data
+
+ {layersWithLegend.map((l) => {
+ const { type } = l.legend;
+ const legend = {
+ ...l.legend,
+ // We don't have adjustable gradients here, so convert to normal one.
+ type: type === 'gradient-adjustable' ? 'gradient' : type
+ };
+ return (
+
+
+ {replaceSub2(l.name)}
+
+
+
+ {l.info}
+
+
+ );
+};
+
+AboutData.propTypes = {
+ id: T.string,
+ visual: T.shape({
+ type: T.string,
+ about: T.node,
+ data: T.shape({
+ spotlight: T.string,
+ layers: T.array,
+ legend: T.object,
+ item: T.object,
+ name: T.string,
+ info: T.node
+ })
+ })
+};
+
+export default AboutData;
diff --git a/app/assets/scripts/components/stories/single/index.js b/app/assets/scripts/components/stories/single/index.js
new file mode 100644
index 00000000..ddc677ba
--- /dev/null
+++ b/app/assets/scripts/components/stories/single/index.js
@@ -0,0 +1,657 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import T from 'prop-types';
+import { connect } from 'react-redux';
+import get from 'lodash.get';
+import find from 'lodash.find';
+import ReactTooltip from 'react-tooltip';
+
+import App from '../../common/app';
+import UhOh from '../../uhoh';
+import {
+ Inpage,
+ InpageHeader,
+ InpageHeadline,
+ InpageBody
+} from '../../../styles/inpage';
+import SecPanel from './sec-panel';
+import MbMap from '../../common/mb-map-explore/mb-map';
+import Button from '../../../styles/button/button';
+import Dropdown, {
+ DropTitle,
+ DropMenu,
+ DropMenuItem
+} from '../../common/dropdown';
+import ShadowScrollbar from '../../common/shadow-scrollbar';
+import MapMessage from '../../common/map-message';
+import MultiMap from './multi-map';
+import AboutData from './about-data';
+
+import { themeVal } from '../../../styles/utils/general';
+import media from '../../../styles/utils/media-queries';
+import { glsp } from '../../../styles/utils/theme-values';
+import { truncated } from '../../../styles/helpers';
+import history from '../../../utils/history';
+import { getStory } from '../';
+import {
+ getInitialMapExploreState,
+ getLayerState,
+ getLayersWithState,
+ resizeMap,
+ setLayerState,
+ toggleLayerCommon,
+ toggleLayerCompare
+} from '../../../utils/map-explore-utils';
+import { utcDate, filterComponentProps } from '../../../utils/utils';
+import {
+ findById,
+ getPreviousItem,
+ getNextItem,
+ createItemUrl,
+ getCurrentItemNum,
+ getCurrentItemName,
+ getMapLayers,
+ getMapMessage
+} from './utils';
+import { replaceSub2 } from '../../../utils/format';
+
+const InpageHeaderInnerAlt = styled.div`
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: flex-end;
+ padding: ${glsp(0.25, 1)};
+ max-width: 100vw;
+
+ ${media.mediumUp`
+ padding: ${glsp()};
+ `}
+
+ ${media.largeUp`
+ padding: ${glsp()};
+ `}
+`;
+
+const InpageHeadlineAlt = styled(InpageHeadline)`
+ flex: 1;
+`;
+
+const InpageTitleAlt = styled.h1`
+ ${truncated()}
+ font-size: 1rem;
+ line-height: 1.25rem;
+ font-weight: ${themeVal('type.base.light')};
+ margin: ${glsp(0, 0, -0.25, 0)};
+`;
+
+const InpageSecTitle = styled.h2`
+ min-width: 0px;
+
+ > ${Button} {
+ font-size: 1rem;
+ line-height: 1.5rem;
+ margin-left: ${glsp(-0.75)};
+ display: inline-flex;
+ max-width: 100%;
+
+ ${media.mediumUp`
+ font-size: 1.25rem;
+ `}
+
+ span {
+ ${truncated()}
+ }
+ }
+`;
+
+const ChapterDropdown = styled(Dropdown)`
+ max-width: 20rem;
+ overflow: hidden;
+ padding: 0;
+
+ > div {
+ height: 100%;
+ }
+`;
+
+const DropdownScrollInner = styled.div`
+ padding: ${glsp()};
+
+ li li a {
+ padding-left: 2rem;
+ }
+
+ ${DropMenuItem} {
+ display: block;
+ }
+`;
+
+const ExploreCanvas = styled.div`
+ display: grid;
+ height: 100%;
+ grid-template-columns: 1fr min-content;
+ overflow: hidden;
+
+ ${media.mediumDown`
+ ${({ panelSec }) => panelSec && 'grid-template-columns: 0 min-content;'}
+ `}
+
+ > * {
+ grid-row: 1;
+ }
+`;
+
+const InpageToolbarAlt = styled.div`
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: flex-end;
+ margin-left: auto;
+ padding-left: ${glsp()};
+
+ > *:last-child {
+ margin-right: ${glsp(-0.5)};
+ }
+`;
+
+const ChapterCount = styled.strong`
+ display: none;
+ line-height: 2rem;
+ margin-right: ${glsp(0.5)};
+
+ ${media.mediumUp`
+ display: block;
+ `}
+`;
+
+const ExploreCarto = styled.section`
+ position: relative;
+ height: 100%;
+ background: ${themeVal('color.baseAlphaA')};
+ display: grid;
+ grid-template-rows: 1fr auto;
+ min-width: 0;
+ overflow: hidden;
+`;
+
+const StoryContent = styled.div`
+ display: grid;
+ grid-gap: ${glsp()};
+`;
+
+const CleanLink = filterComponentProps(Link, ['active']);
+
+class StoriesSingle extends React.Component {
+ constructor (props) {
+ super(props);
+ // Functions from helper file.
+ this.resizeMap = resizeMap.bind(this);
+ this.getLayersWithState = getLayersWithState.bind(this);
+ this.setLayerState = setLayerState.bind(this);
+ this.getLayerState = getLayerState.bind(this);
+
+ this.onMapAction = this.onMapAction.bind(this);
+ this.onKeyPress = this.onKeyPress.bind(this);
+
+ // Ref to the map component to be able to trigger a resize when the panels
+ // are shown/hidden.
+ this.mbMapRef = React.createRef();
+ // Ref for the multimaps.
+ this.multimapRef = React.createRef();
+
+ // Store prev and next urls. This is needed for the keyboard navigation.
+ this.prevItemUrl = null;
+ this.nextItemUrl = null;
+
+ this.state = {
+ ...getInitialMapExploreState(),
+ mapLayers: [],
+ panelSec: false
+ };
+ }
+
+ componentDidMount () {
+ window.addEventListener('keyup', this.onKeyPress);
+ }
+
+ componentDidUpdate (prevProps) {
+ const {
+ match: {
+ params: { storyId, chapterId, sectionId }
+ }
+ } = this.props;
+ const {
+ match: {
+ params: {
+ storyId: storyIdPrev,
+ chapterId: chapterIdPrev,
+ sectionId: sectionIdPrev
+ }
+ }
+ } = prevProps;
+
+ // Did the story, chapter or section change?
+ // If so there are new visuals to display.
+ if (
+ storyId !== storyIdPrev ||
+ chapterId !== chapterIdPrev ||
+ sectionId !== sectionIdPrev
+ ) {
+ // Update tooltips when the data changes.
+ ReactTooltip.rebuild();
+
+ const {
+ chapter: [, chapter],
+ section: [, section]
+ } = this.getChapterAndSection();
+
+ const currItem = section || chapter;
+ const currVisType = get(currItem, 'visual.type');
+
+ /* eslint-disable-next-line prefer-const */
+ let newState = {
+ // Reset map data on story change
+ activeLayers: [],
+ /* eslint-disable-next-line react/no-unused-state */
+ layersState: {}
+ };
+
+ // If the visual type changes to a non map value we have to reset the map
+ // loaded state.
+ if (currVisType !== 'map-layer') {
+ newState.mapLoaded = false;
+ }
+
+ this.setState(newState, () => {
+ this.updateItemVisuals(currItem);
+ });
+ }
+ }
+
+ componentWillUnmount () {
+ window.removeEventListener('keyup', this.onKeyPress);
+ }
+
+ // The multimap is a small multiple map component for the stories. It will
+ // initialize all the needed map and it has a function to resize them all
+ // which is used when the panel is hidden/show.
+ resizeMultimap () {
+ const component = this.multimapRef.current;
+ if (component) {
+ // Delay execution to give the panel animation time to finish.
+ setTimeout(() => {
+ component.resizeMaps();
+ }, 200);
+ }
+ }
+
+ getChapterAndSection () {
+ const {
+ story,
+ match: {
+ params: { chapterId, sectionId }
+ }
+ } = this.props;
+ const [chapterIdx, chapter] = findById(story.chapters, chapterId);
+ const [sectionIdx, section] = findById(chapter.sections, sectionId);
+
+ return {
+ chapter: [chapterIdx, chapter],
+ section: [sectionIdx, section]
+ };
+ }
+
+ // Update the current item's visuals.
+ // What the visuals are, are defined in the story file.
+ updateItemVisuals (item) {
+ const { visual } = item;
+ // If there are no visuals, or the map hasn't loaded, there's nothing to do.
+ if (!visual || !this.state.mapLoaded) return;
+
+ if (visual.type === 'map-layer') {
+ const { bbox, layers = [], date, spotlight, compare } = visual.data;
+ if (bbox) {
+ this.mbMapRef.current.mbMap.fitBounds(bbox);
+ } else {
+ // Reset to full world.
+ this.mbMapRef.current.mbMap.jumpTo({ center: [0, 0], zoom: 1.5 });
+ }
+ const mapLayers = getMapLayers(spotlight, layers);
+
+ let layerComparing = null;
+ // Map the layer ids to layer definition objects.
+ const layersToEnable = layers.map((l, idx) => {
+ let returningLayer = l;
+ if (typeof l === 'string') {
+ const layerDef = mapLayers.find((layer) => layer.id === l);
+ if (!layerDef) {
+ throw new Error(
+ `Layer definition not found for story layer with id [${l}]`
+ );
+ }
+ returningLayer = layerDef;
+ }
+
+ // Handle the compare option which works as following:
+ // Note: Compare can only be enabled in one layer, so henceforth, layer
+ // refers to the first entry in the `layers` array.
+ // If the compare is `true`, we check if the layer has a compare property
+ // defined. This will be the case for non custom layers (i.e. The ones
+ // that come with the app). If the property is defined, we use that
+ // definition and comparison is enabled. Otherwise an error is thrown.
+ // If the compare is an object, this will be used to extend the layer's
+ // compare definition (if it exists).
+ if (idx === 0 && compare) {
+ if (typeof compare === 'object') {
+ const returningLayerCompare =
+ typeof returningLayer.compare === 'object'
+ ? returningLayer.compare
+ : {};
+
+ returningLayer.compare = { ...returningLayerCompare, ...compare };
+ // If compare is true ensure that there is a compare object.
+ } else if (
+ compare === true &&
+ typeof returningLayer.compare !== 'object'
+ ) {
+ throw new Error(`Compare is set as 'true' for story layer with is [${returningLayer.id}], but the layer does not have a compare property.
+If this is a system layer, check that a compare property is defined. In alternative provide a compare property with the needed properties.`);
+ }
+
+ // Store the layer that will have comparison enabled to use layer with
+ // the map utils functions.
+ layerComparing = returningLayer;
+ }
+
+ return returningLayer;
+ });
+
+ // The common map functions are being reused so we can take advantage of
+ // their layer enabling features.
+ this.setState(
+ (state) => ({
+ // Reset the enabled layers, so the toggling will always enable them.
+ activeLayers: [],
+ // Reset the layer state. If we reset the active layers it is safe to
+ // assume that the layer state will be empty.
+ /* eslint-disable-next-line react/no-unused-state */
+ layersState: {},
+ mapLayers: mapLayers,
+ timelineDate: date ? utcDate(date) : null
+ }),
+ () => {
+ for (const l of layersToEnable) {
+ toggleLayerCommon.call(this, l);
+ }
+ if (layerComparing) {
+ toggleLayerCompare.call(this, layerComparing);
+ }
+ }
+ );
+ }
+ }
+
+ onKeyPress (e) {
+ // Right arrow
+ if (e.keyCode === 39 && this.nextItemUrl) {
+ history.push(this.nextItemUrl);
+ }
+
+ // Left arrow
+ if (e.keyCode === 37 && this.prevItemUrl) {
+ history.push(this.prevItemUrl);
+ }
+ }
+
+ async onMapAction (action, payload) {
+ switch (action) {
+ case 'map.loaded': {
+ this.setState({ mapLoaded: true }, () => {
+ const {
+ chapter: [, chapter],
+ section: [, section]
+ } = this.getChapterAndSection();
+ this.updateItemVisuals(section || chapter);
+ });
+ break;
+ }
+ }
+ }
+
+ renderChapterDropdown (itemName) {
+ const {
+ story,
+ match: {
+ params: { chapterId, sectionId }
+ }
+ } = this.props;
+
+ return (
+
+ {itemName}
+
+ }
+ >
+
+ {title}
+
+ }
+ bodyContent={
+
+ {content}
+
+ }
+ />
+ );
+}
+
+SecPanel.propTypes = {
+ title: T.node,
+ content: T.node,
+ onPanelChange: T.func
+};
+
+export default SecPanel;
diff --git a/app/assets/scripts/components/stories/single/utils.js b/app/assets/scripts/components/stories/single/utils.js
new file mode 100644
index 00000000..14919b71
--- /dev/null
+++ b/app/assets/scripts/components/stories/single/utils.js
@@ -0,0 +1,129 @@
+import React from 'react';
+import get from 'lodash.get';
+import find from 'lodash.find';
+
+import { getSpotlightLayers } from '../../common/layers';
+import { replaceSub2 } from '../../../utils/format';
+
+export const findById = (haystack = [], id) => {
+ const idx = haystack.findIndex((c) => c.id === id);
+ return [idx === -1 ? null : idx, haystack[idx]];
+};
+
+export const getPreviousItem = (chapters, currChapterIdx, currSectionIdx = 0) => {
+ // Try to get the previous section.
+ const chapter = chapters[currChapterIdx];
+ const prevSec = get(chapter, ['sections', currSectionIdx - 1]);
+ if (prevSec) {
+ return {
+ chapter,
+ section: prevSec
+ };
+ }
+
+ // There's no previous section. Get the previous chapter.
+ const prevChapter = chapters[currChapterIdx - 1];
+ // There's no previous chapter.
+ if (!prevChapter) return null;
+
+ // If the chapter has sections return the last
+ if (prevChapter.sections) {
+ const lastSection = prevChapter.sections[prevChapter.sections.length - 1];
+ return {
+ chapter: prevChapter,
+ section: lastSection
+ };
+ } else {
+ return {
+ chapter: prevChapter
+ };
+ }
+};
+
+export const getNextItem = (chapters, currChapterIdx, currSectionIdx = 0) => {
+ // Try to get the next section.
+ const chapter = chapters[currChapterIdx];
+ const nextSec = get(chapter, ['sections', currSectionIdx + 1]);
+ if (nextSec) {
+ return {
+ chapter,
+ section: nextSec
+ };
+ }
+
+ // There's no next section. Get the next chapter.
+ const nextChapter = chapters[currChapterIdx + 1];
+ // There's no next chapter.
+ if (!nextChapter) return null;
+
+ // If the chapter has sections return the first
+ if (nextChapter.sections) {
+ return {
+ chapter: nextChapter,
+ section: nextChapter.sections[0]
+ };
+ } else {
+ return {
+ chapter: nextChapter
+ };
+ }
+};
+
+export const createItemUrl = (story, item) => {
+ if (!item) return '/discoveries';
+
+ const { chapter, section } = item;
+ const base = `/discoveries/${story.id}/${chapter.id}`;
+ return section ? `${base}/${section.id}` : base;
+};
+
+export const getCurrentItemNum = (chapterIdx, sectionIdx = null) => {
+ const sec = sectionIdx !== null ? `.${sectionIdx + 1}` : '';
+ return `${chapterIdx + 1}${sec}`;
+};
+
+export const getCurrentItemName = (chapter, section = null) => {
+ return section ? (
+ <>
+ {replaceSub2(chapter.name)} ({replaceSub2(section.name)})
+
+ ) : (
+ <>{replaceSub2(chapter.name)}
+ );
+};
+
+export const getMapLayers = (spotlightId, layers) => {
+ return [
+ ...getSpotlightLayers(spotlightId || 'global'),
+ // Include any layer that was defined on the story. These will be custom
+ // layers specific for this chapter. Mostly external TMS
+ ...layers.reduce(
+ (acc, l) => (typeof l === 'string' ? acc : [...acc, l]),
+ []
+ )
+ ];
+};
+
+export const getMapMessage = (layers, item, date) => {
+ const renderMsg = (mapLabel) =>
+ mapLabel
+ ? typeof mapLabel === 'function'
+ ? mapLabel(date)
+ : mapLabel
+ : '';
+
+ // The map label can come directly from a layer's visual which is the case
+ // when there's only one map. Or it can also come from the compare map, when a
+ // map is being compared. The item0s mapLabel will take precedence.
+ const itemMapLabel = get(item, 'visual.data.mapLabel');
+ if (itemMapLabel) {
+ return [true, renderMsg(itemMapLabel)];
+ }
+
+ // Check if there's any layer that's comparing.
+ const comparingLayer = find(layers, 'comparing');
+ const isComparing = !!comparingLayer;
+ const compareMapLabel = get(comparingLayer, 'compare.mapLabel');
+
+ return [isComparing, renderMsg(compareMapLabel)];
+};
diff --git a/app/assets/scripts/components/stories/story-air.js b/app/assets/scripts/components/stories/story-air.js
new file mode 100644
index 00000000..b9794437
--- /dev/null
+++ b/app/assets/scripts/components/stories/story-air.js
@@ -0,0 +1,439 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import config from '../../config';
+import { LayerInfo } from './single/about-data';
+const { api } = config;
+
+export default {
+ id: 'air-quality',
+ name: 'Air Quality',
+ publishDate: '2020/12/01',
+ thumbnail: 'thumbnail-air.jpg',
+ chapters: [
+ {
+ id: 'aq-and-covid',
+ name: 'Air Quality and COVID-19',
+ contentComp: (
+ <>
+
+ When governments began implementing shutdowns at the start of the COVID-19 pandemic, scientists wondered how the atmosphere would respond to the sudden change in human behavior. With people largely confined to their homes to slow the spread of the novel coronavirus, scientists expected there were likely to be fewer cars, planes, and ships burning and emitting fossil fuels. As the pandemic has progressed, these scenarios have largely played out: during the strictest lockdown periods, locations around the world experienced substantial reductions in transportation-related fossil fuel emissions. The impacts on specific air pollutants have been varied and dependant on their lifespan in the atmosphere. Those pollutants with short lifespans, such as nitrogen dioxide (NO2), decreased dramatically and quickly along with emissions. Today, air quality levels are beginning to approach pre-pandemic levels, and scientists are just beginning to dive into the new measurements collected throughout this unprecedented time.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ mapLabel: () => 'March 2020',
+ layers: ['no2-diff'],
+ date: '2020-03-01T00:00:00Z'
+ }
+ }
+ },
+ {
+ id: 'what-makes-aq-good-or-bad',
+ name: 'What Makes Air Quality Good or Bad?',
+ contentComp: (
+ <>
+
+ Cities are easy to spot from space. Choose any large, urban area around the world, and you’re likely to see similar things: dense population centers, complex webs of highways and, more often than not, smog. Smog is the hazy curtain of air that often hangs over cities. It occurs when nitrogen dioxide produced from fossil fuel emissions from gasoline in cars or coal in powerplants chemically reacts with sunlight and other pollutants like carbon monoxide (CO). Thick smog is harmful to breathe and can significantly reduce visibility. During lockdowns, satellites observed sharp reductions in nitrogen dioxide emissions in cities around the world, and smog began to vanish. Skies were bluer, air was cleaner, and, in some places, views previously obscured by air pollution were suddenly revealed. In Los Angeles, NASA scientists detected that nitrogen dioxide levels fell by more than 30% during the height of COVID-related shutdowns. Other large cities around the world experienced similar reductions.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ about: (
+
+ Landsat-8, visualized using the RGB band combination.
+
+ ),
+ data: {
+ bbox: [-118.529, 33.835, -118.034, 34.168],
+ mapLabel: () => 'February 26, 2020',
+ layers: [
+ {
+ id: 'ls8-sf',
+ type: 'raster',
+ source: {
+ type: 'raster',
+ tiles: [
+ 'https://c50qa6bhpe.execute-api.us-west-2.amazonaws.com/scenes/landsat/tiles/{z}/{x}/{y}.png?sceneid=LC08_L1TP_041036_20200226_20200313_01_T1&bands=B4,B3,B2&color_formula=gamma RGB 3.5, saturation 1.7, sigmoidal RGB 15 0.35'
+ ]
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ id: 'cities-experiencing-clearer-air',
+ name: 'Cities Experiencing Clearer Air During Lockdowns',
+ sections: [
+ {
+ id: 'beijing',
+ name: 'Beijing',
+ contentComp: (
+ <>
+
+ When Chinese authorities suspended travel and closed businesses in late January 2020 in response to the novel coronavirus, Beijing’s local nitrogen dioxide levels fell dramatically. In February 2020, concentrations fell by nearly 30% compared to the previous five-year average.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ layers: ['no2'],
+ date: '2020-02-01T00:00:00Z',
+ bbox: [110, 28, 122, 42],
+ compare: {
+ mapLabel: () => '5 year average compared to February 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/OMNO2d_HRMBaseline/OMI_trno2_0.10x0.10_Baseline_02_Col3_V4.nc.tif&esampling_method=bilinear&bidx=1&rescale=0%2C1.5e16&color_map=custom_no2`
+ ]
+ }
+ }
+ }
+ }
+ },
+ {
+ id: 'lima',
+ name: 'Lima',
+ contentComp: (
+ <>
+
+ Cities across South America experienced similar declines in nitrogen dioxide. Lima, Peru had some of the most substantial reductions, with nitrogen dioxide levels falling approximately 70% below normal levels.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ layers: ['no2'],
+ date: '2020-05-01T00:00:00Z',
+ bbox: [-77.97, -12.75, -76.08, -11.13],
+ compare: {
+ mapLabel: () => '5 year average compared to May 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/OMNO2d_HRMBaseline/OMI_trno2_0.10x0.10_Baseline_05_Col3_V4.nc.tif&esampling_method=bilinear&bidx=1&rescale=0%2C1.5e16&color_map=custom_no2`
+ ]
+ }
+ }
+ }
+ }
+ }
+ ]
+ },
+ {
+ id: 'lockdowns-no2',
+ name: '“Like Flipping a Switch”: Lockdowns and NO₂',
+ contentComp: (
+ <>
+
+ Nitrogen dioxide is only one component of air quality: sulfur dioxide (SO2 ), ozone (O3 ), formaldehyde (CH2 O), and carbon monoxide, along with a host of other atmospheric constituents, also influence the quality of the air we breathe. The difference in nitrogen dioxide is that it has a relatively short lifetime in the atmosphere; once it’s emitted, it only lasts a few hours before it disappears. Therefore, once communities entered shutdowns, and people’s mobility was severely restricted, the effect on nitrogen dioxide concentrations was the equivalent of flipping a switch. That is not, however, the case with all air pollutants.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ layers: ['no2'],
+ date: '2020-04-01T00:00:00Z',
+ bbox: [-37.17, 34.16, 53.78, 68.84],
+ compare: {
+ mapLabel: () => '5 year average compared to April 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/OMNO2d_HRMBaseline/OMI_trno2_0.10x0.10_Baseline_04_Col3_V4.nc.tif&esampling_method=bilinear&bidx=1&rescale=0%2C1.5e16&color_map=custom_no2`
+ ]
+ }
+ }
+ }
+ }
+ },
+ {
+ id: 'seasonal-changes-no2',
+ name: 'Seasonal Changes in NO₂',
+ contentComp: (
+ <>
+
+ Even with the strong correlation between nitrogen dioxide and the combustion of fossil fuels, atmospheric concentrations of nitrogen dioxide naturally fluctuate throughout the year, and weather patterns also influence its concentrations. For example, nitrogen dioxide typically falls dramatically during spring and summer months, and rain and wind increase its dispersion, lowering local concentrations. During the COVID-19 pandemic, NASA scientists have been able to attribute the observed changes in nitrogen dioxide to changes in our behavior, and they have been careful to account for any impacts on air pollution that are the result of natural weather variations.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ layers: ['no2'],
+ date: '2019-06-01T00:00:00Z',
+ bbox: [-37.17, 34.16, 53.78, 68.84],
+ compare: {
+ mapLabel: () => 'January 2019 compared to June 2019',
+ date: '2019-01-01T00:00:00Z',
+ layers: ['no2']
+ }
+ }
+ }
+ },
+ {
+ id: 'seeing-air-pollution-from-space',
+ name: 'Seeing Air Pollution from Space',
+ contentComp: (
+ <>
+
+ NASA has used the{' '}
+
+ Ozone Monitoring Instrument (OMI)
+ {' '}
+ aboard the Aura satellite to observe global nitrogen dioxide levels since 2004. A joint endeavor between NASA, the Royal Netherlands Meteorological Institute (KNMI) and the Finnish Meteorological Institute (FMI), OMI’s longer data record provides important context with which to compare any changes observed during the pandemic. NASA scientists are also leveraging other space-based instruments from international partners to study changes in nitrogen dioxide during the pandemic. These include the{' '}
+
+ TROPOspheric Monitoring Instrument (TROPOMI)
+ {' '}
+ aboard the European Commission’s Copernicus Sentinel-5P satellite. Launched in 2016, TROPOMI provides higher resolution observations than OMI.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ mapLabel: () => 'Most recent NO₂',
+ layers: ['no2']
+ }
+ }
+ },
+ {
+ id: 'reinforcing-measurements-nighttime-lights',
+ name: 'Reinforcing Measurements: Nighttime Lights',
+ contentComp: (
+ <>
+
+ Changes in nighttime lights during the pandemic can also be tied to changes in nitrogen dioxide levels if the data are properly processed and interpreted. This is because nitrogen dioxide is primarily emitted from burning fossil fuels, and highways light up on nighttime satellite imagery when vehicles are present. Here we see the illuminated web of highways connecting the Los Angeles metropolitan region. Researchers are using night light observations to track variations in energy use, migration, and transportation in response to social distancing and shutdown measures during the pandemic. These data, collected by the{' '}
+
+ Visible Infrared Imaging Radiometer Suite (VIIRS)
+ {' '}
+ instrument aboard the joint NASA-National Oceanic and Atmospheric Administration (NOAA) Suomi-National Polar-orbiting Partnership (NPP) satellite, correlate with changes seen in car traffic on the ground – and, therefore, nitrogen dioxide reductions. While this research is still ongoing, the 31% reduction in nitrogen dioxide levels in Los Angeles during the height of pandemic-related lockdowns compared to recent years seems to correspond with a 15% reduction in nighttime lights over highways during the same period.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ layers: ['nightlights-viirs'],
+ date: '2020-03-20T00:00:00Z',
+ bbox: [-118.6759, 33.4267, -117.0733, 34.3439],
+ spotlight: 'la',
+ compare: {
+ mapLabel: () => 'February 1, 2020 compared to March 20, 2020',
+ compareDate: () => new Date('2020-02-01T00:00:00Z')
+ }
+ }
+ }
+ },
+ {
+ id: 'measuring-pollution-on-the-ground',
+ name: 'Measuring Air Pollution on the Ground at Airports',
+ contentComp: (
+ <>
+
+ New research during the pandemic is also looking at how COVID-related travel bans are impacting air quality around airports. Current conditions create a unique opportunity to study airport-related pollutants, especially nitrogen dioxide and formaldehyde. While travel bans and strict regulations around air travel have been in place, air traffic has yet to return to previous levels, and many planes remain grounded.
+
+
+ Scientists have installed two sensors at the Baltimore-Washington International Airport and two sensors at the Hartsfield-Jackson Atlanta International Airport to better characterize how airplanes contribute to air pollution. They are comparing the on-the-ground sensor information from NASA's{' '}
+
+ Pandora Project
+ {' '}
+ with satellite information from TROPOMI. So far, they have found that nitrogen dioxide hotspots in Atlanta shifted from the airport, shown here, to the city center from April-June 2020. By September, however, satellites revealed the airport had reemerged as a dominant nitrogen dioxide emission source.
+
+
+ ),
+ visual: {
+ type: 'multi-map',
+ data: {
+ bbox: [-84.5, 33.58, -84.28, 33.93],
+ name: 'NO₂ levels',
+ legend: {
+ type: 'gradient',
+ min: '1',
+ max: '3.5',
+ stops: [
+ '#99c5e0',
+ '#f9eaa9',
+ '#f7765d',
+ '#c13b72',
+ '#461070',
+ '#050308'
+ ]
+ },
+ info: 'Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.',
+ mapsPerRow: 5,
+ maps: [
+ {
+ id: 'no2-mar-2019',
+ label: 'Mar 22 - Apr 2019',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/atlanta-no2/Atlanta_2019_03.tif&resampling_method=bilinear&bidx=1&rescale=1%2C3.5&color_map=custom_no2`
+ ]
+ }
+ },
+ {
+ id: 'no2-may-2019',
+ label: 'May 2019',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/atlanta-no2/Atlanta_2019_05.tif&resampling_method=bilinear&bidx=1&rescale=1%2C3.5&color_map=custom_no2`
+ ]
+ }
+ },
+ {
+ id: 'no2-jun-2019',
+ label: 'Jun 2019',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/atlanta-no2/Atlanta_2019_06.tif&resampling_method=bilinear&bidx=1&rescale=1%2C3.5&color_map=custom_no2`
+ ]
+ }
+ },
+ {
+ id: 'no2-jul-2019',
+ label: 'Jul 2019',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/atlanta-no2/Atlanta_2019_07.tif&resampling_method=bilinear&bidx=1&rescale=1%2C3.5&color_map=custom_no2`
+ ]
+ }
+ },
+ {
+ id: 'no2-aug-2019',
+ label: 'Aug - Sep 2019',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/atlanta-no2/Atlanta_2019_08.tif&resampling_method=bilinear&bidx=1&rescale=1%2C3.5&color_map=custom_no2`
+ ]
+ }
+ },
+ {
+ id: 'no2-mar-2020',
+ label: 'Mar 22 - Apr 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/atlanta-no2/Atlanta_2020_03.tif&resampling_method=bilinear&bidx=1&rescale=1%2C3.5&color_map=custom_no2`
+ ]
+ }
+ },
+ {
+ id: 'no2-may-2020',
+ label: 'May 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/atlanta-no2/Atlanta_2020_05.tif&resampling_method=bilinear&bidx=1&rescale=1%2C3.5&color_map=custom_no2`
+ ]
+ }
+ },
+ {
+ id: 'no2-jun-2020',
+ label: 'Jun 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/atlanta-no2/Atlanta_2020_06.tif&resampling_method=bilinear&bidx=1&rescale=1%2C3.5&color_map=custom_no2`
+ ]
+ }
+ },
+ {
+ id: 'no2-jul-2020',
+ label: 'Jul 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/atlanta-no2/Atlanta_2020_07.tif&resampling_method=bilinear&bidx=1&rescale=1%2C3.5&color_map=custom_no2`
+ ]
+ }
+ },
+ {
+ id: 'no2-aug-2020',
+ label: 'Aug - Sep 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/atlanta-no2/Atlanta_2020_08.tif&resampling_method=bilinear&bidx=1&rescale=1%2C3.5&color_map=custom_no2`
+ ]
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ id: 'seeing-rebounds',
+ name: 'Seeing Rebounds in NO₂',
+ contentComp: (
+ <>
+
+ After the initial shock of COVID-related shutdowns in the spring, communities worldwide began to reopen and gradually increase mobility. Cars returned to the road, and travel restrictions slowly eased. These resumptions corresponded with relative increases in nitrogen dioxide levels and other air pollutants, as air quality levels began to return to pre-pandemic levels. This demonstrates how quickly atmospheric nitrogen dioxide responds to reductions in emissions. They will persist as long as emissions persist and decline rapidly if emissions are reduced. NASA scientists will continue to monitor nitrogen dioxide levels and long-term trends around the world. NASA is expected to launch its{' '}
+
+ Tropospheric Emissions: Monitoring of Pollution (TEMPO)
+ {' '}
+ instrument in 2022, which will provide hourly, high-resolution measurements of nitrogen dioxide, ozone, and other air pollutants across North America, improving future air quality forecasts.
+
+
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ layers: ['no2'],
+ bbox: [110, 28, 122, 42],
+ compare: {
+ mapLabel: () => 'February 2020 compared current NO₂ levels',
+ layers: ['no2'],
+ date: '2020-02-01T00:00:00Z'
+ }
+ }
+ }
+ }
+ ]
+};
diff --git a/app/assets/scripts/components/stories/story-climate.js b/app/assets/scripts/components/stories/story-climate.js
new file mode 100644
index 00000000..a2da0954
--- /dev/null
+++ b/app/assets/scripts/components/stories/story-climate.js
@@ -0,0 +1,411 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import config from '../../config';
+import { LayerInfo } from './single/about-data';
+const { api } = config;
+
+export default {
+ id: 'climate',
+ name: 'Climate Change',
+ publishDate: '2020/12/01',
+ thumbnail: 'thumbnail-climate.jpg',
+ chapters: [
+ {
+ id: 'climate-change-and-covid',
+ name: 'Climate Change and COVID-19',
+ contentComp: (
+ <>
+
+ Throughout the COVID-19 pandemic, communities have seen significant reductions in automobile traffic, energy consumption, and other related activities. The sudden change in our everyday lives has led to substantial, yet temporary, reductions in fossil fuel use across the globe. The combustion of fossil fuels produces greenhouse gases, such as carbon dioxide (CO2 ) and methane (CH4 ), which play a major role in regulating Earth’s climate. These sharp, global decreases are giving scientists an unprecedented opportunity to study how changes in human activities impact the global carbon cycle and to better understand the relative roles natural carbon cycle variations and humans play in driving climate change. Given the observed associated declines in other air pollutants associated with fossil fuel combustion, such as {' '}
+ 2 ), scientists wondered whether corresponding decreases in carbon dioxide could be observed from satellites and what impact, if any, such decreases could have on future climate projections.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ layers: ['no2-diff'],
+ date: '2020-03-01T00:00:00Z',
+ compare: {
+ mapLabel: () => 'NO₂ Baseline (5 years) compared to NO₂ Difference for March 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/OMNO2d_HRMBaseline/OMI_trno2_0.10x0.10_Baseline_03_Col3_V4.nc.tif&esampling_method=bilinear&bidx=1&rescale=0%2C1.5e16&color_map=custom_no2`
+ ]
+ }
+ }
+ }
+ }
+ },
+ {
+ id: 'co2-emissions-during-lockdowns',
+ name: 'CO₂ Emissions During Lockdowns',
+ contentComp: (
+ <>
+
+ At the peak of initial pandemic-related shutdowns, fossil fuel use in urban areas declined significantly compared to previous years. This was largely due to local directives that required most people to stay at home. As a result of these measures, there were fewer cars on the road, planes in the sky, and ships at sea, leading to far less fossil fuel emissions. Estimates of global fossil fuel consumption from the Global Carbon Project confirmed these reductions. However, while NASA scientists could easily detect decreases in other fossil fuel combustion byproducts from space, such as nitrogen dioxide, corresponding reductions in carbon dioxide were not as readily apparent. It took careful analysis to produce the map shown here, depicting global carbon dioxide changes in March 2020, at the height of the initial onset of the pandemic in the United States.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ layers: ['co2-diff'],
+ mapLabel: () => 'March 31, 2020',
+ date: '2020-03-31T00:00:00Z'
+ }
+ }
+ },
+ {
+ id: 'difference-between-co2-no2',
+ name: 'The Difference Between CO₂ and NO₂',
+ contentComp: (
+ <>
+
+ Unlike nitrogen dioxide, which dissipates in the atmosphere a few hours after emission, carbon dioxide can last for centuries. Because of this, nitrogen dioxide emissions are typically more localized, while winds can carry carbon dioxide emissions far from their original source. This creates a smooth, global distribution pattern for carbon dioxide, such as the one seen here, as new emissions mix with the surrounding air. As a result, atmospheric carbon dioxide concentrations are relatively steady over the entire planet. This makes it very difficult to discern the impact of temporary changes in carbon dioxide emissions during coronavirus-related shutdowns, as scientists expected that any observed fluctuations would be no larger than 0.1% below normal levels. Teasing out the impacts of such reductions for specific locations during the pandemic has required NASA and its partners in the Japan Aerospace Exploration Agency (JAXA) to use advanced modeling and develop new analysis techniques.
+
+
+ ),
+ visual: {
+ type: 'multi-map',
+ about: (
+
+
+ Top: darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity. Bottom: redder colors indicate more CO₂. Bluer colors indicate less CO₂.
+
+
+ ),
+ data: {
+ mapsPerRow: 1,
+ bbox: [-148.7109, -47.7540, 179.6484, 62.2679],
+ maps: [
+ {
+ id: 'no2',
+ label: 'NO₂ March 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/OMNO2d_HRM/OMI_trno2_0.10x0.10_202003_Col3_V4.nc.tif&resampling_method=bilinear&bidx=1&rescale=0%2C1.5e16&color_map=custom_no2`
+ ]
+ }
+ },
+ {
+ id: 'co2',
+ label: 'CO₂ March 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2-mean/xco2_16day_mean.2020_03_01.tif&resampling_method=bilinear&bidx=1&rescale=0.000408%2C0.000419&color_map=rdylbu_r`
+ ]
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ id: 'co2-natural-carbon-cycle',
+ name: 'CO₂ in the Natural Carbon Cycle',
+ contentComp: (
+ <>
+
+ Further complicating the ability to discern pandemic-related changes in carbon dioxide concentrations is the fact that initial lockdowns corresponded with the beginning of spring in the Northern Hemisphere – when trees and other plants began to rapidly absorb carbon dioxide from the atmosphere. Trees, grasslands, and other land ecosystems absorb billions of tons of carbon dioxide as they bloom in the spring and then release most of that carbon dioxide back into the atmosphere as they decay in the fall. The ocean also exchanges billions of tons of carbon dioxide with the atmosphere each year. Typically, these components of the natural carbon cycle are reasonably well balanced when averaged over the year: absorbing about as much carbon dioxide as the emit, along with about half of the carbon dioxide produced by human activities. However, seasonal swings in the uptake and release of carbon dioxide by plants on land, and temperature and rainfall changes associated with naturally occurring climatological phenomena such as the El Niño Southern Oscillation, can mask any smaller changes related to the COVID-19 pandemic.
+
+
+ ),
+ visual: {
+ type: 'multi-map',
+ data: {
+ name: 'CO₂ - 16 day average',
+ bbox: [-140, -40, 140, 40],
+ legend: {
+ type: 'gradient-adjustable',
+ min: '< 408 ppm',
+ max: '> 419 ppm',
+ stops: [
+ '#313695',
+ '#588cbf',
+ '#a3d2e5',
+ '#e8f6e8',
+ '#fee89c',
+ '#fba55c',
+ '#e24932'
+ ]
+ },
+ info: 'This layer shows the average background concentration of carbon dioxide (CO₂) in our atmosphere for 2020. Redder colors indicate more CO₂. Bluer colors indicate less CO₂.',
+ mapsPerRow: 2,
+ maps: [
+ {
+ id: 'jan',
+ label: 'Jan 15 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2-mean/xco2_16day_mean.2020_01_15.tif&resampling_method=bilinear&bidx=1&rescale=0.000408%2C0.000419&color_map=rdylbu_r`
+ ]
+ }
+ },
+ {
+ id: 'apr',
+ label: 'Apr 15 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2-mean/xco2_16day_mean.2020_04_15.tif&resampling_method=bilinear&bidx=1&rescale=0.000408%2C0.000419&color_map=rdylbu_r`
+ ]
+ }
+ },
+ {
+ id: 'jul',
+ label: 'Jul 15 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2-mean/xco2_16day_mean.2020_07_15.tif&resampling_method=bilinear&bidx=1&rescale=0.000408%2C0.000419&color_map=rdylbu_r`
+ ]
+ }
+ },
+ {
+ id: 'oct',
+ label: 'Oct 15 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2-mean/xco2_16day_mean.2020_10_15.tif&resampling_method=bilinear&bidx=1&rescale=0.000408%2C0.000419&color_map=rdylbu_r`
+ ]
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ id: 'oco2-and-gosat',
+ name: 'OCO-2 and GOSAT Provide Two Complementary Ways to Track Changes in CO₂',
+ contentComp: (
+ <>
+
+ Two Earth-observing satellites – NASA’s{' '}
+
+ Orbiting Carbon Observatory-2 (OCO-2)
+ {' '}
+ and Japan's{' '}
+
+ Greenhouse gases Observing SATellite (GOSAT)
+ {' '}
+ – have tracked changes in atmospheric carbon dioxide emissions resulting from the COVID-19 pandemic. Measurements collected in 2020 were compared with results from previous years to glean insights into any small variations. Each of these satellites plays a unique role in studying carbon dioxide. OCO-2, whose data are shown here, collects measurements at relatively high spatial resolution and monitors regional-scale changes in carbon dioxide. GOSAT collects measurements at isolated points and can be targeted to track changes in carbon dioxide and methane emissions in large urban areas, such as Beijing, Tokyo, and Los Angeles. While both satellites provide a large number of measurements over the globe each day, thick clouds and airborne particles such as dust, smoke or smog reduce the number of reliable estimates they produce, so their spatial sampling is relatively sparse.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ layers: ['co2'],
+ date: '2020-03-31T00:00:00Z',
+ bbox: [-125.1562, 29.3055, -72.5097, 48.8068],
+ compare: {
+ mapLabel: () => '5 year average compared to March 31st 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2-base/xco2_16day_base.2020_03_31.tif&resampling_method=bilinear&bidx=1&rescale=0.000408%2C0.000419&color_map=rdylbu_r`
+ ]
+ }
+ }
+ }
+ }
+ },
+ {
+ id: 'looking-for-needle-in-haystack',
+ name: 'Looking for a Needle in a Haystack',
+ contentComp: (
+ <>
+
+ Searching for small changes in regional atmospheric carbon dioxide emissions against the backdrop of existing carbon dioxide levels is like looking for a needle in a haystack. To do this, scientists incorporated OCO-2 data from November 2019 through September 2020 into a NASA computer model that simulates how Earth’s atmosphere moves. The result was a gap-free global map that compensated for OCO-2’s relatively sparse carbon dioxide measurements. Scientists then compared the modeled projection with an averaged set of OCO-2 data collected over the same months from 2015 through 2019. This method helped distinguish between changes in carbon dioxide due to emissions and those associated with year-to-year variations in patterns of how winds move around the globe, which can make it hard to spot the smaller reductions in carbon dioxide that scientists expected to observe as a result of the pandemic. What they saw were small reductions of 0.5 parts per million (ppm) (about 0.125%) in carbon dioxide over China, Europe, and the United States, at times during the months corresponding to the largest reported emissions reductions in those regions.
+
+
+ ),
+
+ visual: {
+ type: 'multi-map',
+ about: (
+
+
+ Average: redder colors indicate more CO₂. Bluer colors indicate less CO₂. Difference: redder colors indicate increases in CO₂ in relation to the baseline. Bluer colors indicate lower levels of CO₂.
+
+
+ ),
+ data: {
+ bbox: [-10, 38, 48, 55],
+ maps: [
+ {
+ id: 'co2',
+ label: 'CO₂ Average April 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2-mean/xco2_16day_mean.2020_04_01.tif&resampling_method=bilinear&bidx=1&rescale=0.000408%2C0.000419&color_map=rdylbu_r`
+ ]
+ }
+ },
+ {
+ id: 'co2-diff',
+ label: 'CO₂ Difference April 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2-diff/xco2_16day_diff.2020_04_01.tif&resampling_method=bilinear&bidx=1&rescale=-0.000001%2C0.000001&color_map=rdbu_r`
+ ]
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ id: 'not-all-changes-related-to-pandemic',
+ name: 'Not all Changes Observed in CO₂ Were Related to the Pandemic',
+ contentComp: (
+ <>
+
+ Scientists were also able to infer regional-scale differences in carbon dioxide that were completely unrelated to the pandemic using these new techniques. Increased carbon dioxide observed over Australia early in the year was likely due to intense wildfires in late 2019. In addition, a small, 1ppm decline in carbon dioxide concentrations across Central India and Southern and Eastern Africa in January, shown here, was likely due to the additional absorption of carbon dioxide by land ecosystems and the Indian Ocean Dipole, an El Niño-like disturbance across the Indian Ocean basin.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ layers: ['co2-diff'],
+ date: '2020-01-15T00:00:00Z',
+ bbox: [-15, -36.5978, 170, 47.9899]
+ }
+ }
+ },
+ {
+ id: 'co2-changes-over-large-urban-areas',
+ name: 'CO₂ Changes Over Large Urban Areas',
+ contentComp: (
+ <>
+
+ The most severe changes in economic activity associated with the pandemic – and, subsequently, the largest reductions in fossil fuel emissions – occurred in large urban areas. Tracking these changes from space is challenging. Spacecraft don’t fly directly over cities very often and they frequently are covered by clouds and passing weather systems that can easily transport carbon dioxide in and out. GOSAT’s agile pointing system can look at cities and distinguish between changes in carbon dioxide that occur near Earth’s surface, which are more likely to originate from a city, and those at higher altitudes, which are more likely to have been transported from somewhere else. Scientists used this capability to devise a new technique to tease out changes in carbon dioxide emissions due to the pandemic based on their altitude. Using this process, scientists found a lower average concentration of carbon dioxide over Beijing, Tokyo, New York, Mumbai, Delhi, and Dhaka during the pandemic months studied in 2020, compared to previous years.
+
+
+ ),
+ visual: {
+ type: 'multi-map',
+ about: (
+
+ Redder colors indicate increased CO2 enhancements. Bluer colors indicate decreased CO2 enhancements.
+
+ ),
+ data: {
+ name: 'XCO₂ (Diff)',
+ bbox: [116.17, 40.11, 116.6, 39.7],
+ maps: [
+ {
+ id: 'gosat-january',
+ label: 'January 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/GOSAT_XCO2_202001_be_BG_circle_cog.tif&resampling_method=bilinear`
+ ]
+ }
+ },
+ {
+ id: 'gosat-february',
+ label: 'February 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/GOSAT_XCO2_202002_be_BG_circle_cog.tif&resampling_method=bilinear`
+ ]
+ }
+ },
+ {
+ id: 'gosat-march',
+ label: 'March 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/GOSAT_XCO2_202003_be_BG_circle_cog.tif&resampling_method=bilinear`
+ ]
+ }
+ },
+ {
+ id: 'gosat-april',
+ label: 'April 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/GOSAT_XCO2_202004_be_BG_circle_cog.tif&resampling_method=bilinear`
+ ]
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ id: 'what-we-have-learned',
+ name: 'What We\'ve Learned So Far, and Why it Matters',
+ contentComp: (
+ <>
+
+ Scientists met the challenge of detecting and tracking the small, temporary changes in atmospheric carbon dioxide caused by the COVID-19 pandemic using data from OCO-2 and GOSAT. While the rate at which carbon dioxide was added to our atmosphere was temporarily decreased, an overall reduction in the global concentration of atmospheric carbon dioxide is not expected.
+
+
+ This research provided a real-world test for these first-generation greenhouse-gas monitoring satellites. It showed that even small, year-to-year reductions in carbon dioxide emissions can be tracked using space-based sensors. This capability will be increasingly important to inform and test carbon management policies. Another key takeaway from this research is the need to improve our understanding of the contributions of the natural carbon cycle. By improving our ability to track and diagnose its changes, scientists will be able to more accurately attribute and interpret changes in carbon dioxide levels caused by human activities.
+
+
+ A key takeaway of the research is the need to improve our understanding of the contributions of the natural carbon cycle. By improving our ability to track and diagnose its changes, scientists will be able to more accurately attribute and interpret changes in carbon dioxide due to human activities. For example, we would have to reduce carbon dioxide emissions by as much as we have done this year for every year in the next couple of decades to meet the ambitious goals of the Paris agreement and limit temperature increases to less than 2 degrees C. This test shows we are learning how to do that.
+
+
+ The research is also providing new insights into the sensors and analysis tools needed to track changes in carbon dioxide from space. For example, it reinforced the value of combining different types of measurements to detect small changes in carbon dioxide emission sources. Results of these COVID-related studies will benefit development of several next-generation satellites launching in the next few years, including Japan's GOSAT-GW satellite, the Copernicus CO2M constellation, and NASA's{' '}
+
+ GeoCarb
+ .
+
+
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ mapLabel: () => 'Most recent CO₂ difference',
+ layers: ['co2-diff']
+ }
+ }
+ }
+ ]
+};
diff --git a/app/assets/scripts/components/stories/story-lcluc.js b/app/assets/scripts/components/stories/story-lcluc.js
new file mode 100644
index 00000000..2564de56
--- /dev/null
+++ b/app/assets/scripts/components/stories/story-lcluc.js
@@ -0,0 +1,377 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import config from '../../config';
+import { LayerInfo } from './single/about-data';
+const { api } = config;
+
+export default {
+ id: 'changing-landscapes',
+ name: 'Changing Landscapes',
+ publishDate: '2020/12/01',
+ thumbnail: 'thumbnail-changing-landscapes.jpg',
+ chapters: [
+ {
+ id: 'changing-behavior',
+ name: 'Changing Behavior and Changing Landscapes',
+ contentComp: (
+
+ Throughout the COVID-19 pandemic, governments have implemented, eased, and re-implemented restrictions limiting mobility and international travel to help slow the spread of the novel coronavirus. As a result, people have largely stayed home, and the ways in which we interact with the human-made and natural environments have changed. These changes have reverberated throughout Earth’s systems and are observed in different ways by NASA satellites.
+
+ ),
+ visual: {
+ type: 'map-layer',
+ about: (
+
+ Landsat-8 imagery, visualized with the RGB bands.
+
+ ),
+ data: {
+ bbox: [113.9, 30.4, 114.7, 30.8],
+ mapLabel: () => 'Feb 25, 2020',
+ layers: [
+ {
+ id: 'ls8-wuhan',
+ type: 'raster',
+ source: {
+ type: 'raster',
+ tiles: [
+ 'https://c50qa6bhpe.execute-api.us-west-2.amazonaws.com/scenes/landsat/tiles/{z}/{x}/{y}.png?sceneid=LC08_L1TP_123039_20200209_20200211_01_T1&bands=B4,B3,B2&color_formula=gamma RGB 3.5, saturation 1.7, sigmoidal RGB 15 0.35'
+ ]
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ id: 'dimmer-world',
+ name: 'A Dimmer World During the Pandemic',
+ contentComp: (
+ <>
+
+ When China implemented restrictions on businesses in the early months of 2020, NASA researchers documented changes in nighttime lights throughout the region. Images of Earth at night provide an extraordinary view of how human activity changes over time. During the COVID-19 pandemic, scientists are using satellite observations to track variations in nighttime lights, which show changes in transportation, energy use, and migration as human response to the pandemic evolves. From January through February 2020, nighttime lights in the central commercial district of Wuhan dimmed as people stayed home instead of shopping or socializing. Even highways, represented by the bright lines in the satellite imagery, darkened with less activity during shutdown periods.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ bbox: [113.9, 30.4, 114.7, 30.8],
+ layers: [
+ {
+ id: 'jan',
+ type: 'raster',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/bmhd-wuhan/BMHD_Wuhan_China_VNP46A2_Feb42020_ON.cog.tif&resampling_method=bilinear&bidx=1%2C2%2C3`
+ ]
+ },
+ name: 'Nightlights HD',
+ legend: {
+ type: 'gradient',
+ min: 'less',
+ max: 'more',
+ stops: [
+ '#08041d',
+ '#1f0a46',
+ '#52076c',
+ '#f57c16',
+ '#f7cf39'
+ ]
+ },
+ 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.'
+ }
+ ],
+ compare: {
+ mapLabel: () => 'January 2020 compared to February 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/bmhd-wuhan/BMHD_Wuhan_China_VNP46A2_Jan192020_ON.cog.tif&resampling_method=bilinear&bidx=1%2C2%2C3`
+ ]
+ }
+ }
+ }
+ }
+ },
+ {
+ id: 'changes-in-traffic',
+ name: 'Changes in Traffic and Parking Lot Patterns',
+ contentComp: (
+
+ At different stages of the pandemic, nonessential businesses like shopping malls closed temporarily, while essential businesses like grocery stores were allowed to remain open. The effect of nonessential business closures on surface transportation around the world was so significant that it could be seen from space. For example, the imagery shown here provides a stark picture of empty parking lots near deserted commercial districts in and around Los Angeles. Blue areas represent places where slowdowns were most severe. Scientists obtained these data by combining remote sensing technology known as synthetic aperture radar, or SAR, with high-resolution imagery from Planet Labs. By comparing SAR images of the same areas before and after pandemic-related lockdowns, decreases in car activity in Los Angeles near airports, sports stadiums, and shopping malls were visible from space.
+
+ ),
+ visual: {
+ type: 'map-layer',
+ about: (
+
+ Slowdown Proxy Maps show areas with the greatest reduction in car activity shaded in blue. Darker blues indicate areas of greater change.
+
+ ),
+ data: {
+ bbox: [-118.2645, 34.0486, -118.2059, 34.0930],
+ spotlight: 'la',
+ layers: ['slowdown']
+ }
+ }
+ },
+ {
+ id: 'changes-in-ports',
+ name: 'Tracking Changes in Ports',
+ contentComp: (
+
+ It wasn’t just ground transportation in Los Angeles that was affected by COVID-related shutdowns – its port also showed less activity. During the pandemic, supply chains around the world dependent on cargo shipping saw interruptions as many ports closed, shipments canceled, and in some locations, altered routes prevented the efficient movement of cargo. According to the Port of Los Angeles, its port saw a 19% reduction in shipping cargo volume during the early months of the pandemic, compared to the same time period in 2019. The image here shows a reduction in the number of ships at the port, which could potentially also affect the area’s overall water quality.
+
+ ),
+ visual: {
+ type: 'map-layer',
+ about: (
+
+ Ships detected in PlanetScope imagery are shown in orange.
+
+ ),
+ data: {
+ // bbox: [-118.6759, 33.4267, -117.0733, 34.3439],
+ spotlight: 'la',
+ mapLabel: () => 'March 11, 2020',
+ date: '2020-03-11T00:00:00Z',
+ layers: [
+ 'detections-ship'
+ ]
+ }
+ }
+ },
+ {
+ id: 'changes-in-urban-heat',
+ name: 'Changes in Urban Heat During Bay Area Shelter-In-Place Orders',
+ contentComp: (
+
+ Sudden changes in surface transportation may also be changing how cities trap and emit heat. In March, surface traffic in the San Francisco Bay Area dropped by 70%. Scientists found that the reduction in traffic corresponded to a 30% decrease in fine particulate and ozone pollution when compared to previous years.
+
+ ),
+ visual: {
+ type: 'map-layer',
+ about: (
+
+ Slowdown Proxy Maps show areas with the greatest reduction in car activity shaded in blue. Darker blues indicate areas of greater change.
+
+ ),
+ data: {
+ bbox: [-122.2635, 37.6967, -122.1492, 37.7507],
+ spotlight: 'sf',
+ layers: ['slowdown']
+ }
+ }
+ },
+ {
+ id: 'changes-in-urban-heat-continued',
+ name: 'Changes in Urban Heat During Bay Area Shelter-In-Place Orders, Continued',
+ contentComp: (
+ <>
+
+ Satellite and thermal data also showed how the decreases in air pollution and the prevalence of empty parking lots during the pandemic changed how much solar radiation is absorbed and reflected from ground surfaces Cleaner air meant that heat re-emitted during the day from dark asphalt and cement surfaces did not stay trapped near the ground as long. Instead, measurements from the joint NASA-U.S. Geological Survey{' '}
+
+ Landsat satellite
+ {' '}and NASA's{' '}
+
+ ECOsystem Spaceborne Thermal Radiometer Experiment on Space Station (ECOSTRESS)
+ {' '}
+ instrument showed heat dissipated quickly, cooling the urban environment. As a result, scientists found that large parking lots, highway corridors, and commercial rooftops were on average 10-15°F cooler from March to May 2020, compared to previous years.
+
+
+ ),
+ visual: {
+ type: 'multi-map',
+ data: {
+ bbox: [-122.2635, 37.6967, -122.1492, 37.7507],
+ // units are in kelvin with a:
+ // - range: 1-65535
+ // - multiplicative scale factor: 0.00341802
+ // - additive scale factor: 149
+ // 40710 & 49487 translate to 15 & 45 celsius
+ maps: [
+ {
+ id: 'st-2018',
+ label: 'April 2018',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/ls8-surface-temperature/LC08_L2SP_044034_20180414_20200901_02_T1_ST_B10.cog.tif&resampling_method=bilinear&rescale=40710,49487&color_map=coolwarm`
+ ]
+ }
+ },
+ {
+ id: 'st-2020',
+ label: 'April 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/ls8-surface-temperature/LC08_L2SP_044034_20200403_20200822_02_T1_ST_B10.cog.tif&resampling_method=bilinear&rescale=40710,49487&color_map=coolwarm`
+ ]
+ }
+ }
+ ],
+ name: 'Surface Temperature',
+ legend: {
+ type: 'gradient',
+ min: '15℃',
+ max: '45℃',
+ stops: [
+ '#3d4fc0',
+ '#7495f1',
+ '#acc7fa',
+ '#dedbda',
+ '#f5b89e',
+ '#e77962',
+ '#b4152d'
+ ]
+ },
+ info: 'Surface Temperature from Landsat-8, Collection 2 Level 2 data.'
+ }
+ }
+ },
+ {
+ id: 'fewer-prescribed-burns',
+ name: 'Fewer Prescribed Burns During the Pandemic',
+ contentComp: (
+ <>
+
+ Limits on work and travel during the pandemic also affected how humans interact with the natural environment. For example, satellites observed a reduction in managed forest fires, otherwise known as prescribed burns, on federal lands. Prescribed burns are an important way to reduce fuel loads and maintain biodiversity. In March 2020, the U.S. Forest Service and other federal agencies temporarily suspended all prescribed burns on federal lands in the Southeast United States. State agencies in Mississippi, South Carolina, and North Carolina also issued spring burning bans in response to the COVID-19 pandemic. The Forest Service’s suspension aimed to prevent virus exposure to employees and to reduce smoke exposure to vulnerable communities, since COVID-19 is a respiratory illness. Using fire data from the{' '}
+
+ Visible Infrared Imaging Radiometer Suite (VIIRS)
+ {' '}
+ on the Suomi NPP satellite, researchers at NASA’s Goddard Space Flight Center detected a 42% reduction in active fires in the Southeastern U.S. this spring compared to previous years.
+
+
+ ),
+ visual: {
+ type: 'multi-map',
+ data: {
+ bbox: [-75, 24, -107, 40],
+ mapStyle: 'mapbox://styles/covid-nasa/ckhyrwyqa10fn19pu38wdrpjo',
+ name: 'Fire anomalies',
+ legend: {
+ type: 'gradient',
+ min: '-10%',
+ max: '+10%',
+ stops: [
+ '#0a03fb',
+ '#5a59fb',
+ '#b0b0fd',
+ '#fff8f8',
+ '#fea4a5',
+ '#fd5556',
+ '#fd1c21'
+ ]
+ },
+ info: 'This data shows the change in active fires compared to the baseline of 2012-2019.',
+ maps: [
+ {
+ id: 'fire-mar',
+ label: 'March 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/fire-anomalies/MODIS-AF_anomalies_USA_Y2020_M3_0.25-dashboard.tif&resampling_method=bilinear&rescale=-10,10&color_map=bwr`
+ ]
+ }
+ },
+ {
+ id: 'fire-apr',
+ label: 'April 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/fire-anomalies/MODIS-AF_anomalies_USA_Y2020_M4_0.25-dashboard.tif&resampling_method=bilinear&rescale=-10,10&color_map=bwr`
+ ]
+ }
+ },
+ {
+ id: 'fire-may',
+ label: 'May 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/fire-anomalies/MODIS-AF_anomalies_USA_Y2020_M5_0.25-dashboard.tif&resampling_method=bilinear&rescale=-10,10&color_map=bwr`
+ ]
+ }
+ },
+ {
+ id: 'fire-jun',
+ label: 'June 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/fire-anomalies/MODIS-AF_anomalies_USA_Y2020_M6_0.25-dashboard.tif&resampling_method=bilinear&rescale=-10,10&color_map=bwr`
+ ]
+ }
+ },
+ {
+ id: 'fire-jul',
+ label: 'July 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/fire-anomalies/MODIS-AF_anomalies_USA_Y2020_M7_0.25-dashboard.tif&resampling_method=bilinear&rescale=-10,10&color_map=bwr`
+ ]
+ }
+ },
+ {
+ id: 'fire-aug',
+ label: 'August 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/fire-anomalies/MODIS-AF_anomalies_USA_Y2020_M8_0.25-dashboard.tif&resampling_method=bilinear&rescale=-10,10&color_map=bwr`
+ ]
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ id: 'what-we-learned',
+ name: 'What have we learned and what opportunities are there for this research in the future?',
+ contentComp: (
+ <>
+
+ How we interact with the environment has a noticeable effect on the land, air, and water. Scientists will continue to monitor the social and environmental changes associated with the pandemic, which provides a unique opportunity to characterize and study the effect we have on our planet.
+
+
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ layers: []
+ }
+ }
+ }
+ ]
+};
diff --git a/app/assets/scripts/components/stories/story-water.js b/app/assets/scripts/components/stories/story-water.js
new file mode 100644
index 00000000..c8cf702a
--- /dev/null
+++ b/app/assets/scripts/components/stories/story-water.js
@@ -0,0 +1,274 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import config from '../../config';
+import { LayerInfo } from './single/about-data';
+const { api } = config;
+
+export default {
+ id: 'water-quality',
+ name: 'Water Quality',
+ publishDate: '2020/12/01',
+ thumbnail: 'thumbnail-water.jpg',
+ chapters: [
+ {
+ id: 'water-quality-during-pandemic',
+ name: 'Water Quality during the COVID-19 Pandemic',
+ contentComp: (
+ <>
+
+ Human activity influences water quality, and our behavior changes during the COVID-19 pandemic may be affecting local and regional water quality around the world. Runoff from agriculture and cities can overload coastal waters with excess nutrients, ships in ports and other waterways can mix up sediment and increase turbidity, and even air pollution can end up in the water. Although there are various indications that overall water quality is improving in many places during pandemic-related shutdowns, the cause of these changes and their long-term effects are under investigation by researchers using satellite-based observations and on-the-ground validation.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ bbox: [-122.63570045, 37.11988178, -121.53518996, 38.35512939],
+ layers: ['water-spm'],
+ mapLabel: 'April 3, 2020',
+ date: '2020-04-03T00:00:00Z',
+ spotlight: 'sf'
+ }
+ }
+ },
+ {
+ id: 'air-water-quality-and-covid',
+ name: 'Air Quality, Water Quality and COVID-19',
+ contentComp: (
+ <>
+
+ California was one of the first places in the United States to impose COVID-19 related restrictions. A shelter-in-place mandate went into effect for six counties in the San Francisco metropolitan area on March 17, 2020. NASA scientists are using satellite data to investigate the connection between observed changes in air and water quality since the mandate began. Nitrogen compounds, commonly found in air pollutants, can contribute to the formation of algal blooms in water and cause water bodies to become more acidic. Research using satellite data to detect changes in levels of algae (chlorophyll-a) and total suspended solids across multiple sites, including the San Francisco Bay, have shown improvements in water quality during recent shutdowns. The lessons learned from this work will help inform similar work in other coastal cities.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ layers: ['no2'],
+ date: '2020-04-01T00:00:00Z',
+ bbox: [-122.63570045, 37.11988178, -121.53518996, 38.35512939],
+ compare: true
+ }
+ }
+ },
+ {
+ id: 'examining-the-chesapeake',
+ name: 'Examining the Chesapeake Bay during COVID-19',
+ contentComp: (
+ <>
+
+ Chlorophyll-a concentrations and water turbidity fluctuate based on a variety of factors, including natural geography and the weather, making it difficult to identify changes due to COVID-19 restrictions. In coastal areas like the Chesapeake Bay, which is strongly influenced by human activities like agricultural practices, higher chlorophyll-a concentrations can result from the discharge of fertilizers. Agricultural run-off may mask any improvements in water quality from pandemic-related shutdowns.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ bbox: [-77.0581, 36.8400, -75.0256, 39.8718],
+ mapLabel: 'March 26, 2020',
+ layers: [
+ {
+ id: 'chla-chesapeake',
+ type: 'raster',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/standalone/chla-chesapeake/anomaly-chl-bc-2020_03_26.tif&resampling_method=bilinear&bidx=1&rescale=0%2C100&color_map=rdbu_r`
+ ]
+ },
+ name: 'Chlorophyll-a Anomaly',
+ legend: {
+ type: 'gradient',
+ min: 'less',
+ max: 'more',
+ stops: [
+ '#3A88BD',
+ '#C9E0ED',
+ '#E4EEF3',
+ '#FDDCC9',
+ '#DE725B',
+ '#67001F'
+ ]
+ },
+ info: 'Chlorophyll-a is an indicator of algae growth. Redder color indicate increases chlorophyll-a and worse water quality. Bluer colors indicate decreases in chlorophyll-a and improved water quality. White areas indicate no change.'
+ }
+ ]
+ }
+ }
+ },
+ {
+ id: 'shades-of-green',
+ name: 'Shades of Green in the Great Lakes',
+ contentComp: (
+ <>
+
+ Similarly, researchers are using NASA satellites to observe changes in water quality within the Great Lakes region. Comparing data from April-June 2020 to a baseline average for 2010-2019, researchers observed slight increases in chlorophyll-a and suspended sediment concentrations in the Western Basin of Lake Erie, the portion of the lake most affected by humans and agriculture. Research is ongoing, however, as scientists are unsure whether these changes are due to COVID-19 related behavioral changes, since they still fall within the historical range of chlorophyll-a and suspended sediment levels in the lake.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ layers: ['water-wq-gl-chl'],
+ mapLabel: 'April 1, 2020',
+ date: '2020-04-01T00:00:00Z',
+ spotlight: 'gl',
+ bbox: [-84.3695, 45.2013, -81.7492, 41.253]
+ }
+ }
+ },
+ {
+ id: 'glamorous-tool',
+ name: "A GLAMorous Tool to Assess COVID's Effects",
+ contentComp: (
+ <>
+
+ During the pandemic, resources such as the Group on Earth Observations Global Agricultural Monitoring (GEOGLAM) tool help assess whether crops have adequate access to water and nutrients. Typically used to increase agricultural market transparency and bolster food security by producing timely, actionable information on agricultural conditions, GEOGLAM safely monitors and tracks agricultural conditions from space when local curfews and stay-at-home orders have prevented people from performing these duties on the ground. For example, the Togolese government has used GEOGLAM during the pandemic to safely track agricultural conditions throughout the country and distribute aid to small farmers.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ mapStyle: 'mapbox://styles/covid-nasa/ckhyrjsj40ctz19nc5akczgsk',
+ mapLabel: 'Most recent GEOGLAM data',
+ layers: ['agriculture']
+ }
+ }
+ },
+ {
+ id: 'counting-crops',
+ name: 'Counting Crops During a Lockdown',
+ contentComp: (
+
+ Earth-observing satellites have been critical to filling in information about crop planting and conditions, particularly where social distancing and shutdowns have made it difficult to collect ground data. NASA Harvest researchers at the University of Maryland in College Park are using data from U.S. and European satellites to supplement data collected on the ground by the U.S. Department of Agriculture. Using satellite data and machine learning, the researchers are monitoring key commodity crops that have high impacts on markets and food security, including corn and soybeans in the U.S. (pictured here) and winter wheat in Russia.
+
+ ),
+ visual: {
+ type: 'map-layer',
+ about: (
+
+ Landsat-8, visualized using the agriculture band combination (6, 5, 2).
+
+ ),
+ data: {
+ bbox: [-93.7916, 41.5923, -92.9731, 42.0248],
+ mapLabel: 'March 4, 2020',
+ layers: [
+ {
+ id: 'ls8-iowa',
+ type: 'raster',
+ source: {
+ type: 'raster',
+ tiles: [
+ 'https://c50qa6bhpe.execute-api.us-west-2.amazonaws.com/scenes/landsat/tiles/{z}/{x}/{y}.png?sceneid=LC08_L1TP_026031_20200304_20200314_01_T1&bands=B6,B5,B2&color_formula=gamma RGB 3.5, saturation 1.7, sigmoidal RGB 15 0.35'
+ ]
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ id: 'understanding-impacts-venetian-lagoon',
+ name: 'Understanding Impacts on the Venetian Lagoon',
+ contentComp: (
+ <>
+
+ Other human activities, such as tourism, also affect water quality, although during the pandemic different geographic regions have seen different levels of change. Water clarity in the Venice Lagoon within the North Adriatic Sea, for example, improved during shutdowns because of reduced tourism and boat traffic. The satellite imagery here shows this trend, as total suspended solid levels fell from March-April 2020 with reduced human activity. But you didn’t need a satellite to see the difference. After the local COVID-19 shutdown began, pictures of gondolas in the newly-clear waters of Venice canals were shared around the world, as residents noticed changes so drastic they were visible to the naked eye.
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ data: {
+ bbox: [12.2, 45.2, 12.7, 45.6],
+ layers: [
+ {
+ id: 'tsm-nas',
+ type: 'raster',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/tsm/nas-2020_01_11.tif&resampling_method=bilinear&bidx=1&rescale=-100%2C100&color_map=rdbu_r`
+ ]
+ },
+ name: 'Turbidity',
+ legend: {
+ type: 'gradient',
+ min: 'less',
+ max: 'more',
+ stops: [
+ '#3A88BD',
+ '#C9E0ED',
+ '#E4EEF3',
+ '#FDDCC9',
+ '#DE725B',
+ '#67001F'
+ ]
+ },
+ info: 'Turbidity refers to the amount of sediment or particles suspended in water. Redder colors indicate more sediment and murkier water. Bluer colors indicate less sediment and clearer water.'
+ }
+ ],
+ compare: {
+ mapLabel: () => 'January 2020 compared to March 2020',
+ source: {
+ type: 'raster',
+ tiles: [
+ `${api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/tsm/nas-2020_03_21.tif&resampling_method=bilinear&bidx=1&rescale=-100%2C100&color_map=rdbu_r`
+ ]
+ }
+ }
+ }
+ }
+ },
+ {
+ id: 'water-quality-belize',
+ name: 'Monitoring Water Quality in Belize',
+ contentComp: (
+ <>
+
+ A team from the University of Alabama in Huntsville is using satellite and ground-based data to monitor water quality off the coast of Belize to understand how the pandemic is affecting sources of urban and agricultural pollutants, such as nitrogen and phosphorus. By observing land-use changes from shutdowns and decreased tourism, researchers are tracking the production of pollutants that reach water bodies and ecosystems. While Belize experienced similar declines in tourism to other locations, so far researchers have not found vast improvements in water quality. Research conducted during this pandemic will help guide future land-use planners and coastal development.
+
+
+ During the COVID-19 pandemic, scientists will continue to use remote sensing data to observe any changes in water quality due to changes in human behavior.
+
+
+
+
+ ),
+ visual: {
+ type: 'map-layer',
+ about: (
+
+ Landsat-8, visualized using the bathymetric band combination (4,3,1).
+
+ ),
+ data: {
+ bbox: [-89.9533, 16.5, -87.2012, 18.2],
+ mapLabel: () => 'March 3, 2020',
+ layers: [
+ {
+ id: 'ls8-belize',
+ type: 'raster',
+ info: 'asd',
+ source: {
+ type: 'raster',
+ tiles: [
+ 'https://c50qa6bhpe.execute-api.us-west-2.amazonaws.com/scenes/landsat/tiles/{z}/{x}/{y}.png?sceneid=LC08_L1TP_019048_20200303_20200314_01_T1&bands=B4,B3,B1&color_formula=gamma RGB 3.5, saturation 1.7, sigmoidal RGB 15 0.35'
+ ]
+ }
+ }
+ ]
+ }
+ }
+ }
+ ]
+};
diff --git a/app/assets/scripts/main.js b/app/assets/scripts/main.js
index 52042d39..b7dc43cc 100644
--- a/app/assets/scripts/main.js
+++ b/app/assets/scripts/main.js
@@ -26,6 +26,8 @@ import GetStartedHub from './components/getstarted/hub';
import SpotlightHub from './components/spotlight/hub';
import SpotlightSingle from './components/spotlight/single';
import IndicatorsHub from './components/indicators/hub';
+import StoriesHub from './components/stories/hub';
+import StoriesSingle from './components/stories/single';
import IndicatorsSingle from './components/indicators/single';
import Sandbox from './components/sandbox';
import UhOh from './components/uhoh';
@@ -79,7 +81,9 @@ class Root extends React.Component {
this.setState({ dataReady: true })} />
+ this.setState({ dataReady: true })}
+ />
{this.state.dataReady && (
@@ -102,6 +106,12 @@ class Root extends React.Component {
path='/indicators/:indicatorId'
component={IndicatorsSingle}
/>
+ 2 ]
+ : [...accum, el],
+ []
+ );
+};
diff --git a/app/assets/scripts/utils/map-explore-utils.js b/app/assets/scripts/utils/map-explore-utils.js
index 684d49a1..6a0223dd 100644
--- a/app/assets/scripts/utils/map-explore-utils.js
+++ b/app/assets/scripts/utils/map-explore-utils.js
@@ -260,11 +260,10 @@ export async function handleMapAction (action, payload) {
* @param {object} layer Layer data
*/
export function getUpdatedActiveLayersState (state, layer) {
- const { exclusiveWith, id } = layer;
+ const { exclusiveWith = [], id } = layer;
const { activeLayers, layersState } = state;
// Hide any layers that are not compatible with the current one.
// This means that when this layer gets enabled some layers must be disabled.
- const exclusiveWithLayers = exclusiveWith || [];
const isEnabled = activeLayers.includes(id);
// If the layer is enabled is just a matter of removing it from the array.
@@ -276,11 +275,11 @@ export function getUpdatedActiveLayersState (state, layer) {
// Remove incompatible layers.
const diff = activeLayers.filter(
- (v) => !exclusiveWithLayers.includes(v)
+ (v) => !exclusiveWith.includes(v)
);
// Disable the comparison on any exclusive layer.
- const newLayersState = exclusiveWithLayers.reduce((acc, id) => {
+ const newLayersState = exclusiveWith.reduce((acc, id) => {
return get(layersState, [id, 'comparing'])
? {
...acc,
diff --git a/app/index.html b/app/index.html
index 6adb32d0..b04df304 100644
--- a/app/index.html
+++ b/app/index.html
@@ -25,11 +25,11 @@