Superconductor: A Language for Interactive Big Data Visualization
Upcoming SlideShare
Loading in...5
×
 

Superconductor: A Language for Interactive Big Data Visualization

on

  • 957 views

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.

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.

Statistics

Views

Total Views
957
Views on SlideShare
891
Embed Views
66

Actions

Likes
3
Downloads
11
Comments
0

1 Embed 66

http://www.scoop.it 66

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.]
  • 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.

Superconductor: A Language for Interactive Big Data Visualization Superconductor: A Language for Interactive Big Data Visualization Presentation Transcript

  • A Web Language forBig Data VisualizationLeo Meyerovich, Matthew Torok,Eric Atkinson, Rastislav BodikParallelism Lab, UC BerkeleySUPERCONDUCTOR1
  • 2“Well-designedgraphicsare usually thesimplest”Big Data is Different:going from Data Reportingto Knowledge Discovery… small & static chartsenough?
  • Ex: How to Report VoterTurnout3Swedes LikeVoting0% 100%50%Voter Turnout# VotesMexicoDemocracy? Bell CurveMystery CountryAbnormal curve;can be voter fraud!
  • 4Precrafted message,not knowledgediscovery!demo: fraud analysis
  • 5
  • InteractiveOpenGLPlatformDemands6Scale CustomizableJavaScript
  • 7Big DataVizParallel JSParallel Framework*Effective*Parallel JS
  • Platform: JavaScript is the NewAssembly8parallelmulticore:SIMD:HTML5 HardwareAccessGPU:Low-level,how to exploit?
  • 9Data Viz Parallel JSParallel Framework*Effective*Parallel JSSuperconductorspecializes fordata visualization
  • Superconductor’s Domain SpecificLanguages10datapaintlayoutstylizeParallel & High-Level Language forEach?
  • DSL 1: Data via JSON11JavaScript, Ruby, Python,Java, …Easy… until 1-10s dataloading
  • Parsing Demo12
  • Optimizing JSON Parsing13raw.json: 23MBcompress +zipcsr1.zip (0.2MB), …, csr12.zip serverbrowserParallel parsing easy!… when you fix the formatbig JavaScriptobjectEach worker:1. native JSON parse  csr.jso2. decompress  obj.json3. 0-copy return: typed arrays!parallel parseparallel parseparallel parsepartitionraw1.json(1.9MB), …, raw12.json
  • DSL 2: Custom Layout/RenderingCompilertreemap.ftlParallel codeWebCL+WebGLtree: SC_DOM.jsLayoutEngine.jsoffline14browser
  • 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. Local15
  • LeafCompute: Layout as Tree Traversalsw,h w,hw,hw,hw,hw,hx,y …1. Works for all data sets2. Compiler automaticallyparallelizes![WWW 2010]h0=max(h1,h2)w0=f (w1,w2)documenttreeconstraintson node attributeslogical joinslogical spawnsParallelism in each traversal!16
  • Layout DSL is Flexible!17multicoremulticoremulticoreGPUGPUGPUGPU
  • 18Big DataVizParallel JSParallel Framework*Effective*Parallel JS
  • Animation & Interaction19Layout ModificationLayout fast enough for real-timeloop!
  • 20First Rule of GPU Club:Don’t Talk to the GPUBudget: 30ms = 33fpsMaxed out by 300 smallmessages!
  • Small Interactions: JavaScript Proxy211. Small read/writes: JavaScriptvar w = root.getWidth();//sc.js proxies read from GPU2. Animation: rerun layout!root.setHeight(0.5);//sc.js proxies write to GPUlayout();
  • Bigger Interactions: CSS Selectors*22state precinct { height: 5 }* buggy selectors.jsmyStylesheet.webCL… tree traversal, same as layout![WWW 2010]
  • Layout on GPUlevel 1JSON Treelevel nwhxyNodes inarraysArray perattributeSuperconductor does this for you.23Benefits1. Parallelism!2. Data never leavesGPU: Must “Flatten” Tree
  • How to Compute Layout on GPU:Level-synchronous Breadth-Firstlevel 1JSON Treelevel n[Blelloch 93]24parallel for loop(level synchronous)
  • circ(…);…Problem: Layout->Rendering BufferAllocation?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
  • Optimizing Buffer Allocation &PassingallocCirc(…); …allocRect(…); …allocLine(…); …allocRect(…); …fillCirc(…); …fillRect(…); …fillLine(…); …fillRect(…); …1. Prefix sum for neededspace2. Allocate buffers3. Fill vertex buffers inparallel4. Give OpenGL bufferspointer26
  • 1101001,00010,000layout (4 passes) rendering pass TOTALTime(ms)Naïve JS (Chrome 26) Arrays (Chrome 26)GPU (Safari + WebCL 11/3) 24fpsCPU vs. GPU for Election Treemap:5 traversals over 100K nodesArray-based: 14Xspeedup27WebCL:31XWebCL:5XCOMBINED: 54X !
  • Multicore Parsing w/ WebWorkers28050010001500200025003000runtime flattening (BASELINE)+ preprocessing + parallelizationTime(ms)ownership transfer (multicore msgcopy)library init, GPU transfer2012 MacBook Pro (2.6GHz quadcore i7 w/ 8GB)290ms600ms2.7s
  • Recap: Parallel ArchHTML dataCSS stylingJS scriptPixelsParserSelectorsLayoutRendererJavaScriptVMRenderer.GLParser.jswebpage29Layout.CLSelectors.CLGPUsuperconductor.jsdatastylingwidgetsdata vizCompilerDate stayson GPU!
  • GE Demo30
  • 31Data Viz Parallel JSParallel Framework*Effective*Parallel JS
  • 32LMeyerov@gmail.comMTorok@eecs.berkeley.edu