Cross-Platform 2D & 3D data visualizations with JavaScript

Cross-platform interactive visualizations with HTML5 & JavaScript: Canvas, WebGL, three.js - together with SignalR. In Action!

Transcript

1. GUCKST DU! CROSS-PLATTFORM 2D- & 3D- DATENVISUALISIERUNG IN JAVASCRIPT Christian Liebel, Christian Weyer thinktecture.com
2. INTRODUCTION Christian Weyer Christian Liebel christian.weyer@thinktecture.com @christianweyer christian.liebel@thinktecture.com @chris_liebel
3. AGENDA What’s Possible Demo Scenario 2D Visualization 3D Visualization Q&A
4. WHAT’S POSSIBLE WITH HTML5 AND JAVASCRIPT
5. TOUCH-ENABLED GRAPHS https://zoomcharts.com/en/gallery/all:network-graph-company-network-icons
6. REAL-TIME VIDEO MANIPULATION http://www.craftymind.com/factory/html5video/CanvasVideo.html
7. INTERACTIVE 3D VISUALIZATIONS https://www.blend4web.com/apps/webplayer/webplayer.html? load=../../assets/animation/nla_strips.json
8. …EVEN GAMES http://www.flightarcade.com/
9. DEMO SCENARIO
10. GUMMIBEARS! (Bouncing here and there and everywhere)
11. ARCHITECTURE Windows: everybody can do it ;) SignalR on Mono on Raspbian on Raspberry Pi 2 Communication: WebSockets or Server-Sent Events 2D client based on HTML5 and JavaScript 3D client based on HTML5 and JavaScript Packaging the clients as an app using Cordova
12. GOAL Visualizing real-time consumption of gummibears per region Update consumption of SouthAmerica to 13.3137317022187 Update consumption of NorthAmerica to 42.3913583840353 Update consumption of Antarctica to 83.7786154045535 Update consumption of Europe to 18.0006652489046 Update consumption of Africa to 4.14845326099586 Update consumption of Europe to 15.5524369351959 Update consumption of NorthAmerica to 19.4715459649452 Update consumption of Asia to 25.5628347470509 Update consumption of Europe to 3.95552857364278 Update consumption of SouthAmerica to 17.4139201632193 Update consumption of Antarctica to 53.6258920336672 Update consumption of Australia to 12.5058280857318
13. LET’S IMPLEMENT THE SECRET ALGORITHM…
14. 2D VISUALIZATION
15. <CANVAS> Plain bitmap for the web Content is defined by contexts Cross platform graphic manipulations High performance/Low energy consumption requestAnimationFrame
16. REQUESTANIMATIONFRAME Just in time (matches screen refresh rate) Does not execute when window is minimized or tab in the background Does not execute when browser is busy No stacking/queueing
17. BROWSER SUPPORT From http://caniuse.com/#search=canvas
18. CHARTING LIBRARIES SVG-based D3.js (open source) HighCharts (commercial) Canvas-based Chart.js (open source) ZoomCharts (commercial)
19. LIVE DEMO TOUCH-ENABLED, CROSS-PLATFORM 2D VISUALIZATION
20. LET’S BRING THIS TO ANDROID…
21. 3D VISUALIZATION
22. 3D CONTENT IN A 3D WORLD WITH 2D SCREENS scenes, cameras, rendering
23. WEBGL Web Graphics Library Hardware accelerated (GPU) New canvas rendering context webgl Proven Technology: based on OpenGL ES Can be exported from Blender and Unity
24. THREE.JS Native WebGL is complex Open-source JavaScript library High-level API abstracting WebGL (and more) Includes touch-enabled controls
25. BROWSER SUPPORT From http://caniuse.com/#search=webgl
26. MOBILE PLATFORM SUPPORT iOS 8+ Android WebView 36+ Crosswalk Windows (Phone) 8.1+
27. LIVE DEMO “If you believed they put a man on the moon, man on the moon” — R.E.M.
28. LIVE DEMO DETAILS MAKE THE DIFFERENCE
29. LET’S BRING THIS TO IOS…
30. SUMMARY Cross platform high-performance graphic manipulation 2D & 3D Hardware acceleration Supported by all major browsers and platforms Touch-enabled
31. THANK YOU! GitHub repository: https://github.com/thinktecture/DWX2015 Christian Weyer: Christian Liebel: christian.weyer@thinktecture.com christian.liebel@thinktecture.com thinktecture.com
32. RESOURCES GitHub repository Canvas documentation (MDN) Canvas 2D context specification requestAnimationFrame documentation (MDN) WebGL Specifications three.js WebGL Wiki tween.js Apache Cordova Enabling cross-platform touch interactions https://github.com/thinktecture/DWX2015 https://developer.mozilla.org/de/docs/Web/HTML/Canvas http://www.w3.org/TR/2dcontext/ https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame https://www.khronos.org/registry/webgl/specs/latest/ http://threejs.org/ https://www.khronos.org/webgl/wiki/Main_Page https://github.com/tweenjs/tween.js/ https://cordova.apache.org/ http://weblogs.thinktecture.com/christian_liebel/2015/05/enabling-cross-platform-touch- interactions-pointer-vs-touch-events.html