University of West Bohemia, section of Geomatics jezekjan@kma.zcu.cz September 15, 2015
There are many systems that collect continuous data of various phenomenons in time. Collected data often exceed the size where they can be visualized using straightforward techniques and advanced concepts have to be used. (Visualizing every data point can lead to over-plotting and may overwhelm users perceptual and cognitive capacities.) Our approach: Multiple views with usage of GPU WebGLayer visualization framework
There are many systems that collect continuous data of various phenomenons in time. Collected data often exceed the size where they can be visualized using straightforward techniques and advanced concepts have to be used. (Visualizing every data point can lead to over-plotting and may overwhelm users perceptual and cognitive capacities.) Our approach: Multiple views with usage of GPU WebGLayer visualization framework
State of the art Geovisualziation systems - Common GIS, Descartes, GeoVistaStudion, gva limits in size of data, slow interactivty Nanocubes, Immens - Big data, fast, but limited in combination of filters, require data preprocessing, client server communication = latency Crossfilter + D3
State of the art Geovisualziation systems - Common GIS, Descartes, GeoVistaStudion, gva limits in size of data, slow interactivty Nanocubes, Immens - Big data, fast, but limited in combination of filters, require data preprocessing, client server communication = latency Crossfilter + D3
State of the art Geovisualziation systems - Common GIS, Descartes, GeoVistaStudion, gva limits in size of data, slow interactivty Nanocubes, Immens - Big data, fast, but limited in combination of filters, require data preprocessing, client server communication = latency Crossfilter + D3
Visualization principals Information Seeking Mantra Overview first, zoom and filter, then details-on-demand Coordinated - multiple views Map visualization - interpolation, heatmap, point symbols Other visualization - histogram, line chart, parallel coordinates, scatter plot Interactivity - selection, brush&link, polybrush
Implementation Data - tabular data with spatial content Web based system Scalability to 10 5-10 6 of items
WebGLayer Big data Multiple Coordinated View library that includes the cartographic map view, brush&link and polybrush Suitable for 1 000 000 of records Interactive filtering, brushing and linking (time in th scope of 10ms) Open source JavaScript library Based on WebGL - powered by GPU (graphics processor unit), Map-Reduce on GPU for general purpose computing Integrated with OpenLayers, Leaflet, Googlemaps...
WebGLayer Big data Multiple Coordinated View library that includes the cartographic map view, brush&link and polybrush Suitable for 1 000 000 of records Interactive filtering, brushing and linking (time in th scope of 10ms) Open source JavaScript library Based on WebGL - powered by GPU (graphics processor unit), Map-Reduce on GPU for general purpose computing Integrated with OpenLayers, Leaflet, Googlemaps...
WebGLayer Figure : The user inteface
WebGLayer Data Polybrush vertices Brush ranges Data Records Shaders Polybrush shader Brush shader Data filter shader Symbol map shader Histogram shader Rasters Polybrush raster Brush raster Index raster Symbol map raster Histogram raster Figure : Workflow schema
Application examples Sensor data visualization Car accidents in UK visualization Traffic volume in Antwerp visualization OSM GPS points visualization
Sensor data visualization Figure : Sensor data visualization
Car accident visualization Figure : Sensor data visualization
OSM GPS point demo...
Javascript API WGL.addMapDimension(data.pts, map ); WGL.addHeatMapDimension(data.pts, heatmap ); var charts = []; /*SERVELITY*/ var sev = {data: data.sev, domain: [ 1, 2, 3 ], name: se WGL.addOrdinalHistDimension(sev); WGL.addLinearFilter(sev,3, sevf ); charts[ sev ] = new StackedBarChart(sev, "chart1", "accident s
WebGLayer performance benchmark 140,0 120,0 100,0 time [ms] 80,0 60,0 40,0 Crossfilter Crossfilter & WebGL map WebGLayer 20,0 0,0 0 200 400 600 800 1000 1200 number of records in thousands Figure : Comparison of Crossfilter and WebGLayer.
Source code and Live Demo? http://jezekjan.github.io/webglayer/ https://www.youtube.com/watch?v=hzk0zbnvsrw&t=14
Thank you for your attention!