Don’t Call It a ComebackAttribute Grammars for Big Data VizLeo MeyerovichParallelism Lab @ UCBerkeleySuperconductor: sc-la...
Why Attribute Grammars?Beautiful DataDeclarative DesignMulticore/GPU Patternscompilers2
10X Less Power vs. LaptopFaster mobile browsers? Datavisualization? 3
4“Well-designed graphicsare usually the simplest”Big Data is Different:going from Data Reportingto Knowledge Discovery… sm...
Ex: How to Report VoterTurnout5Swedes LikeVoting0% 100%50%Voter Turnout# VotesMexicoDemocracy? Bell CurveMystery CountryA...
6Precrafted message,not knowledge discovery!demo: fraud analysis
7
8
9
10
Superconductorisa collection of domain specific languagesfor data visualization… that compile into parallel JavaScript(Web...
Superconductor: Domain SpecificLanguages12datapaintlayoutstylizeParallel & High-Level Language forEach?AttributeGrammarsJS...
DSL 1: Data via JSON13JavaScript, Ruby, Python, Java, …Easy… until 1-10s dataloading
Parsing Demo14
Parsing Demo15
Manually Building a Layout SystemStinksbrowsera.comPerformancefootprint, parallelism, incrementalism,…Toolsdebugger, IDE, ...
DSL 2: Automate with AttributeGrammarsCompilertreemap.ftlParallel codeworkers, CL, GLtree: SC_DOM.jsLayoutEngine.jsoffline...
class HBox : Nodechildren:left : Noderight: Nodeconstraints:w := left.w + right.w…xy xyyyyw hw hx xxhwWriting a Custom Lay...
Declarative Calculator!19
Declarative Calculator!20
Declarative Calculator!21
Layout DSL is Flexible!22multicoremulticoremulticoreGPUGPUGPUGPU
expressivenesslazy, iterative, …1990+optimizeincremental, parallel1980+buildparsersyacc/bisonCompilerResearch1970+History ...
Why Attribute Grammars?Beautiful DataDeclarative DesignMulticore/GPU Patternscompilers24
LeafCompute: Layout as Tree Traversalsw,h w,hw,hw,hw,hw,hx,y …1. Works for all data sets2. Compiler automatically parallel...
Two Examples26multicoreGPUCSSB = [img, normal, flow, root]P = [, , , , , , ,(buSubInorder, (B,_, _)), ]Interactive...
Pattern Programming27
Need “Structured Programming”for Automatically ParallelLanguagesSynthesizerfunctional specattr grammarschedule{w,h}; {x,...
Input: Partial Behavior (“ScheduleSketch”) _ ;_ ;_ ;_;_ ;_;nest({Text,Font,Inline}, _);_;_OK: reschedulingattribsw...
GPU Patterns30
parallel for loop(level synchronous)GPU Traversals: Flattened & Level-Synchronouslevel 1Treelevel nwhxyNodes in arraysArra...
circ(…)Problem: Dynamic Memory Allocation onGPU?square(…) rect(…); …line(…); …rect(…); …oval(…)321.0 0.8 0.5 0.2 0 0.2func...
Fast Dynamic Memory AllocationallocCirc(…); …allocRect(…); …allocLine(…); …allocRect(…); …fillCirc(…); …fillRect(…);…fillL...
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...
1101001,00010,000LAYOUT (4 passes) rendering pass TOTALTime(ms)Naïve JS (Chrome 26) Arrays (Chrome 26) GPU (Safari + WebCL...
Platform: JavaScript is the NewAssembly36parallelmulticore:SIMD:HTML5 HardwareAccessGPU:Too low-levelw/out DSLs
Architecture: Browser-in-a-BrowserHTML dataCSS stylingJS scriptPixelsParserSelectorsLayoutRendererJavaScriptVMRenderer.GLP...
GE Demo38
GE Demo39
sc-lang.com : please take our survey Beautiful DataDeclarative DesignMulticore/GPU Patternssynthesis + compilation40
Upcoming SlideShare
Loading in …5
×

Don't Call It a Comeback: Attribute Grammars for Big Data Visualization

628 views
452 views

Published on

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!

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
628
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • Don't Call It a Comeback: Attribute Grammars for Big Data Visualization

    1. 1. Don’t Call It a ComebackAttribute Grammars for Big Data VizLeo MeyerovichParallelism Lab @ UCBerkeleySuperconductor: sc-lang.com1
    2. 2. Why Attribute Grammars?Beautiful DataDeclarative DesignMulticore/GPU Patternscompilers2
    3. 3. 10X Less Power vs. LaptopFaster mobile browsers? Datavisualization? 3
    4. 4. 4“Well-designed graphicsare usually the simplest”Big Data is Different:going from Data Reportingto Knowledge Discovery… small & static charts enough?
    5. 5. Ex: How to Report VoterTurnout5Swedes LikeVoting0% 100%50%Voter Turnout# VotesMexicoDemocracy? Bell CurveMystery CountryAbnormal curve;can be voter fraud!
    6. 6. 6Precrafted message,not knowledge discovery!demo: fraud analysis
    7. 7. 7
    8. 8. 8
    9. 9. 9
    10. 10. 10
    11. 11. Superconductorisa collection of domain specific languagesfor data visualization… that compile into parallel JavaScript(WebCL/WebGL/workers/…).11
    12. 12. Superconductor: Domain SpecificLanguages12datapaintlayoutstylizeParallel & High-Level Language forEach?AttributeGrammarsJSONCSSSelectors
    13. 13. DSL 1: Data via JSON13JavaScript, Ruby, Python, Java, …Easy… until 1-10s dataloading
    14. 14. Parsing Demo14
    15. 15. Parsing Demo15
    16. 16. Manually Building a Layout SystemStinksbrowsera.comPerformancefootprint, parallelism, incrementalism,…Toolsdebugger, IDE, …Automation Cuts Implementation Costs!16Correctness500pg standard, 100K+ lines ofC++
    17. 17. DSL 2: Automate with AttributeGrammarsCompilertreemap.ftlParallel codeworkers, CL, GLtree: SC_DOM.jsLayoutEngine.jsoffline17browser
    18. 18. class HBox : Nodechildren:left : Noderight: Nodeconstraints:w := left.w + right.w…xy xyyyyw hw hx xxhwWriting a Custom Layout: SuperCSS!10px5pxRootHBoxLeafLeafLeafLeafHBoxwxyhwhwhinput: x, yvar: w, h[Kastens 1980, Saraiva 2003] [WWW 2010, PPOPP 2013]2. Single-assignment1. Local18
    19. 19. Declarative Calculator!19
    20. 20. Declarative Calculator!20
    21. 21. Declarative Calculator!21
    22. 22. Layout DSL is Flexible!22multicoremulticoremulticoreGPUGPUGPUGPU
    23. 23. expressivenesslazy, iterative, …1990+optimizeincremental, parallel1980+buildparsersyacc/bisonCompilerResearch1970+History of Attribute Grammar Formalismsemanticstime FP Research1967build IDEsspoofax2000+Haskell, Coqsynthesis2009+23
    24. 24. Why Attribute Grammars?Beautiful DataDeclarative DesignMulticore/GPU Patternscompilers24
    25. 25. LeafCompute: Layout as Tree Traversalsw,h w,hw,hw,hw,hw,hx,y …1. Works for all data sets2. Compiler automatically parallelizes![WWW 2010]logical joinslogical spawnsParallelism in each traversal!25
    26. 26. Two Examples26multicoreGPUCSSB = [img, normal, flow, root]P = [, , , , , , ,(buSubInorder, (B,_, _)), ]Interactive TreemapP = [ , , , ,  ]
    27. 27. Pattern Programming27
    28. 28. Need “Structured Programming”for Automatically ParallelLanguagesSynthesizerfunctional specattr grammarschedule{w,h}; {x, …partial behavioral specschedule sketchCSS 1.0, 2.0, 2.1, 3.0, 4.0,…28
    29. 29. Input: Partial Behavior (“ScheduleSketch”) _ ;_ ;_ ;_;_ ;_;nest({Text,Font,Inline}, _);_;_OK: reschedulingattribsw, hbug: lessparallelism!sequential_inorder{y,r}Structures parallel programming:share code, test ideas, and debugHole filled by synthesizer with: , {x,y}, “||”, …Synthesizer rejects programs that cannot obey sketch29
    30. 30. GPU Patterns30
    31. 31. parallel for loop(level synchronous)GPU Traversals: Flattened & Level-Synchronouslevel 1Treelevel nwhxyNodes in arraysArray per attributeCompiler automates code + datatransformations.[Blelloch 93]31
    32. 32. circ(…)Problem: Dynamic Memory Allocation onGPU?square(…) rect(…); …line(…); …rect(…); …oval(…)321.0 0.8 0.5 0.2 0 0.2function circ(x,y,r) {buffer = newArray(r*10)for (i = 0; i < r * 10;i++)buffer[i] =Math.cos(i)}dynamic allocation
    33. 33. Fast Dynamic Memory AllocationallocCirc(…); …allocRect(…); …allocLine(…); …allocRect(…); …fillCirc(…); …fillRect(…);…fillLine(…); …fillRect(…);…1. Prefix sum for neededspace2. Allocate buffers3. Fill vertex buffers inparallel4. Give OpenGL bufferspointer331.0 0.8 0.5 0.2 00.21.0 0.8 0.50.21.0 0.8 0.5 0.2 00.2
    34. 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 + size2render1 := 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. 35. 1101001,00010,000LAYOUT (4 passes) rendering pass TOTALTime(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 nodesTotal: 53XTyped arrays:14X35WebCL:5XWebCL+WebGL:32X
    36. 36. Platform: JavaScript is the NewAssembly36parallelmulticore:SIMD:HTML5 HardwareAccessGPU:Too low-levelw/out DSLs
    37. 37. Architecture: Browser-in-a-BrowserHTML dataCSS stylingJS scriptPixelsParserSelectorsLayoutRendererJavaScriptVMRenderer.GLParser.jswebpage37Layout.CLSelectors.CLGPUsuperconductor.jsdatastylingwidgetsdata vizCompilerDate stayson GPU!DebuggerMultiplebackendsServer…
    38. 38. GE Demo38
    39. 39. GE Demo39
    40. 40. sc-lang.com : please take our survey Beautiful DataDeclarative DesignMulticore/GPU Patternssynthesis + compilation40

    ×