WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok
1 like1,678 views
Superconductor is a browser framework designed for visualizing big data through various domain-specific languages (DSLs) that support hardware acceleration via WebCL. It enables interactive visualization and efficient data processing by leveraging parallelism for rendering and layout tasks. The framework aims to optimize data loading and parsing, allowing users to create complex visualizations similar to web page scripting.
![[Kastens
1980,
Saraiva
2003]
[WWW
2010,
Step 2/2: Schema AttributePPOPP
2013]
Constraints
1. Local
10px
5px
inputs
vars
2.
Single-‐assignment
HBox
Leaf
y
w
h
x
Leaf
y
w
h
x
y
w
h
x
HBox
HBox ! left=IBox right=IBox
w := left.w + right.w
…
Root
y
w
h
x
Leaf
y
w
h
x
Leaf
y
w
h
x
18](https://image.slidesharecdn.com/wt-4065leomeyerovich-131122142732-phpapp01/85/WT-4065-Superconductor-GPU-Web-Programming-for-Big-Data-Visualization-by-Leo-Meyerovich-and-Matthew-Torok-18-320.jpg)
![llel
ara
P
[WWW
2010]
Compiler Output: Layout as Tree Traversals
logical
joins
w,h
w,h
w,h
Leaf
x,y
…
logical
spawns
w,h
w,h
w,h
Parallelism in each traversal!
Mozilla, Microsoft
1. Works for all data sets
2. Compiler automatically parallelizes!
19](https://image.slidesharecdn.com/wt-4065leomeyerovich-131122142732-phpapp01/85/WT-4065-Superconductor-GPU-Web-Programming-for-Big-Data-Visualization-by-Leo-Meyerovich-and-Matthew-Torok-19-320.jpg)
![[Blelloch
93]
Traversals: Flattened & Level-Synchronous
y
x
wh
Array per
attribute
level
1
Nodes in
arrays
parallel for loop
(level synchronous)
level
n
Tree
Compiler automates code + data
transformations.
21](https://image.slidesharecdn.com/wt-4065leomeyerovich-131122142732-phpapp01/85/WT-4065-Superconductor-GPU-Web-Programming-for-Big-Data-Visualization-by-Leo-Meyerovich-and-Matthew-Torok-21-320.jpg)
![Problem: Dynamic Memory Allocation on GPU?
rect(…); …
oval(…)
square(…)
function circ(x,y,r) {
buffer = new
line(…); … Array(r*10)
for (i = 0; i < r * 10; i+
circ(…)
+)
buffer[i] =
dynamic
Math.cos(i) allocation"
rect(…); …}
1.0 0.8 0.5 0.2 0
0.2
22](https://image.slidesharecdn.com/wt-4065leomeyerovich-131122142732-phpapp01/85/WT-4065-Superconductor-GPU-Web-Programming-for-Big-Data-Visualization-by-Leo-Meyerovich-and-Matthew-Torok-22-320.jpg)
WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok
- 1. SUPERCONDUCTOR A Browser Framework for Visualizing Big Data Leo Meyerovich, Ma. Torok, Ras Bodik @LMeyerov UC Berkeley / Graphistry 1
- 2. Why Big Data Visualization? Yes No
- 3. Analysis Result: No 3
- 4. Histogram of Voter Turnout by Town who’s ballot stuffing? # Towns most towns had a 40% voter turnout 0% 75% 25% 100% 50% Voter turnout 4
- 6. Ex: Time Series in IBM’s IT Monitor
- 7. GE Demo
- 8. Browser Engine ~= Chart Engine! DSLs render layout selectors parse Exploit Parallelism in Each One
- 9. Deploy Today via Parallel JavaScript data styling widgets Parser.js GPU Compiler Data stays on GPU! Selectors.CL Layout.CL JavaScript VM data viz Renderer.GL webpage Parser Selectors HTML data CSS styling JS script Layout Renderer Pixels superconductor.js 9
- 10. DSL 1: Data via JSON JavaScript, Ruby, Python, Java, … Easy… until 1-10s data loading 10
- 11. Parsing Demo 11
- 12. DSL 2: Designers Selectors <div> <span> <b> <i> <p> <b> <img class=“dog”> <b> span b { width: 83% } div .dog { float: leJ } p , span b { font-‐size: 7px } 12
- 13. Problem: O(sels * tree log tree ) <div> 1K-100K HTML nodes <span> <p> × <b> <i> 1-10K selectors <b> <img class=“dog”> <b> span b { width: 83% } div .dog { float: leJ } p , span b { font-‐size: 7px } 13
- 14. Good News: Embarrassing Parallelism! <div> <span> <b> <i> <p> <b> <img class=“dog”> <b> span b { width: 83% } div .dog { float: leJ } p , span b { font-‐size: 7px } 14
- 15. Selector Engine Implementation selectors.css Dynamic Animation! edit style at runtime then recompile compiler.js selectors.webcl …
- 16. DSL 3: Layout CSS JS parallelizable layout flexible compute FTL parallelizable compute in declarative layout
- 17. Step 1/2: Schema of VisualizaYon Tree class hierarchy Node attributes 17
- 18. [Kastens 1980, Saraiva 2003] [WWW 2010, Step 2/2: Schema AttributePPOPP 2013] Constraints 1. Local 10px 5px inputs vars 2. Single-‐assignment HBox Leaf y w h x Leaf y w h x y w h x HBox HBox ! left=IBox right=IBox w := left.w + right.w … Root y w h x Leaf y w h x Leaf y w h x 18
- 19. llel ara P [WWW 2010] Compiler Output: Layout as Tree Traversals logical joins w,h w,h w,h Leaf x,y … logical spawns w,h w,h w,h Parallelism in each traversal! Mozilla, Microsoft 1. Works for all data sets 2. Compiler automatically parallelizes! 19
- 20. DSL 4: Rendering as a Layout Extension HBox ! left=IBox right=IBox @render @Rectangle(x,y,w,h,color) … w := left.w + right.w …
- 21. [Blelloch 93] Traversals: Flattened & Level-Synchronous y x wh Array per attribute level 1 Nodes in arrays parallel for loop (level synchronous) level n Tree Compiler automates code + data transformations. 21
- 22. Problem: Dynamic Memory Allocation on GPU? rect(…); … oval(…) square(…) function circ(x,y,r) { buffer = new line(…); … Array(r*10) for (i = 0; i < r * 10; i+ circ(…) +) buffer[i] = dynamic Math.cos(i) allocation" rect(…); …} 1.0 0.8 0.5 0.2 0 0.2 22
- 23. Dynamic Allocation as SIMD Traversals allocRect(…)! 7 fillRect(…) allocLine(…)! 6 allocCirc(…)à 4 allocRect(…)! 6 1.0 0.8 0.5 0.2 0 0.2 1.0 0.8 0.5 0.2 1. Prefix sum for needed space 2. Allocate buffers fillLine(…) fillCirc(…) fillRect(…) 1.0 0.8 0.5 0.2 0 0.2 3. Fill vertex buffers in parallel 4. Give OpenGL buffers pointer 23
- 24. CPU vs. GPU for Election Treemap: 5 traversals over 100K nodes Naïve JS (Chrome 26) 10,000 GPU (Safari + WebCL 11/3) COMBINED: 54X ! Time (ms) 1,000 100 24fps WebCL: 5X WebCL: 31X 10 1 layout (4 passes) rendering pass TOTAL 24
- 25. DSLs for Big Data Visualization, Today.
- 26. Superconductor • Explore data with interactive visualization • Script charts like web pages: DSLs! • Hardware accelerate each DSL • We use WebCL: GPGPU, keeps data on GPU, dynamic compilation
- 28. Extra
- 29. Parsing Demo 29
- 30. Optimizing JSON Parsing raw.json: 23MB Parallel parsing easy! … when you fix the format partition raw1.json(1.9MB), …, raw12.json compress + zip csr1.zip (0.2MB), …, csr12.zip server browser Each worker: parallel parse parallel parse 1. native JSON parse # csr.jso parallel parse 2. decompress # obj.json 3. 0-copy return: typed arrays! big JavaScript object 30