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.

1. A Web Language for
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”
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
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?

9. 9
Data Viz Parallel JS
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: 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.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: Custom Layout/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 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

17. Layout DSL is Flexible!
17
multicoremulticor
e
multicor
e
GPU
GPU
GPU
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
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 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(…)
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
HTML data
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. GE Demo
30

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

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