Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Marko Letić

@NisamProgramer
24 - 25 October, 2019 | Hamburg, Germany
code.talks
WITH JAVASCRIPT USING DECK.GL
VISUALIZING...
ABOUT ME
• DEVELOPER ADVOCATE AND FRONT END LEAD @AVA
• TECH SPEAKER @MOZILLA
• CONFERENCE ORGANIZER @ARMADA JS
• ”WORKING...
WHAT IS DATA VISUALIZATION?
IN A NUTSHELL:

DATA VISUALIZATION IS THE VISUAL REPRESENTATION OF INFORMATION
WHY?
• HELP PEOPLE UNDERSTAND INFORMATION QUICKLY
• SPOT RELATIONSHIPS AND PATTERNS
• SEE THE SIGNIFICANCE OF THE DATA POI...
HISTORY
Estimates of the distance in longitude between Toledo and Rome

Michael Florent van Langren (1644)

Dutch mathemat...
HISTORY
Cholera outbreak in Soho, London 1854

John Snow

English physician
PRESENT
Ebola outbreak

Democratic Republic of the Congo
Refugee crisis

Europe
Hurricane Dorian

Bahamas
Humanitarian cri...
VISUALIZATION
IS A GREAT WAY TO LET YOUR DATA SPEAK!
JAVASCRIPT!
1. WORKS IN THE BROWSER

2. VERSATILE

3. AWESOME COMMUNITY
TOOLS
AND RESOURCES
D3.js
• Built by Uber Open Source
• Large-scale WebGL-powered Data Visualization
• A Layered Approach to Data Visualization
• Hi...
Core Layers

https://deck.gl/#/examples/overview
High-Precision Computations in the GPU

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

https://deck.gl/#/examples/core-layers/trips-layer
Real-time data aggregation and filtering
Not-map-related data visualization
HOW DOES IT WORK?
Your React/Angular/Vue.js appWeb UI
MapboxGL (framework wrapper)Base map
DECK.GLVisual overlays
LUMA.GLData binding
GLOBAL...
REACT APP OVERVIEW
Mapbox integration with deck.gl

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

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

