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!

1. Don’t Call It a Comeback
Attribute Grammars for Big Data Viz
Leo Meyerovich
Parallelism Lab @ UC
Berkeley
Superconductor: sc-lang.com
1

2. Why Attribute Grammars?
Beautiful Data
Declarative Design
Multicore/GPU Patterns
compilers
2

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!

6. 6
Precrafted message,
not knowledge discovery!
demo: fraud analysis

7. 7

8. 8

9. 9

10. 10

11. Superconductor
is
a collection of domain specific languages
for data visualization
… that compile into parallel JavaScript
(WebCL/WebGL/workers/…).
11

12. Superconductor: Domain Specific
Languages
12
data
paintlayout
stylize
Parallel & High-Level Language for
Each?
Attribute
Grammars
JSON
CSS
Selectors

13. DSL 1: Data via JSON
13
JavaScript, Ruby, Python, Jav
a, …
Easy… until 1-10s data
loading

14. Parsing Demo
14

15. Parsing Demo
15

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++

17. DSL 2: Automate with Attribute
Grammars
Compilertreemap.ftl
Parallel code
workers, CL, GL
tree: SC_DOM.js
LayoutEngine
.js
offline
17
browser

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

19. Declarative Calculator!
19

20. Declarative Calculator!
20

21. Declarative Calculator!
21

22. Layout DSL is Flexible!
22
multicoremulticor
e
multicor
e
GPU
GPU
GPU
GPU

23. expressivenes
s
lazy, iterative, …
1990+
optimize
incremental, parallel
1980+
build
parsers
yacc/bison
Compiler
Research
1970
+
History of Attribute Grammar Formalism
semantics
time FP Research
196
7
build IDEs
spoofax
2000+
Haskell, Coq
synthesis2009+
23

24. Why Attribute Grammars?
Beautiful Data
Declarative Design
Multicore/GPU Patterns
compilers
24

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 = [ , , , ,  ]

27. Pattern Programming
27

28. Need “Structured Programming”
for Automatically Parallel
Languages
Synthesizerfunctional spec
attr grammar
schedule
{w,h}; {x, …
partial behavioral spec
schedule sketch
CSS 1.0, 2.0, 2.1, 3.0, 4.0,
…
28

29. Input: Partial Behavior (“Schedule
Sketch”)
 _ ;_ ;_ ;_;_ ;_;nest({Text,Font,Inline}, _);_;_
OK: rescheduling
attribs
w, h
bug: less
parallelism!
sequential_inorder{y,r}
Structures parallel programming:
share code, test ideas, and debug
Hole filled by synthesizer with: , {x,y}, “||”, …
Synthesizer rejects programs that cannot obey sketch
29

30. GPU Patterns
30

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
…

38. GE Demo
38

39. GE Demo
39

40. sc-lang.com : please take our survey 
Beautiful Data
Declarative Design
Multicore/GPU Patterns
synthesis + compilation
40