Successfully reported this slideshow.
A Web Language forBig Data VisualizationLeo Meyerovich, Matthew Torok,Eric Atkinson, Rastislav BodikParallelism Lab, UC Be...
2“Well-designedgraphicsare usually thesimplest”Big Data is Different:going from Data Reportingto Knowledge Discovery… smal...
Ex: How to Report VoterTurnout3Swedes LikeVoting0% 100%50%Voter Turnout# VotesMexicoDemocracy? Bell CurveMystery CountryA...
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!… wh...
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 Lay...
LeafCompute: Layout as Tree Traversalsw,h w,hw,hw,hw,hw,hx,y …1. Works for all data sets2. Compiler automaticallyparalleli...
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 GP...
Bigger Interactions: CSS Selectors*22state precinct { height: 5 }* buggy selectors.jsmyStylesheet.webCL… tree traversal, ...
Layout on GPUlevel 1JSON Treelevel nwhxyNodes inarraysArray perattributeSuperconductor does this for you.23Benefits1. Para...
How to Compute Layout on GPU:Level-synchronous Breadth-Firstlevel 1JSON Treelevel n[Blelloch 93]24parallel for loop(level ...
circ(…);…Problem: Layout->Rendering BufferAllocation?function circ(x,y,w,h) {buffer =malloc(w*10);loop:buffer[i]= cos(i); ...
Optimizing Buffer Allocation &PassingallocCirc(…); …allocRect(…); …allocLine(…); …allocRect(…); …fillCirc(…); …fillRect(…)...
1101001,00010,000layout (4 passes) rendering pass TOTALTime(ms)Naïve JS (Chrome 26) Arrays (Chrome 26)GPU (Safari + WebCL ...
Multicore Parsing w/ WebWorkers28050010001500200025003000runtime flattening (BASELINE)+ preprocessing + parallelizationTim...
Recap: Parallel ArchHTML dataCSS stylingJS scriptPixelsParserSelectorsLayoutRendererJavaScriptVMRenderer.GLParser.jswebpag...
GE Demo30
31Data Viz Parallel JSParallel Framework*Effective*Parallel JS
32LMeyerov@gmail.comMTorok@eecs.berkeley.edu
Upcoming SlideShare
Loading in …5
×

Superconductor: A Language for Interactive Big Data Visualization

1,156 views

Published on

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.

Published in: Technology
  • Be the first to comment

Superconductor: A Language for Interactive Big Data Visualization

  1. 1. A Web Language forBig Data VisualizationLeo Meyerovich, Matthew Torok,Eric Atkinson, Rastislav BodikParallelism Lab, UC BerkeleySUPERCONDUCTOR1
  2. 2. 2“Well-designedgraphicsare usually thesimplest”Big Data is Different:going from Data Reportingto Knowledge Discovery… small & static chartsenough?
  3. 3. Ex: How to Report VoterTurnout3Swedes LikeVoting0% 100%50%Voter Turnout# VotesMexicoDemocracy? Bell CurveMystery CountryAbnormal curve;can be voter fraud!
  4. 4. 4Precrafted message,not knowledgediscovery!demo: fraud analysis
  5. 5. 5
  6. 6. InteractiveOpenGLPlatformDemands6Scale CustomizableJavaScript
  7. 7. 7Big DataVizParallel JSParallel Framework*Effective*Parallel JS
  8. 8. Platform: JavaScript is the NewAssembly8parallelmulticore:SIMD:HTML5 HardwareAccessGPU:Low-level,how to exploit?
  9. 9. 9Data Viz Parallel JSParallel Framework*Effective*Parallel JSSuperconductorspecializes fordata visualization
  10. 10. Superconductor’s Domain SpecificLanguages10datapaintlayoutstylizeParallel & High-Level Language forEach?
  11. 11. DSL 1: Data via JSON11JavaScript, Ruby, Python,Java, …Easy… until 1-10s dataloading
  12. 12. Parsing Demo12
  13. 13. 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
  14. 14. DSL 2: Custom Layout/RenderingCompilertreemap.ftlParallel codeWebCL+WebGLtree: SC_DOM.jsLayoutEngine.jsoffline14browser
  15. 15. 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
  16. 16. 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
  17. 17. Layout DSL is Flexible!17multicoremulticoremulticoreGPUGPUGPUGPU
  18. 18. 18Big DataVizParallel JSParallel Framework*Effective*Parallel JS
  19. 19. Animation & Interaction19Layout ModificationLayout fast enough for real-timeloop!
  20. 20. 20First Rule of GPU Club:Don’t Talk to the GPUBudget: 30ms = 33fpsMaxed out by 300 smallmessages!
  21. 21. 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();
  22. 22. Bigger Interactions: CSS Selectors*22state precinct { height: 5 }* buggy selectors.jsmyStylesheet.webCL… tree traversal, same as layout![WWW 2010]
  23. 23. Layout on GPUlevel 1JSON Treelevel nwhxyNodes inarraysArray perattributeSuperconductor does this for you.23Benefits1. Parallelism!2. Data never leavesGPU: Must “Flatten” Tree
  24. 24. How to Compute Layout on GPU:Level-synchronous Breadth-Firstlevel 1JSON Treelevel n[Blelloch 93]24parallel for loop(level synchronous)
  25. 25. 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
  26. 26. 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
  27. 27. 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 !
  28. 28. 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
  29. 29. Recap: Parallel ArchHTML dataCSS stylingJS scriptPixelsParserSelectorsLayoutRendererJavaScriptVMRenderer.GLParser.jswebpage29Layout.CLSelectors.CLGPUsuperconductor.jsdatastylingwidgetsdata vizCompilerDate stayson GPU!
  30. 30. GE Demo30
  31. 31. 31Data Viz Parallel JSParallel Framework*Effective*Parallel JS
  32. 32. 32LMeyerov@gmail.comMTorok@eecs.berkeley.edu

×