Integrated usage (single context)
USING IT WITH REACT - BASICS
/// app.js
import React from 'react';
import DeckGL from '@deck.gl/react';
import {LineLayer}...
USING IT WITH REACT - BASICS
// Set your mapbox access token here
const MAPBOX_ACCESS_TOKEN = 'MAPBOX_ACCESS_TOKEN';
// In...
USING IT WITH REACT - BASICS
// DeckGL react component
class App extends React.Component {
render() {
const layers = [
new...
React + deck.gl example - flightmapper.io

https://flightmapper.io/maps/dbabbs

Run it on your phones!
Angular + deck.gl example

https://beginor.github.io/ng-deck-gl/

Run it on your phones!
REAL LIFE EXAMPLES
Kepler.gl is a powerful open source geospatial analysis tool for large-scale data sets.
Autonomous Visualization System (AVS) is a fast, powerful, web-based 3D visualization toolkit
for building applications fr...
streetscape.gl is a toolkit for visualizing autonomous and robotics data in the XVIZ protocol
Foresight AI

https://www.foresight.ai
Ascii Video Player

Felix the cat
DECK.GL REFERENCES
• DECK.GL WEBSITE - https://deck.gl
• VIS.GL - https://medium.com/vis-gl
• Nico Belmonte - YOUTUBE: [Vi...
DATA VIZ REFERENCES
• Michael Friendly, York University - Milestones project - http://datavis.ca/milestones/
• Alberto Cai...
SAVE THE WORLD!
AND FOLLOW @NisamProgramer TO FIND OUT MORE…
Marko Letić

@NisamProgramer
24 - 25 October, 2019 | Hamburg, Germany
code.talks
WITH JAVASCRIPT USING DECK.GL
VISUALIZING...
JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story
JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story
JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story
JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story
Upcoming SlideShare
Loading in …5
×

of

JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 1 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 2 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 3 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 4 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 5 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 6 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 7 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 8 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 9 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 10 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 11 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 12 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 13 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 14 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 15 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 16 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 17 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 18 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 19 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 20 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 21 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 22 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 23 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 24 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 25 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 26 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 27 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 28 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 29 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 30 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 31 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 32 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 33 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 34 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 35 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 36 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 37 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 38 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 39 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 40 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 41 JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story Slide 42
Upcoming SlideShare
What to Upload to SlideShare
Next

1 Like

Share

JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story

Did you know that the beginnings of data visualization are strongly tied to solving some of the biggest problems humanity has ever faced? Wouldn’t it be more interesting to say that you’re not a doctor, but you do save lives than to say you’re just a developer?
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. We’ll see how our code can tell a story and how that story can potentially save lives. 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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

JS Fest 2019/Autumn. Marko Letic. Saving the world with JavaScript: A Data Visualization story

  1. 1. Marko Letić
 @NisamProgramer 24 - 25 October, 2019 | Hamburg, Germany code.talks WITH JAVASCRIPT USING DECK.GL VISUALIZING LARGE DATASETS
  2. 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. 3. WHAT IS DATA VISUALIZATION? IN A NUTSHELL:
 DATA VISUALIZATION IS THE VISUAL REPRESENTATION OF INFORMATION
  4. 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. 5. HISTORY Estimates of the distance in longitude between Toledo and Rome
 Michael Florent van Langren (1644)
 Dutch mathematician and astronomer
  6. 6. HISTORY Cholera outbreak in Soho, London 1854
 John Snow
 English physician
  7. 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. 8. VISUALIZATION IS A GREAT WAY TO LET YOUR DATA SPEAK!
  9. 9. JAVASCRIPT! 1. WORKS IN THE BROWSER
 2. VERSATILE
 3. AWESOME COMMUNITY
  10. 10. TOOLS AND RESOURCES
  11. 11. D3.js
  12. 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
  13. 13. Core Layers
 https://deck.gl/#/examples/overview
  14. 14. High-Precision Computations in the GPU
 https://deck.gl/#/examples/core-layers/scatterplot-layer
  15. 15. High-Precision Computations in the GPU
 https://deck.gl/#/examples/core-layers/trips-layer
  16. 16. Real-time data aggregation and filtering
  17. 17. Not-map-related data visualization
  18. 18. HOW DOES IT WORK?
  19. 19. Your React/Angular/Vue.js appWeb UI MapboxGL (framework wrapper)Base map DECK.GLVisual overlays LUMA.GLData binding GLOBAL OVERVIEW
  20. 20. REACT APP OVERVIEW
  21. 21. Mapbox integration with deck.gl
 Standard usage (separate context)
  22. 22. Mapbox integration with deck.gl
 Integrated usage (single context)
  23. 23. Mapbox integration with deck.gl
 Integrated usage (single context)
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. React + deck.gl example - flightmapper.io
 https://flightmapper.io/maps/dbabbs
 Run it on your phones!
  28. 28. Angular + deck.gl example
 https://beginor.github.io/ng-deck-gl/
 Run it on your phones!
  29. 29. REAL LIFE EXAMPLES
  30. 30. Kepler.gl is a powerful open source geospatial analysis tool for large-scale data sets.
  31. 31. Autonomous Visualization System (AVS) is a fast, powerful, web-based 3D visualization toolkit for building applications from your autonomous and robotics data
  32. 32. streetscape.gl is a toolkit for visualizing autonomous and robotics data in the XVIZ protocol
  33. 33. Foresight AI
 https://www.foresight.ai
  34. 34. Ascii Video Player
 Felix the cat
  35. 35. 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/
  36. 36. 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
  37. 37. SAVE THE WORLD! AND FOLLOW @NisamProgramer TO FIND OUT MORE…
  38. 38. Marko Letić
 @NisamProgramer 24 - 25 October, 2019 | Hamburg, Germany code.talks WITH JAVASCRIPT USING DECK.GL VISUALIZING LARGE DATASETS THANK YOU!
  • Excelsoft

    May. 15, 2020

Did you know that the beginnings of data visualization are strongly tied to solving some of the biggest problems humanity has ever faced? Wouldn’t it be more interesting to say that you’re not a doctor, but you do save lives than to say you’re just a developer? 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. We’ll see how our code can tell a story and how that story can potentially save lives. 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.

Views

Total views

273

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

1

×