1. Scaling Charts with Design and GPUs Leo Meyerovich (@LMeyerov) CEO of Graphistry.com | UC Berkeley 1

2. Visibility 2

3. Visibility through design + speed 3

4. Histogram of Voter Turnout by Town 4 0%25%50% 75%100% Voter Turnout # Towns Most towns had ~40% people vote ballot box stuffing?

5. 5

6. Opposition Incumbent Tiny square shows town size (area) and vote (color) 6

7. Filter for towns w/ high turnout 7

8. Tag suspicious with black 8

9. 9

10. For visibility, speed  design 10

11. Problem: Plot 10+ Time Series Signals 11

12. Design  200 Time Series Signals 100 s 0 s 12

13. Speed  Pan/Zoom Interactions 38 s 37 s 13

14. CPU Bottlenecks: naïve and offline Transform Parse Layout Render 0ms 1600ms real- time is 30 ms 14

15. Prep Optimize Binary Data, Multicore Layout, GPU Render Layout Render 15 0ms 1600ms Real-time interaction Stream from server 12MB+/s

16. Graphs: Placing Nodes and Edges 16

17. 17 Direct Feedback on Settings

18. Uber: Trip Start to End 18

19. Direct Edge Placement: Overplotting 19

20. Speed  Design  Edge Bundling 20

21. 21

22. 22  web

23. Bare Metal in the Browser Sequential Multicore GPU 5 X 4+ cores 1024 lanes SIMD 4 lanes 23

24. S UPERCONDUCTOR : Parallel JS Viz Engine HTML data CSS styling JS script Pixels Parser Selectors Layout Renderer JavaScript VM Renderer.GL webpage 24 Layout.CL Selectors.CL GPU data styling widgets data viz Compiler Parser.js BROWSERSUPERCONDUCTOR.js

25. Leaf Layout as Parallel Tree Traversals w,h x,y … 1. Works for all data sets 2. Compiler: CSS  Schedule logical joins logical spawns Parallelism in each traversal! 25

26. parallel for loop level synchronous GPU Traversals: Flat & Level-Synchronous level 1 Tree level n w h x y Nodes in arrays flat Array per attribute Compiler handles transform of code & data 26

27. More Scalable Designs Immens (Stanford) Nanocubes (AT&T) MapD (MIT) Abstract Rendering (Continuum)Synerscope 27

28. 28

29. Achieve data visibility through hardware-accelerated designs (and deploy on the web ) 29

30. Visualize Magnitudes More Data in the Browser Leo Meyerovich (@LMeyerov) CEO of Graphistry.com | UC Berkeley 30

31. Leaf Layout as Parallel Tree Traversals w,h x,y … 1. Works for all data sets 2. Compiler: CSS  Schedule logical joins logical spawns Parallelism in each traversal! 31

32. parallel for loop level synchronous GPU Traversals: Flat & Level-Synchronous level 1 Tree level n w h x y Nodes in arrays flat Array per attribute Compiler handles transform of code & data 32

33. L2: 1MB RAM: 2GB 4 3 2 4 3 2 256-way SIMT GPGPU core 1 4-way SIMD L1d: 32KB Today’s Supercomputer-in-a-Pocket core 1 Prefetch Engine 1 33 Challenge: Parallelize Data Visualization Phone 16-lane CPU 1024-lane GPU

34. circ(…) Problem: Dynamic Memory Allocation on GPU? square(…) rect(…); … line(…); … rect(…); … oval(…) 34 1.0 0.8 0.5 0.2 0 0.2 function circ (x,y,r) { buffer = new Array(r * 10) for (i = 0; i < r * 10; i++) buffer[i] = cos(i) } dynamic allocation 

35. Dynamic Allocation as SIMD Traversals allocCirc(…)  4 allocRect(…)  6 allocLine(…)  6 allocRect(…)  7 fillCirc(…) fillRect(…) fillLine(…) fillRect(…) 1. Prefix sum for needed space 2. Allocate buffers 3. Distribute offsets & compute 4. Give OpenGL buffer pointer 35 1.0 0.8 0.5 0.2 0 0.2 1.0 0.8 0.5 0.2 1.0 0.8 0.5 0.2 0 0.2

36. CPU vs. GPU for Election Treemap: 5 traversals over 100K nodes 36 WebCL: 30X WebCL: 70X COMBINED: 54X !