This talk overviews our web platform for big data visualization (Superconductor). It focuses on one of the core components: our domain specific language for writing custom layouts. We took a new look at the old idea of attribute grammars: I'll show live examples of writing attribute grammars, automatically finding parallelism in them, and then automatically compiling them down into efficient parallel JavaScript code that runs on GPUs.
See http://www.sc-lang.com for more. The video (which includes live demos) will be up in a couple of weeks. Thanks for Functional Monthly for hosting!
3. 10X Less Power vs. Laptop
Faster mobile browsers? Data
visualization? 3
4. 4
“Well-designed graphics
are usually the simplest”
Big Data is Different:
going from Data Reporting
to Knowledge Discovery
… small & static charts enough?
5. Ex: How to Report Voter
Turnout
5
Swedes Like
Voting
0% 100
%
50%
Voter Turnout
# Votes
Mexic
o
Democracy?
Bell Curve
Mystery Country
Abnormal curve;
can be voter fraud!
11. Superconductor
is
a collection of domain specific languages
for data visualization
… that compile into parallel JavaScript
(WebCL/WebGL/workers/…).
11
16. Manually Building a Layout System
Stinks
browsera.com
Performance
footprint, parallelis
m, incrementalism,
…
Tools
debugger, IDE, …
Automation Cuts Implementation Costs!
16
Correctness
500pg standard, 100K+ lines of
C++
18. 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
18
25. 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]
logical joins
logical spawns
Parallelism in each traversal!
25
26. Two Examples
26
multicore
GPU
CSS
B = [img, normal, flow, root]
P = [
, , , , , , ,
(buSubInorder, (B,_, _)), ]
Interactive Treemap
P = [ , , , , ]
31. parallel for loop
(level synchronous)
GPU Traversals: Flattened & Level-
Synchronous
level 1
Tree
level n
whxy
Nodes in arrays
Array per attribute
Compiler automates code + data
transformations.
[Blelloch 93]
31
32. circ(…)
Problem: Dynamic Memory Allocation on
GPU?
square(…) rect(…); …
line(…); …
rect(…); …
oval(…)
32
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
33. Fast Dynamic Memory Allocation
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
33
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
34. Automatic!
@Line3D(x, y, z, x + 1, y + 1, z + 1)
@Line3D(x, y, z, x + 1, y + 1, z + 1)
=== compiler ===>
size1 := Line3D_alloc(x, y, z, x + 1, y + 1, z + 1)
size2 := Line3D_alloc(x, y, z, x + 1, y + 1, z + 1)
child.bufferIndex := bufferIndex + size1 + size2
render1 := Line3D_fill(x, y, z, x + 1, y + 1, z + 1,
bufferIndex )
render2 := Line3D_fill(x, y, z, x + 1, y + 1, z + 1,
bufferIndex + size1)
34
35. 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/12)
CPU vs. GPU for Election Treemap:
5 traversals over 100K nodes
Total: 53XTyped arrays:
14X
35
WebCL:
5X
WebCL+WebGL:
32X
36. Platform: JavaScript is the New
Assembly
36
parallel
multicore:
SIMD:
HTML5 Hardware
Access
GPU:
Too low-level
w/out DSLs
37. Architecture: Browser-in-a-
Browser
HTML data
CSS styling
JS script
Pixels
Parser
Selectors
Layout
RendererJavaScriptVMRenderer.GL
Parser.js
webpage
37
Layout.CL
Selectors.CL
GPU
superconductor.js
data
styling
widgets
data viz
Compiler
Date stays
on GPU!
Debugger
Multiple
backends
Server
…
40. sc-lang.com : please take our survey
Beautiful Data
Declarative Design
Multicore/GPU Patterns
synthesis + compilation
40
Notas del editor
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
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.]
[MENTION THAT WE STAY ON GPU HERE. Rewrite to include this.]‘malloc’ is what we want, but can’t have. Need solution.