scaling charts with design and gpus
DESCRIPTION
Superconductor. Scaling Charts with Design and GPUs. Leo Meyerovich (@ LMeyerov ) CEO of Graphistry.com | UC Berkeley. Visibility. Visibility through design + speed. Histogram of Voter Turnout by Town. # Towns. ballot box stuffing?. M ost towns had ~40% people vote. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/1.jpg)
1
Scaling Charts with Design and GPUs
Leo Meyerovich (@LMeyerov)CEO of Graphistry.com | UC Berkeley
Superconductor
![Page 2: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/2.jpg)
2
Visibility
![Page 3: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/3.jpg)
3
Visibility throughdesign + speed
![Page 4: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/4.jpg)
4
Histogram of Voter Turnout by Town
0% 25%50%
75% 100%Voter Turnout
# Towns
Most towns had ~40% people
vote
ballot box stuffing?
![Page 5: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/5.jpg)
5
![Page 6: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/6.jpg)
6
Opposition
Incumbent
Tiny square shows town size (area) and vote (color)
![Page 7: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/7.jpg)
7
Filter for townsw/ high turnout
![Page 8: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/8.jpg)
8
Tag suspicious with black
![Page 9: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/9.jpg)
9
![Page 10: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/10.jpg)
10
For visibility,speed design
![Page 11: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/11.jpg)
11
allwork projecthobby projectmanagerfemale1 employee2-4 employees5-9 employees10-19 employees20-100 employees100-499 employees500 employees or moreis techmanager peerunder 2030+20-30
Problem: Plot 10+ Time Series Signals
![Page 12: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/12.jpg)
12
Design 200 Time Series Signals
100 s0 s 0 s
![Page 13: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/13.jpg)
13
Speed Pan/Zoom Interactions
38 s37 s 37 s
![Page 14: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/14.jpg)
14
CPU Bottlenecks: naïve and offline
TransformParse
LayoutRender
0ms 1600ms
real-time
is30ms
![Page 15: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/15.jpg)
15
Prep
Optimize Binary Data, Multicore Layout, GPU Render
LayoutRender
0ms 1600ms
• Real-time interaction• Stream from server
12MB+/s
![Page 16: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/16.jpg)
16
Graphs: Placing Nodes and Edges
![Page 17: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/17.jpg)
17
Direct Feedback on Settings
![Page 18: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/18.jpg)
18
Uber: Trip Start to End
![Page 19: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/19.jpg)
19
Direct Edge Placement: Overplotting
![Page 20: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/20.jpg)
20
Speed Design Edge Bundling
![Page 21: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/21.jpg)
21
![Page 22: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/22.jpg)
22
web
![Page 23: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/23.jpg)
23
Bare Metal in the BrowserSequential
Multicore
GPU
5 X
4+ cores
1024 lanes
SIMD 4 lanes
![Page 24: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/24.jpg)
24
SUPERCONDUCTOR: Parallel JS Viz Engine
HTML dataCSS styling
JS script
Pixels
Parser
Selectors
Layout
Renderer
Java
Scrip
t VM
Renderer.GL
webpage
Layout.CL
Selectors.CLGPU
datastyling
widgets
data viz
Compiler
Parser.js
BROWSERSUPERCONDUCTOR.js
![Page 25: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/25.jpg)
25
Leaf
Layout as Parallel Tree Traversals
w,h w,h
w,hw,h
w,hw,h x,y …
1. Works for all data sets2. Compiler: CSS Schedule
logical joins logical
spawns
Parallelism in each traversal!
![Page 26: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/26.jpg)
26
parallel for looplevel synchronous
GPU Traversals: Flat & Level-Synchronous
level 1
Treelevel n
whxy
Nodes in arrays
flat
Array per attribute
Compiler handles transform of code & data
![Page 27: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/27.jpg)
27
More Scalable DesignsImmens (Stanford) Nanocubes (AT&T) MapD (MIT)
Abstract Rendering (Continuum) Synerscope
![Page 28: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/28.jpg)
28
![Page 29: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/29.jpg)
29
Achieve data visibility throughhardware-accelerated designs
(and deploy on the web )
![Page 30: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/30.jpg)
30
Visualize Magnitudes More Data in the Browser
Leo Meyerovich (@LMeyerov)CEO of Graphistry.com | UC Berkeley
Graphistry
![Page 31: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/31.jpg)
31
Leaf
Layout as Parallel Tree Traversals
w,h w,h
w,hw,h
w,hw,h x,y …
1. Works for all data sets2. Compiler: CSS Schedule
logical joins logical
spawns
Parallelism in each traversal!
![Page 32: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/32.jpg)
32
parallel for looplevel synchronous
GPU Traversals: Flat & Level-Synchronous
level 1
Treelevel n
whxy
Nodes in arrays
flat
Array per attribute
Compiler handles transform of code & data
![Page 33: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/33.jpg)
33
L2: 1MB
RAM: 2GB
432
432256-way SIMTGPGPU core 1
4-way SIMD
L1d: 32KB
Today’s Supercomputer-in-a-Pocket
core 1
Pref
etch
En
gine
1
Challenge: Parallelize Data
Visualization
Phone16-lane CPU
1024-lane GPU
![Page 34: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/34.jpg)
34
circ(…)
Problem: Dynamic Memory Allocation on GPU?
square(…) rect(…); …
line(…); …
rect(…); …
oval(…)
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] = cos(i)}
dynamic allocation
![Page 35: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/35.jpg)
35
Dynamic Allocation as SIMD Traversals
allocCirc(…) 4allocRect(…) 6
allocLine(…) 6
allocRect(…) 7
fillCirc(…)fillRect(…)
fillLine(…)fillRect(…)
1. Prefix sum for needed space2. Allocate buffers
3. Distribute offsets & compute4. Give OpenGL buffer
pointer
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
![Page 36: Scaling Charts with Design and GPUs](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816600550346895dd93115/html5/thumbnails/36.jpg)
36
layout (4 passes)
rendering pass
TOTAL1
10100
1,00010,000
Naïve JS (Chrome 26) GPU (Safari + WebCL 11/3) 24fpsTi
me
(ms)
CPU vs. GPU for Election Treemap: 5 traversals over 100K nodes
WebCL: 30X
WebCL: 70X
COMBINED: 54X !