Slides from a talk presented at code.talks 2019 conference in Hamburg, Germany. Note: This is a keynote presentation converted to PDF. Originally it has videos that are not included here. Talk description: When talking about data visualization and JavaScript your mind usually goes to D3.js. But if our data has a location-based representation, we are faced with a limited choice. The main topic of this talk is to introduce the audience with deck.gl, an open-source WebGL-powered library developed by Uber that allows us to create beautiful data visualizations of large datasets and raise the level of interactivity for the user on a whole new level. A short introduction to the library and it’s API will be demonstrated along with practical use-cases, live-code examples and it’s integration with popular frameworks such as Angular and React. Video: https://www.youtube.com/watch?v=sG25WdhbsFg

1. Marko Letić
@NisamProgramer
24 - 25 October, 2019 | Hamburg, Germany
code.talks
WITH JAVASCRIPT USING DECK.GL
VISUALIZING LARGE DATASETS

2. ABOUT ME
• DEVELOPER ADVOCATE AND FRONT END LEAD @AVA
• TECH SPEAKER @MOZILLA
• CONFERENCE ORGANIZER @ARMADA JS
• ”WORKING” ON MY PHD IN DATA VISUALIZATION
• JAVASCRIPT ENTHUSIAST
• I ALSO LOVE CSS - OMG!
• TWITTER: @NisamProgramer

3. WHAT IS DATA VISUALIZATION?
IN A NUTSHELL:
DATA VISUALIZATION IS THE VISUAL REPRESENTATION OF INFORMATION

4. WHY?
• HELP PEOPLE UNDERSTAND INFORMATION QUICKLY
• SPOT RELATIONSHIPS AND PATTERNS
• SEE THE SIGNIFICANCE OF THE DATA POINTS THROUGH A PARTICULAR LENS
• COMMUNICATE EFFECTIVELY BY TELLING DATA-DRIVEN STORIES
• MAKE THE WORLD A BETTER PLACE!

5. HISTORY
Estimates of the distance in longitude between Toledo and Rome
Michael Florent van Langren (1644)
Dutch mathematician and astronomer

6. HISTORY
Cholera outbreak in Soho, London 1854
John Snow
English physician

7. PRESENT
Ebola outbreak
Democratic Republic of the Congo
Refugee crisis
Europe
Hurricane Dorian
Bahamas
Humanitarian crisis
Yemen
Human rights violations
World
Privacy breach
Facebook
Housing Crisis
San Francisco
Climate Change
World

8. VISUALIZATION
IS A GREAT WAY TO LET YOUR DATA SPEAK!

9. JAVASCRIPT!
1. WORKS IN THE BROWSER
2. VERSATILE
3. AWESOME COMMUNITY

10. TOOLS
AND RESOURCES

11. D3.js

12. • Built by Uber Open Source
• Large-scale WebGL-powered Data Visualization
• A Layered Approach to Data Visualization
• High-Precision Computations in the GPU
• React and Mapbox GL Integrations
deck.gl

14. Core Layers
https://deck.gl/#/examples/overview

15. High-Precision Computations in the GPU
https://deck.gl/#/examples/core-layers/scatterplot-layer

16. High-Precision Computations in the GPU
https://deck.gl/#/examples/core-layers/trips-layer

17. Real-time data aggregation and filtering

18. Not-map-related data visualization

20. HOW DOES IT WORK?

21. Your React/Angular/Vue.js appWeb UI
MapboxGL (framework wrapper)Base map
DECK.GLVisual overlays
LUMA.GLData binding
GLOBAL OVERVIEW

22. REACT APP OVERVIEW

23. Mapbox integration with deck.gl
Standard usage (separate context)

24. Mapbox integration with deck.gl
Integrated usage (single context)

25. Mapbox integration with deck.gl
Integrated usage (single context)

26. USING IT WITH REACT - BASICS
/// app.js
import React from 'react';
import DeckGL from '@deck.gl/react';
import {LineLayer} from '@deck.gl/layers';
import {StaticMap} from 'react-map-gl';
1. Import the libraries

27. USING IT WITH REACT - BASICS
// Set your mapbox access token here
const MAPBOX_ACCESS_TOKEN = 'MAPBOX_ACCESS_TOKEN';
// Initial viewport settings
const initialViewState = {
longitude: -122.41669,
latitude: 37.7853,
zoom: 13,
pitch: 0,
bearing: 0
};
// Data to be used by the LineLayer
const data = [{sourcePosition: [-122.41669, 37.7853], targetPosition:
[-122.41669, 37.781]}];
2. Set initial values for the map and the LineLayer

28. USING IT WITH REACT - BASICS
// DeckGL react component
class App extends React.Component {
render() {
const layers = [
new LineLayer({id: 'line-layer', data})
];
return (
<DeckGL
initialViewState={initialViewState}
controller={true}
layers={layers}
>
<StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
</DeckGL>
);
}
}
3. Create the component

29. React + deck.gl example - flightmapper.io
https://flightmapper.io/maps/dbabbs
Run it on your phones!

30. Angular + deck.gl example
https://beginor.github.io/ng-deck-gl/
Run it on your phones!

31. REAL LIFE EXAMPLES

32. Kepler.gl is a powerful open source geospatial analysis tool for large-scale data sets.

33. Autonomous Visualization System (AVS) is a fast, powerful, web-based 3D visualization toolkit
for building applications from your autonomous and robotics data

34. streetscape.gl is a toolkit for visualizing autonomous and robotics data in the XVIZ protocol

36. Foresight AI
https://www.foresight.ai

37. Ascii Video Player
Felix the cat

38. DECK.GL REFERENCES
• DECK.GL WEBSITE - https://deck.gl
• VIS.GL - https://medium.com/vis-gl
• Nico Belmonte - YOUTUBE: [Visualization Nights] deck.gl
• Lezhi Li - YOUTUBE: [Uber Open Summit Sofia 2019] Visualization Frameworks at Uber
• Xiaoji Chen - http://www.xiaoji-chen.com/

39. DATA VIZ REFERENCES
• Michael Friendly, York University - Milestones project - http://datavis.ca/milestones/
• Alberto Cairo - The Truthful Art - http://albertocairo.com/
• Hans Rosling - Factfulness: Ten reasons we’re wrong about the world
• MapBox blog - https://blog.mapbox.com/
• Nightingale: The Journal of the Data Visualization Society - https://medium.com/nightingale

40. SAVE THE WORLD!
AND FOLLOW @NisamProgramer TO FIND OUT MORE…

42. Marko Letić
@NisamProgramer
24 - 25 October, 2019 | Hamburg, Germany
code.talks
WITH JAVASCRIPT USING DECK.GL
VISUALIZING LARGE DATASETS
THANK YOU!