![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](https://image.slidesharecdn.com/visualizinglargedatasetswithjsusingdeckgl-200512084046/85/Visualizing-large-datasets-with-js-using-deckgl-27-320.jpg)
![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](https://image.slidesharecdn.com/visualizinglargedatasetswithjsusingdeckgl-200512084046/85/Visualizing-large-datasets-with-js-using-deckgl-28-320.jpg)
![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/](https://image.slidesharecdn.com/visualizinglargedatasetswithjsusingdeckgl-200512084046/85/Visualizing-large-datasets-with-js-using-deckgl-38-320.jpg)
Visualizing large datasets with js using deckgl
- 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
- 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
- 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
- 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
- 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!
- 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
- 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!