WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and...
-
Upload
amd-developer-central -
Category
Technology
-
view
584 -
download
4
description
Transcript of WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and...
![Page 1: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/1.jpg)
A Browser Framework for Visualizing Big Data
Leo Meyerovich, Ma. Torok, Ras Bodik @LMeyerov UC Berkeley / Graphistry
SUPERCONDUCTOR
1
![Page 2: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/2.jpg)
Why Big Data Visualization?
Yes No
![Page 3: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/3.jpg)
3
Analysis Result: No
![Page 4: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/4.jpg)
Histogram of Voter Turnout by Town
4
most towns had a 40% voter
turnout
0% 25% 50% 75% 100% Voter turnout
# Towns
who’s ballot stuffing?
![Page 5: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/5.jpg)
Tree Map Demo
![Page 6: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/6.jpg)
Ex: Time Series in IBM’s IT Monitor
![Page 7: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/7.jpg)
GE Demo
![Page 8: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/8.jpg)
parse
selectors
layout
render
Browser Engine ~= Chart Engine!
DSLs
Exploit Parallelism in Each One
layout
render
selectors
![Page 9: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/9.jpg)
Deploy Today via Parallel JavaScript
HTML data CSS styling JS script
Pixels
Parser
Selectors
Layout
Renderer JavaScrip
t VM
Renderer.GL
Parser.js webpage
9
Layout.CL
Selectors.CL GPU
superconductor.js
data styling widgets
data viz
Data stays on GPU!
Compiler
![Page 10: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/10.jpg)
DSL 1: Data via JSON
10
JavaScript, Ruby, Python, Java, …
Easy… until 1-10s data loading
![Page 11: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/11.jpg)
Parsing Demo
11
![Page 12: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/12.jpg)
span b { width: 83% } div .dog { float: leJ } p , span b { font-‐size: 7px }
DSL 2: Designers Selectors
<div>
<p> <span>
<img class=“dog”> <b>
12
<b>
<i> <b>
![Page 13: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/13.jpg)
13
span b { width: 83% } div .dog { float: leJ } p , span b { font-‐size: 7px }
Problem: O(sels * tree log tree )
<div>
<p> <span>
<img class=“dog”> <b>
<b>
<i> <b>
<span>
1K-100K HTML nodes
1-10K selectors
×
![Page 14: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/14.jpg)
Good News: Embarrassing Parallelism!
<div>
<p> <span>
<img class=“dog”> <b>
14
<b>
<i> <b>
span b { width: 83% } div .dog { float: leJ } p , span b { font-‐size: 7px }
![Page 15: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/15.jpg)
Selector Engine Implementation
selectors.css
selectors.webcl
compiler.js
…
Dynamic Animation! edit style at runtime then recompile
![Page 16: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/16.jpg)
DSL 3: Layout
CSS
parallelizable layout
JS
flexible compute
FTL parallelizable compute in declarative layout
![Page 17: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/17.jpg)
Step 1/2: Schema of VisualizaYon
Tree class hierarchy
Node attributes
17
![Page 18: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/18.jpg)
x y x y
y
y
y
w h
w h
x x
x
h w
Step 2/2: Schema Attribute Constraints
10px 5px
Root
HBox
Leaf Leaf
Leaf Leaf
HBox
w
x y
h w
h w h
inputs vars
[Kastens 1980, Saraiva 2003] [WWW 2010, PPOPP 2013]
2. Single-‐assignment
HBox ! left=IBox right=IBox w := left.w + right.w …
1. Local
18
![Page 19: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/19.jpg)
Leaf
Compiler Output: 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]
logical joins
logical spawns
Parallel
Parallelism in each traversal!
19
Mozilla, Microsoft
![Page 20: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/20.jpg)
DSL 4: Rendering as a Layout Extension
HBox ! left=IBox right=IBox @render @Rectangle(x,y,w,h,color) … w := left.w + right.w …
![Page 21: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/21.jpg)
parallel for loop (level synchronous)
Traversals: Flattened & Level-Synchronous
level 1
Tree
level n
w h x y
Nodes in arrays
Array per attribute
Compiler automates code + data transformations.
[Blelloch 93]
21
![Page 22: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/22.jpg)
circ(…)
Problem: Dynamic Memory Allocation on GPU?
square(…) rect(…); …
line(…); …
rect(…); …
oval(…)
22
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] = Math.cos(i) } dynamic allocation"
![Page 23: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/23.jpg)
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. Fill vertex buffers in parallel 4. Give OpenGL buffers
pointer 23
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
![Page 24: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/24.jpg)
1
10
100
1,000
10,000
layout (4 passes) rendering pass TOTAL
Tim
e (m
s)
Naïve JS (Chrome 26) GPU (Safari + WebCL 11/3) 24fps
CPU vs. GPU for Election Treemap: 5 traversals over 100K nodes
24
WebCL: 31X
WebCL: 5X
COMBINED: 54X !
![Page 25: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/25.jpg)
DSLs for Big Data Visualization, Today.
![Page 26: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/26.jpg)
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
![Page 28: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/28.jpg)
Extra
![Page 29: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/29.jpg)
Parsing Demo
29
![Page 30: WT-4065, Superconductor: GPU Web Programming for Big Data Visualization, by Leo Meyerovich and Matthew Torok](https://reader034.fdocuments.net/reader034/viewer/2022042700/55626343d8b42a14048b4d72/html5/thumbnails/30.jpg)
Optimizing JSON Parsing
30
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 parallel parse parallel parse
partition raw1.json(1.9MB), …, raw12.json