- The COVID EO dashbord provides streaming data about the - pandemic to inform decisionmakers in government, community - leaders, health responders, and the business community. -
-+ As the world moved indoors to shelter from the global pandemic sparked by the novel coronavirus, we + could perceive changes on our planet. The sky seemed a little bluer, the air a little fresher, the animals in + our yards more abundant. +
++ NASA’s continuous and sometimes near-real-time measurements of Earth allow for understanding both the systems + changes themselves and the potential impact on economies and society during the pandemic – and as the world + slowly returns to operations. +
++ This dashboard features data collected and analyzed by the National Aeronautics and Space Administration (NASA). + Information about Earth systems is gathered by a fleet of powerful global Earth-Observing satellites, instruments + aboard the International Space Station, from airborne science campaigns, and via ground observations. With this + data we have been able to monitor some of those changes andand this is allowing us to track and compare these + changes over time. +
++ NASA will further expand the impact of the data sets presented in this dashboard in collaboration with + European Space Agency (ESA) and the Japan Aerospace Exploration Agency (JAXA), who also have created their own + online data portals to provide an even richer picture of what is happening on our home planet during this time of + world crisis by developing a fourth dashboard that will combine the unique data of each agency for more comparisons + and deeper understandings now and over time. +
++ To learn more about NASA Earth Science, go to nasa.gov/earth. +
+Some more in depth information
-- Consectetur adipisicing elit. Vitae laboriosam recusandae esse, - rem hic nobis. Labore voluptatum eligendi nisi eius, quod ipsa - soluta odio placeat hic ad, repudiandae, velit earum! -
-- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Numquam rerum minus nesciunt necessitatibus ea id veritatis, - et ut porro possimus accusamus assumenda, pariatur fugit - praesentium magnam enim vero non, a repellat quae distinctio - neque voluptatem. Dignissimos saepe animi praesentium - sapiente. -
-- Neque reprehenderit ullam numquam nulla tempore ea natus - voluptates. Sunt dolor reiciendis dolore impedit asperiores - fugiat, quas saepe quibusdam itaque deleniti ratione - corporis incidunt dignissimos quia nostrum aliquam possimus - unde, voluptatem temporibus repellendus aliquid officia. - Molestiae sit animi sequi velit consectetur est facere - excepturi possimus incidunt! Pariatur blanditiis illo eaque - asperiores harum. -
-- Blanditiis ea commodi vero ipsa hic nam corporis! At - similique aspernatur ab, praesentium veniam placeat autem - iste veritatis voluptates amet nesciunt suscipit optio qui - voluptatum tempore. Dolores quaerat consequuntur nulla vero - expedita. -
-- Some important lead, like the conclusion of the previous topic. - Distinctio ullam quaerat esse id consectetur vitae praesentium - facilis facere voluptate. -
-- Exercitationem voluptatum expedita vel rerum nemo quidem quas - error. Assumenda harum dolores quia error illo odio et numquam - magnam qui? Dolores dolorem quisquam aperiam id a ipsum rerum - nesciunt magnam pariatur? Ipsa nemo sequi ad recusandae commodi - non, voluptatum nobis iste a temporibus quidem natus labore - ullam distinctio illum nesciunt molestiae! Ducimus autem ea - aperiam in maxime quae cupiditate magni aut? Quis, blanditiis. - Ipsum esse sapiente ex reprehenderit veniam aliquam maiores - labore. -
-- Ab quibusdam, consequatur magni magnam nisi molestiae doloremque - architecto hic reiciendis atque error accusamus vero sapiente, - in enim! Nam, iste quas cum doloremque molestiae autem odit - animi eius error aspernatur voluptas nobis. -
-- Temporibus non aliquid numquam eius. Doloremque dolore fugit, - quam qui nihil possimus inventore. Provident nisi dignissimos - aliquid assumenda dolor nemo adipisci voluptas. -
-- Officiis nulla aliquam deserunt facilis consequuntur laborum - voluptas nobis eaque, in aperiam officia excepturi eius, - provident porro? Nobis praesentium quis eos excepturi. -
-- Distinctio sunt sequi est, ex velit, eligendi id ducimus nemo - vero tempora, maiores laudantium dignissimos saepe beatae facere - facilis in corrupti? Facere, modi. Voluptatum eum adipisci ad - illum explicabo eveniet facere. Unde enim tempore dolore - doloribus inventore obcaecati aspernatur cum possimus voluptatum - fugit omnis quis molestiae id eos consectetur tempora delectus - quos maiores voluptatem quas doloremque, consequatur ex impedit. - Iure unde est quae doloribus necessitatibus libero aliquid - deleniti odit quas. Iste vel assumenda quae optio quo quam - labore, asperiores provident. A ducimus ipsa amet ullam iste - consequuntur ex, delectus quaerat qui perferendis. -
-This is the content for the no2 dataset
- * } - * } - * - * export default { - * ...metadata, - * LongForm: NO2LongForm - * }; - * - * 2) Import the page below. - * - * 3) Add the page to the datasets array - * - */ -import no2 from './dataset-no2'; -import population from './dataset-population'; - -const datasets = [ - no2, - population -]; - -export default datasets; - -export const getDataset = (id) => datasets.find((d) => d.id === id); diff --git a/app/assets/scripts/components/home/index.js b/app/assets/scripts/components/home/index.js index 9b587f54..3ba4b63d 100644 --- a/app/assets/scripts/components/home/index.js +++ b/app/assets/scripts/components/home/index.js @@ -1,7 +1,9 @@ import React from 'react'; import styled from 'styled-components'; +import { NavLink } from 'react-router-dom'; import App from '../common/app'; +import Button from '../../styles/button/button'; import { Inpage, InpageHeader, @@ -10,20 +12,35 @@ import { InpageTitle, InpageBody } from '../../styles/inpage'; - +import InpageHGroup from '../../styles/inpage-hgroup'; import { - Fold -} from '../../styles/fold'; + PageConstrainer +} from '../../styles/hub-pages'; +import Prose from '../../styles/type/prose'; -import Constrainer from '../../styles/constrainer'; +import { filterComponentProps } from '../../utils/utils'; +import { glsp } from '../../styles/utils/theme-values'; -import Prose from '../../styles/type/prose'; +const IntroActions = styled.div` + display: grid; + grid-gap: ${glsp()}; + grid-template-columns: repeat(12, 1fr); + padding: ${glsp(1, 0)}; -const HomeProse = styled(Prose)` - grid-row: 1; - grid-column: span 8; + > * { + grid-column: auto / span 3; + } + + /* stylelint-disable-next-line */ + ${InpageHGroup} { + grid-row: 1; + grid-column: content-start / content-7; + } `; +const propsToFilter = ['size', 'useIcon', 'variation']; +const CleanNavLink = filterComponentProps(NavLink, propsToFilter); + export default class Home extends React.Component { render () { return ( @@ -32,23 +49,66 @@ export default class Home extends React.Component {- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem iste ducimus neque sunt voluptatum veritatis totam. Minima aut quisquam ea adipisci velit exercitationem nesciunt quam maiores, deserunt, ex aliquam molestias? Asperiores, nam ab beatae mollitia accusamus quis repudiandae corrupti animi architecto magnam fuga distinctio vitae laborum a, eum quisquam neque omnis, minus suscipit perspiciatis vel. Aspernatur est a tenetur doloremque excepturi possimus omnis repellendus error. -
-- Eaque libero numquam, debitis harum corrupti rerum odio assumenda nihil molestiae quibusdam, unde accusantium aperiam laborum blanditiis cumque, non labore maiores. Tempore, dicta ipsa repellendus, obcaecati cumque eos amet in similique voluptate molestiae quos tempora deleniti incidunt, iste quasi illo quidem quibusdam excepturi consequuntur suscipit et facilis enim. Similique sapiente ex corporis. Eius, porro iusto? -
-+ As communities around the world have changed their behavior in response + to the spread of COVID-19, NASA satellites have observed associated + changes in the environment. +
++ The NASA COVID-19 data dashboard can be used to explore these changes + on a global scale. Powered by publicly available NASA Earth observing + data, the dashboard highlights 10 key indicators – 4 environmental and + 6 economic – that show how the planet is responding to our changing + behavior in response to COVID-19. +
++ Use the dashboard to interact with real NASA data and investigate how + social distancing measures and regional shelter-in-place guidelines have + affected Earth’s air, land, and water. Explore individual 'Spotlight Areas' + to see how the indicators in each specific location have changed through + time. +
++ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure + molestias deserunt blanditiis veritatis, porro exercitationem + quaerat pariatur fugit nam iusto cum ullam animi? Velit + voluptatibus provident deserunt, corrupti natus porro. + Expedita repudiandae qui at ab eveniet nihil laborum eligendi + numquam nemo error, fuga, quasi natus debitis. Soluta labore + sed, rem autem alias accusamus dignissimos, nam aut suscipit + voluptas, harum nemo! +
++ Porro aliquid sed veritatis cumque maiores adipisci ea et + perspiciatis officia deserunt perferendis assumenda mollitia + ab nihil quas similique aspernatur labore ipsa asperiores, eum + minima repudiandae, at fugiat! Totam, delectus! Ab aut + necessitatibus delectus pariatur eaque eveniet velit + consequuntur nam odio minus. Non est reiciendis, eveniet aut, + ut esse ratione libero temporibus inventore, enim vitae alias + necessitatibus error pariatur in. +
+This is the content for the no2 indicator
+ * } + * } + * + * export default { + * ...metadata, + * LongForm: NO2LongForm + * }; + * + * 2) Import the page below. + * + * 3) Add the page to the indicators array + * + */ +import no2 from './indicator-no2'; +import bm from './indicator-nightlights'; +import population from './indicator-population'; + +const indicators = [ + bm, + no2, + population +]; + +export default indicators; + +export const getIndicator = (id) => indicators.find((d) => d.id === id); diff --git a/app/assets/scripts/components/indicators/indicator-nightlights.js b/app/assets/scripts/components/indicators/indicator-nightlights.js new file mode 100644 index 00000000..55d620e5 --- /dev/null +++ b/app/assets/scripts/components/indicators/indicator-nightlights.js @@ -0,0 +1,229 @@ +import React from 'react'; +import styled from 'styled-components'; +import ReactCompareImage from 'react-compare-image'; + +import Prose from '../../styles/type/prose'; +import Gridder from '../../styles/gridder'; +import InpageHGroup from '../../styles/inpage-hgroup'; +import { Fold, FoldDetails } from '../../styles/fold'; +import MediaImage, { MediaCompare } from '../../styles/media-image'; + +import { glsp } from '../../styles/utils/theme-values'; +import config from '../../config'; + +const { baseUrl } = config; + +const IntroFold = styled(Fold)` + padding-bottom: 0; + + ${Prose} { + grid-column: content-start / content-10; + } +`; + +const ResearchFold = styled(Fold)` + padding-bottom: 0; + + ${Gridder} { + align-items: center; + } + + ${MediaImage} { + grid-column: content-8 / full-end; + grid-row: 1; + } + + ${FoldDetails} { + grid-column: content-start / content-8; + text-align: left; + } +`; + +const DataFold = styled(Fold)` + padding-bottom: 0; + + ${Gridder} { + align-items: center; + } + + ${MediaCompare} { + grid-column: full-start / content-8; + grid-row: 1; + } + + ${FoldDetails} { + grid-column: content-8 / content-end; + text-align: left; + } +`; + +const FactsFold = styled(Fold)` + padding-bottom: ${glsp(6)}; + + ${Gridder} { + align-items: center; + } + + /* stylelint-disable-next-line */ + ${InpageHGroup} { + grid-row: 1; + grid-column: content-start / content-7; + } + + ${Prose} { + grid-column: content-start / content-end; + grid-row: 2; + margin-bottom: ${glsp(2)}; + } +`; + +const CreditsFold = styled(FactsFold)` + padding-bottom: 0; + + ${Prose} { + grid-column: content-start / content-7; + } +`; + +const metadata = { + id: 'bm', + name: 'Nighttime Lights', + color: '#2276AC' +}; + +class BMLongForm 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. +
++ 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. +
++ 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. +
++ 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. +
++ 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. +
++ 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. +
+NASA Features
+ +Explore the Data
+ +Explore the Missions
+ ++ 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. +
++ 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. +
++ 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. +
++ Ongoing research by + scientists in the Atmospheric Chemistry and Dynamics Laboratory at NASA’s + Goddard Space Flight Center and new research funded + by NASA's Rapid Response and Novel research in the Earth Sciences + (RRNES) program element seek to better understand the atmospheric effects + of the COVID-19 shutdowns. +
++ 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 + 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. +
++ 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. +
++ 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. +
++ 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. +
++ 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. +
++ Nitrogen dioxide data courtesy of NASA Goddard Space Flight Center's Atmospheric Chemistry and Dynamics Laboratory using OMI data from the Aura satellite. +
+NASA Features
+Explore the Data
+Explore the Missions
+ ++ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure + molestias deserunt blanditiis veritatis, porro exercitationem + quaerat pariatur fugit nam iusto cum ullam animi? Velit + voluptatibus provident deserunt, corrupti natus porro. + Expedita repudiandae qui at ab eveniet nihil laborum eligendi + numquam nemo error, fuga, quasi natus debitis. Soluta labore + sed, rem autem alias accusamus dignissimos, nam aut suscipit + voluptas, harum nemo! +
++ Porro aliquid sed veritatis cumque maiores adipisci ea et + perspiciatis officia deserunt perferendis assumenda mollitia + ab nihil quas similique aspernatur labore ipsa asperiores, eum + minima repudiandae, at fugiat! Totam, delectus! Ab aut + necessitatibus delectus pariatur eaque eveniet velit + consequuntur nam odio minus. Non est reiciendis, eveniet aut, + ut esse ratione libero temporibus inventore, enim vitae alias + necessitatibus error pariatur in. +
+{ind.description}
} -Detailed information for the area being viewed and/or interacted by the user.
- )} -{group.prose}
+{ind.description}
} +{ind.notes}
} +