Interactive visualization of big data

Transcription

1 University of West Bohemia, section of Geomatics September 15, 2015

2 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

3 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

4 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

5 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

6 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

7 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

8 Implementation Data - tabular data with spatial content Web based system Scalability to of items

9 WebGLayer Big data Multiple Coordinated View library that includes the cartographic map view, brush&link and polybrush Suitable for 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...

10 WebGLayer Big data Multiple Coordinated View library that includes the cartographic map view, brush&link and polybrush Suitable for 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...

11 WebGLayer Figure : The user inteface

12 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

13 Application examples Sensor data visualization Car accidents in UK visualization Traffic volume in Antwerp visualization OSM GPS points visualization

14 Sensor data visualization Figure : Sensor data visualization

15 Car accident visualization Figure : Sensor data visualization

16 OSM GPS point demo...

17 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

18 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, number of records in thousands Figure : Comparison of Crossfilter and WebGLayer.

19 Source code and Live Demo?

20 Thank you for your attention!