Presented at All Things Open 2022 Presented by David Calhoun Title: Visualizing Large Greenhouse Gas Datasets in the Browser With deck.gl Abstract: Climate change through human-caused greenhouse gases (GHG) is something that increasingly concerns us all. In order to start curbing these emissions, we need a way to visualize where they are coming from and who is emitting worldwide. But it's not all doom and gloom! The good news here is that GHG data is becoming more and more available, and it turns out we have the visualization tools available right in our browsers! After listening to this talk, folks will know not only where to find GHG data, but also how to visualize these large datasets using deck.gl.

1. Visualizing Large Greenhouse Gas Datasets
in the Browser With deck.gl
All Things Open 2022
David Calhoun, Lead Frontend @ MethaneSAT
Slides: bit.ly/deckgl-ato
Code: bit.ly/deckgl-ato-github

2. Slides: bit.ly/deckgl-ato
MethaneSAT (methanesat.org)
● Subsidiary of the Environmental Defense Fund.
● Launching a satellite 🛰 to get better visibility into worldwide methane
emissions contributing to climate change.
○ Satellite -> Data -> Visualization -> Action. All of these are hard.
● Why methane (CH4)?
○ Cutting methane quickly could slow warming by 30%
○ Flatten the curve! Buys us more time to decarbonize.

3. Slides: bit.ly/deckgl-ato
deck.gl
● WebGL-powered visualization framework for large-scale datasets.
● History
○ 2015: created for internal use at Uber
○ 2016: open-sourced by Uber
○ 2018: kepler.gl geospatial toolbox announced
○ 2020: moved to Open Governance model under vis.gl umbrella

4. Slides: bit.ly/deckgl-ato
Is deck.gl right for you?
● Geospatial dataset recommended.
○ Vector ideally (CSV or GeoJSON).
○ For raster data: deck.gl-raster.
● Thousands to millions of points to display.
○ Alternatively, Mapbox GL is also very capable!
● Need for interactivity (e.g. clientside styling, data filtering).
● Need for 3D.
● ⚠️ May not perform well on mobile devices with limited memory.

5. Slides: bit.ly/deckgl-ato
deck.gl
Integrations:
● React
● Pure JavaScript, TypeScript
● Python
● R (mapdeck)
● C++
● Vega
Map providers:
● Mapbox
● ArcGIS
● CARTO
● Google Maps

6. Slides: bit.ly/deckgl-ato
deck.gl examples

7. Slides: bit.ly/deckgl-ato
Let's build!
● Goal: Where are the biggest methane emissions and who is responsible?
● EPA Greenhouse Gas Reporting Program (GHGRP) (units: tons methane
CO2 equivalent)
○ Company estimated emissions reported to the EPA in 2021.
○ ⚠️ Caveat: this data underestimates significantly.
○ ~6,000 data points with metadata (283 KB gzipped down the wire, 727 KB
uncompressed)
● Full code: bit.ly/deckgl-ato-github

8. Slides: bit.ly/deckgl-ato
import DeckGL from 'deck.gl';
import Map from 'react-map-gl';
...
<DeckGL
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
controller={true}
>
<Map
style={{ width: '100vw', height: '100vh' }}
mapStyle="mapbox://styles/mapbox/light-v10"
mapboxAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
/>
</DeckGL>
...

9. Slides: bit.ly/deckgl-ato

10. Slides: bit.ly/deckgl-ato
import DeckGL, { ScatterplotLayer } from 'deck.gl';
import { registerLoaders } from '@loaders.gl/core';
import { CSVLoader } from '@loaders.gl/csv';
registerLoaders(CSVLoader);
<DeckGL
layers={[
new ScatterplotLayer({
...
id: 'scatterplot-layer',
data: './epa-ch4-2021.csv',
radiusMinPixels: 1,
getPosition: ({ Longitude, Latitude }) => [Longitude, Latitude]
})
]}
...
>
...

11. Slides: bit.ly/deckgl-ato

12. Slides: bit.ly/deckgl-ato
import { scaleRadial } from 'd3-scale';
const MAX_METHANE_TONS_CO2EQUIVALENT = 2268589;
const MAX_RADIUS_PIXELS = 25;
const radiusScale = scaleRadial()
.domain([1, MAX_METHANE_TONS_CO2EQUIVALENT])
.rangeRound([1, MAX_RADIUS_PIXELS]);
...
new ScatterplotLayer({
...
radiusUnits: 'pixels',
getRadius: ({ methane }) => radiusScale(methane),
getFillColor: [129, 15, 124],
opacity: 0.4
})
...

13. Slides: bit.ly/deckgl-ato

14. Slides: bit.ly/deckgl-ato
import { DataFilterExtension } from '@deck.gl/extensions';
...
new ScatterplotLayer({
...
getFilterValue: ({ methane }) => methane,
filterRange: [500000, MAX_METHANE_TONS_CO2EQUIVALENT],
extensions: [new DataFilterExtension({ filterSize: 1 })]
})
...

15. Slides: bit.ly/deckgl-ato

16. Slides: bit.ly/deckgl-ato
const [lowerRange, setLowerRange] = useState(1);
...
new ScatterplotLayer({
...
filterRange: [lowerRange, MAX_METHANE_TONS_CO2EQUIVALENT],
updateTriggers: {
filterRange: lowerRange
}
})
...
</DeckGL>
<input
type="range"
onChange={(event) => setLowerRange(parseInt(event.target.value))}
min={1}
max={MAX_METHANE_TONS_CO2EQUIVALENT}
value={lowerRange}
/>

17. Slides: bit.ly/deckgl-ato

18. Slides: bit.ly/deckgl-ato
const [pointDetails, setPointDetails] = useState('');
...
new ScatterplotLayer({
...
pickable: true,
highlightColor: [191, 211, 230],
autoHighlight: true,
onHover: (data) => {
const { industry, facility, methane } = data.object;
setPointDetails(`Methane Tons CO2 equivalent: ${methane}n
Industry: ${industry}n
Facility: ${facility}`);
}
})
...
</DeckGL>
<div className="point-details">{pointDetails}</div>
...

19. Slides: bit.ly/deckgl-ato

20. Slides: bit.ly/deckgl-ato
Free methane datasets (satellite, light
aircraft)
● Methane Emissions (kg/hr units)
○ MethaneSAT (coming soon)
○ PermianMAP (CSV, Permian Basin)
○ CARB Methane Source Finder (CSV, California)
● Methane Concentrations (ppb units)
○ TROPOMI (netCDF, worldwide)
■ GHGSat's PULSE visualization
● EOG gas flaring sites (VIIRS satellite) (Excel, worldwide)

21. Slides: bit.ly/deckgl-ato
More Datasets relevant for Greenhouse Gas
(GHG)
● Bottom-up estimate data
○ EPA Greenhouse Gas Reporting Program (GHGRP) (Excel, US)
○ EDGAR (Excel, worldwide)
● Infrastructure context
○ EIA oil and gas basin boundaries (Shapefile, US)
○ HIFLD oil and gas infrastructure (wells, etc) (CSV [+more], US)

22. David Calhoun
dcalhoun@methanesat.org
@franksvalli
…now go use your knowledge for great things!
Thank you!
Slides: bit.ly/deckgl-ato
Code: bit.ly/deckgl-ato-github