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.

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

17 views

Published on

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.

Published in: Education
  • Create Your Own Odds Playing The Lottery ■■■ http://t.cn/Airfq84N
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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!

×