1. 1

2. 2 “Well-designed graphics are usually the simplest” Big Data is Different: going from Data Reporting to Knowledge Discovery … small & static charts enough?

3. Ex: How to Report Voter Turnout 3 Swedes Like Voting 0%100 % 50% Voter Turnout # Votes Mexic o Democracy?  Bell Curve Democracy?  Bell Curve Mystery Country Abnormal curve; can be voter fraud!

4. 4 Precrafted message, not knowledge discovery! demo: fraud analysis

5. 5

6. Interactive OpenGL Platform Demands 6 Scale Customizable JavaScript

7. 7 Big Data Viz Parallel JS Parallel Framework *Effective* Parallel JS

8. Platform: JavaScript is the New Assembly 8 parallel multicore: SIMD: HTML5 Hardware Access GPU: Low-level, how to exploit? Low-level, how to exploit?

9. 9 Data Viz Parallel JS Parallel Framework *Effective* Parallel JS Superconductor specializes for data visualization Superconductor specializes for data visualization

10. Superconductor’s Domain Specific Languages 10 data paintlayout stylize Parallel & High-Level Language for Each?

11. DSL 1: Data via JSON 11 JavaScript, Ruby, Python, Java, … Easy… until 1-10s data loading

12. Parsing Demo 12

13. Optimizing JSON Parsing 13 raw.json: 23MB compress + zip csr1.zip (0.2MB), …, csr12.zip server browser Parallel parsing easy! … when you fix the format big JavaScript object Each worker: 1.native JSON parse  csr.json 2.decompress  obj.json 3. 0-copy return: typed arrays! parallel parse partition raw1.json(1.9MB), …, raw12.json

14. DSL 2: Custom Layout/Rendering Compiler treemap.ftl Parallel code WebCL+WebGL tree: SC_DOM.js LayoutEngine.js offline 14 browser

15. class HBox : Node children: left : Node right: Node constraints: w := left.w + right.w … x y x y y y y w h w h x x x h w Writing a Custom Layout: Super CSS! 10px 5px Root HBox Leaf HBox left right w x y h w h w h input: x, y var: w, h [Kastens 1980, Saraiva 2003] [WWW 2010, PPOPP 2013] 2. Single-assignment 1.Local 15

16. Leaf Compute: Layout as Tree Traversals w,h x,y … 1. Works for all data sets 2. Compiler automatically parallelizes! [WWW 2010] h0=max(h1,h2) w0=f (w1,w2) document tree constraints on node attributes logical joins logical spawns Parallel Parallelism in each traversal! 16

17. Layout DSL is Flexible! 17 multicore GPU

18. 18 Big Data Viz Parallel JS Parallel Framework *Effective* Parallel JS

19. Animation & Interaction 19 Layout Modification Layout fast enough for real-time loop!

20. 20 First Rule of GPU Club: Don’t Talk to the GPU Budget: 30ms = 33fps Maxed out by 300 small messages!

21. Small Interactions: JavaScript Proxy 21 1. Small read/writes: JavaScript var w = root.getWidth(); //sc.js proxies read from GPU 2. Animation: rerun layout! root.setHeight(0.5); //sc.js proxies write to GPU layout();

22. Bigger Interactions: CSS Selectors* 22 state precinct { height: 5 } * buggy selectors.j s myStylesheet.webCL … tree traversal, same as layout! [WWW 2010]

23. Layout on GPU level 1 JSON Tree level n w h x y Nodes in arrays Array per attribute Superconductor does this for you. 23 Benefits 1.Parallelism! 2.Data never leaves GPU : Must “Flatten” Tree

24. How to Compute Layout on GPU: Level-synchronous Breadth-First level 1 JSON Tree level n [Blelloch 93] 24 parallel for loop (level synchronous)

25. circ(…); … Problem: Layout->Rendering Buffer Allocation? function circ(x,y,w,h) { buffer = malloc(w*10); loop: buffer[i] = cos(i); … } //alloc + tessellate + … Dynamic allocation  square(…) rect(…); … line(…); … rect(…); … oval(…)

26. Optimizing Buffer Allocation & Passing allocCirc(…); … allocRect(…); … allocLine(…); … allocRect(…); … fillCirc(…); … fillRect(…); … fillLine(…); … fillRect(…); … 1. Prefix sum for needed space 2. Allocate buffers 3. Fill vertex buffers in parallel 4. Give OpenGL buffers pointer

27. CPU vs. GPU for Election Treemap: 5 traversals over 100K nodes Array-based: 14X speedup 27 WebCL: 31X WebCL: 5X COMBINED: 54X !

28. Multicore Parsing w/ Web Workers 28 2012 MacBook Pro (2.6GHz quadcore i7 w/ 8GB) 290ms 600ms 2.7 s

29. Recap: Parallel Arch HTML data CSS styling JS script Pixels Parser Selectors Layout Renderer JavaScript VM Renderer.GL Parser.js webpage 29 Layout.CL Selectors.CL GPU superconductor.js data styling widgets data viz Compiler Date stays on GPU!

30. GE Demo 30

31. 31 Data Viz Parallel JS Parallel Framework *Effective* Parallel JS

32. 32 LMeyerov@gmail.com MTorok@eecs.berkeley.edu