Downloaded 24 times
![class HBox : Node
children:
left : Node
right: Node
constraints:
w := left.w + right.w
…
xy xy
y
y
y
w h
w h
x x
x
hw
Writing a Custom Layout: Super
CSS!
10px
5px
Root
HBox
LeafLeaf
LeafLeaf
HBox
w
xy
hw
hwh
input: x, y
var: w, h
[Kastens 1980, Saraiva 2003] [WWW 2010, PPOPP 2013]
2. Single-assignment
1. Local
15](https://image.slidesharecdn.com/v2-130603130839-phpapp02/85/Superconductor-A-Language-for-Interactive-Big-Data-Visualization-15-320.jpg?cb=1370265627)
![Leaf
Compute: Layout as Tree Traversals
w,h w,h
w,h
w,h
w,h
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 attributeslogical joins
logical spawns
Parallelism in each traversal!
16](https://image.slidesharecdn.com/v2-130603130839-phpapp02/85/Superconductor-A-Language-for-Interactive-Big-Data-Visualization-16-320.jpg?cb=1370265627)
![Bigger Interactions: CSS Selectors*
22
state precinct { height: 5 }
* buggy
selectors.j
s
myStylesheet.webCL
… tree traversal, same as layout!
[WWW 2010]](https://image.slidesharecdn.com/v2-130603130839-phpapp02/85/Superconductor-A-Language-for-Interactive-Big-Data-Visualization-22-320.jpg?cb=1370265627)
![How to Compute Layout on GPU:
Level-synchronous Breadth-First
level 1
JSON Tree
level n
[Blelloch 93]
24
parallel for loop
(level synchronous)](https://image.slidesharecdn.com/v2-130603130839-phpapp02/85/Superconductor-A-Language-for-Interactive-Big-Data-Visualization-24-320.jpg?cb=1370265627)
![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(…)
25](https://image.slidesharecdn.com/v2-130603130839-phpapp02/85/Superconductor-A-Language-for-Interactive-Big-Data-Visualization-25-320.jpg?cb=1370265627)
Uploaded byLeo Meyerovich
Superconductor: A Language for Interactive Big Data Visualization
Download ("save") PPTX file to see animations. Presented at O'Reilly Fluent 2013 by Leo Meyerovich (UC Berkeley). See http://www.sc-lang.com for more.
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Superconductor: A Language for Interactive Big Data Visualization
- 1. A Web Languagefor Big Data Visualization Leo Meyerovich, Matthew Torok, Eric Atkinson, Rastislav Bodik Parallelism Lab, UC Berkeley SUPERCONDUCTOR 1
- 2. 2 “Well-designed graphics are usually the simplest” BigData is Different: going from Data Reporting to Knowledge Discovery … small & static charts enough?
- 3. Ex: How toReport Voter Turnout 3 Swedes Like Voting 0% 100 % 50% Voter Turnout # Votes Mexic o Democracy? Bell Curve Mystery Country Abnormal curve; can be voter fraud!
- 4. 4 Precrafted message, not knowledge discovery! demo:fraud analysis
- 5.
- 6.
- 7. 7 Big Data Viz Parallel JS ParallelFramework *Effective* Parallel JS
- 8. Platform: JavaScript isthe New Assembly 8 parallel multicore: SIMD: HTML5 Hardware Access GPU: Low-level, how to exploit?
- 9. 9 Data Viz ParallelJS Parallel Framework *Effective* Parallel JS Superconductor specializes for data visualization
- 10. Superconductor’s Domain Specific Languages 10 data paintlayout stylize Parallel& High-Level Language for Each?
- 11. DSL 1: Datavia JSON 11 JavaScript, Ruby, Python, Java, … Easy… until 1-10s data loading
- 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.jso 2. decompress obj.json 3. 0-copy return: typed arrays! parallel parseparallel parseparallel parse partition raw1.json(1.9MB), …, raw12.json
- 14. DSL 2: CustomLayout/Rendering Compilertreemap.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 … xy xy y y y w h w h x x x hw Writing a Custom Layout: Super CSS! 10px 5px Root HBox LeafLeaf LeafLeaf HBox w xy hw hwh input: x, y var: w, h [Kastens 1980, Saraiva 2003] [WWW 2010, PPOPP 2013] 2. Single-assignment 1. Local 15
- 16. Leaf Compute: Layout asTree Traversals w,h w,h w,h w,h w,h 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 attributeslogical joins logical spawns Parallelism in each traversal! 16
- 17. Layout DSL isFlexible! 17 multicoremulticor e multicor e GPU GPU GPU GPU
- 18. 18 Big Data Viz Parallel JS ParallelFramework *Effective* Parallel JS
- 19. Animation & Interaction 19 LayoutModification Layout fast enough for real-time loop!
- 20. 20 First Rule ofGPU Club: Don’t Talk to the GPU Budget: 30ms = 33fps Maxed out by 300 small messages!
- 21. Small Interactions: JavaScriptProxy 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: CSSSelectors* 22 state precinct { height: 5 } * buggy selectors.j s myStylesheet.webCL … tree traversal, same as layout! [WWW 2010]
- 23. Layout on GPU level1 JSON Tree level n whxy 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 ComputeLayout 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? functioncirc(x,y,w,h) { buffer = malloc(w*10); loop: buffer[i] = cos(i); … } //alloc + tessellate + …Dynamic allocation square(…)rect(…); … line(…); … rect(…); … oval(…) 25
- 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 26
- 27. 1 10 100 1,000 10,000 layout (4 passes)rendering pass TOTAL Time(ms) Naïve JS (Chrome 26) Arrays (Chrome 26) GPU (Safari + WebCL 11/3) 24fps 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 0 500 1000 1500 2000 2500 3000 runtime flattening (BASELINE)+ preprocessing + parallelization Time(ms) ownership transfer (multicore msg copy) library init, GPU transfer 2012 MacBook Pro (2.6GHz quadcore i7 w/ 8GB) 290ms 600ms 2.7 s
- 29. Recap: Parallel Arch HTMLdata CSS styling JS script Pixels Parser Selectors Layout RendererJavaScriptVMRenderer.GL Parser.js webpage 29 Layout.CL Selectors.CL GPU superconductor.js data styling widgets data viz Compiler Date stays on GPU!
- 30.
- 31. 31 Data Viz ParallelJS Parallel Framework *Effective* Parallel JS
- 32.
Editor's Notes
- #16 First line: To demonstrate how to specify a layout in our system let’s look at an example, specifically an HboxHbox is one of many layout components that positions its contents horizontallyIn specification form, this means that the width attribute of Hbox is the sum of the children’s widthsRest of Hbox specified in a similar manner, for instance… - Given a set of such specifications for all layout components, we need to find a ordering of assignments that solves an input tree
- #24 Gloss over details of what is going on. Take away should be: this stuff is complicated, but don’t worry, compiler does it all for you.[what is meant by ‘subtree’ here? And ‘including edges’? Get this slide clarified.]
- #25 Gloss over details of what is going on. Take away should be: this stuff is complicated, but don’t worry, compiler does it all for you.[what is meant by ‘subtree’ here? And ‘including edges’? Get this slide clarified.]
- #26 [MENTION THAT WE STAY ON GPU HERE. Rewrite to include this.]‘malloc’ is what we want, but can’t have. Need solution.