All Projects → AdriSolid → deck.gl-time-series-widget

AdriSolid / deck.gl-time-series-widget

Licence: other
A React Time Slider implementation for DECK.GL - (non)temporal data - by CPU filtering ⌛

Programming Languages

javascript
184084 projects - #8 most used programming language
SCSS
7915 projects
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to deck.gl-time-series-widget

Editor
An open source visual editor for the 'Mapbox Style Specification'
Stars: ✭ 1,167 (+6042.11%)
Mutual labels:  mapbox-gl, maps, mapping, mapbox-gl-js
Mapdeck
R interface to Deck.gl and Mapbox
Stars: ✭ 296 (+1457.89%)
Mutual labels:  mapbox-gl, maps, mapbox-gl-js, mapbox
angular-mapboxgl-directive
AngularJS directive for Mapbox GL
Stars: ✭ 43 (+126.32%)
Mutual labels:  mapbox-gl, maps, mapbox-gl-js, mapbox
Osm Liberty
A free Mapbox GL basemap style for everyone
Stars: ✭ 231 (+1115.79%)
Mutual labels:  mapbox-gl, maps, mapbox-gl-js
Mapbox Gl Native Android
Interactive, thoroughly customizable maps in native Android powered by vector tiles and OpenGL
Stars: ✭ 135 (+610.53%)
Mutual labels:  mapbox-gl, maps, mapbox
maptalks.mapboxgl
MapboxglLayer for maptalks.js
Stars: ✭ 51 (+168.42%)
Mutual labels:  mapbox-gl, mapbox-gl-js, mapbox
vue-mapbox-map
A minimalist Vue component wrapping Mapbox GL or MapLibre GL for dynamic interaction!
Stars: ✭ 26 (+36.84%)
Mutual labels:  maps, mapbox-gl-js, mapbox
react-mapboxgl
Declarative React components for mapbox-gl-js.
Stars: ✭ 15 (-21.05%)
Mutual labels:  mapbox-gl, mapbox-gl-js, mapbox
Mappa
A canvas wrapper for Maps 🗺 🌍
Stars: ✭ 290 (+1426.32%)
Mutual labels:  mapbox-gl, maps, mapbox
Uber React
Uber-like project in React Native
Stars: ✭ 151 (+694.74%)
Mutual labels:  uber, maps, mapbox
Mapbox Gl Native
Interactive, thoroughly customizable maps in native Android, iOS, macOS, Node.js, and Qt applications, powered by vector tiles and OpenGL
Stars: ✭ 4,091 (+21431.58%)
Mutual labels:  mapbox-gl, maps, mapbox
React Map Gl
React friendly API wrapper around MapboxGL JS
Stars: ✭ 6,244 (+32763.16%)
Mutual labels:  uber, mapbox-gl, mapbox-gl-js
Road Orientation Map
A visualization of road orientations on an interactive map
Stars: ✭ 254 (+1236.84%)
Mutual labels:  maps, mapbox-gl-js, mapbox
Azuremapscodesamples
A set of code samples for the Azure Maps web control.
Stars: ✭ 167 (+778.95%)
Mutual labels:  maps, mapping, gis
react-map-gl-cluster
Urbica React Cluster Component for Mapbox GL JS
Stars: ✭ 27 (+42.11%)
Mutual labels:  mapbox-gl, maps, mapbox-gl-js
Gwt Ol
GWT wrapper for OpenLayers 3+ using JSInterop
Stars: ✭ 57 (+200%)
Mutual labels:  maps, mapping, gis
Iclient Javascript
Modern GIS Web Client for JavaScript, based on Leaflet\OpenLayers\MapboxGL-JS\Classic(iClient8C), enhanced with ECharts\D3\MapV etc. Contributed by SuperMap & community.
Stars: ✭ 593 (+3021.05%)
Mutual labels:  mapping, mapbox-gl-js, gis
Mapbox Gl Js
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
Stars: ✭ 8,017 (+42094.74%)
Mutual labels:  mapbox-gl, mapbox-gl-js, mapbox
Martin
Blazing fast and lightweight PostGIS vector tiles server
Stars: ✭ 540 (+2742.11%)
Mutual labels:  mapbox-gl, mapbox-gl-js, mapbox
svelte-mapbox
MapBox Map and Autocomplete components for Svelte (or Vanilla JS)
Stars: ✭ 267 (+1305.26%)
Mutual labels:  maps, mapping, mapbox

DECK.GL Time Slider implementation demo

I need some caffeine to work :)

Buy Me a Coffee at ko-fi.com

App thumb

A React-Redux Time Slider implementation that allows you to render temporal (or even non-temporal) data. The example is fully integrated with the DECK.GL library, a WebGL-powered framework for visual exploratory data analysis of large datasets. The example is filtering the data array on the CPU.

Component gif

This demo shows a scatterplot meteorites world layer.

Description

It uses a simple Material UI slider and keeps the features until the end, that means that it is holding the features rendered. A bar chart is showing the data per date; an 'on hover' event shows the numeric accumulation in a little left container. It is also possible to restart the animation clicking the 'undo' button.

To run

  • You'll need to have git and node installed in your system.
  • Fork and clone the project:
git clone https://github.com/AdriSolid/DECK.GL-Time-Slider.git
  • Then install the dependencies:
npm install
  • Start, check => localhost:8080
npm start
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].