Apr 15, 2017
Problem Statement• old/traditional visualization technology
• example of data center traffic visualization• problems: centralized, too heavy, impractical, inflexible
WebWorkerWeb
WorkerCPU
Core(s)
….
PM
PM
PM
PM
Switch To Cloud
Split Merge
TrafficMirroring
InteractiveDisplay
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 2/182/18
Objectives
• browser aggregates performance data from multiple sources◦ dynamic, flexible, async, interactive
• graphics are generated inside browser based on raw data
• browser exploits the full potential of multicore hardware◦ in modern browsers, Workers are mapped to multiple cores, and run async
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 3/183/18
Visualization Basics
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 4/184/18
The Best Kind of Visual
• the best thing to do is to find the best metaphor for your data
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 5/185/18
The Waterpipe Visualization
• a model based on the concept ofplumbing
• several kinds of plumbing
• not only traffic but anything --memory, CPU, etc.
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 6/186/18
The Weather Visualization• the big picture in cloud performance resembles weather• typhoons, pressure fronts, etc. are easily translated from performance data
• the ugly thing on the right side: experimental visualizations
(high/low) Pressure front
Typhoon
Drought
Good weather
Bad weather
FRAME:8
userland
cloudland
otherland
47k45k
41k
40k
37k
37k31k
26k
25k
25k
24k24k
24k23k 23k
22k
21k 21k
18k
16k
15k
15k14k
11k
8k
0k
0k
0k
0k
0k0k
0k
0k0k
0k
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 7/187/18
System Design
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 8/188/18
Key Elements
• HTML5 native binary : can create PNGs and convert them in to base64URLs
• base64 URLs are generated by Workers on multicore -- the inteded offloadfeature
• each Worker is in charge of a section of the screen
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 9/189/18
System Design and Bottlenecks
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 10/1810/18
Design GoalsGc < Ge (1)
k∑i=0
Gb,i > Ga > Gc. (2)• Network Goodput Ga
• Worker Goodput Gb
• Network Goodput Gc
• Main Webapp GoodputGd
• Screen UpdateGoodput Ge
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 11/1811/18
Analysis
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 12/1812/18
Experimental Setup
• a dripping water model• no network traffic, just random local generation• try out various configurations to feel performance margins
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 13/1813/18
Simple Tests
• one thing to notice: sluggingwith many workers
• CPU is not affected muchregardless of the setup
• let's see a demo!
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 14/1814/18
Performance Analysis (1)
0 0.2 0.4 0.6 0.8 1Decreasing order of values
050
100150200250300350
Even
t int
erva
l (m
s)
Size# 200 x 200 with 5 workers
-100 -80 -60 -40 -20 0Time relative to the end of each 60s session
15.8
16
16.2
16.4
16.6
16.8
CPU
usa
ge (e
ach
core
)
• small PNGs, 5 workers• per-Worker rate is about 100ms perframe
• screen update rate is below 50ms(per section)
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 15/1815/18
Performance Analysis (2)
0 0.2 0.4 0.6 0.8 1Decreasing order of values
0100020003000400050006000
Even
t int
erva
l (m
s)
Size# 1000 x 1000 with 10 workers
-100 -80 -60 -40 -20 0Time relative to the end of each 60s session
14.6
14.8
15
15.2
15.4
15.6
CPU
usa
ge (e
ach
core
)
• large PNGs, 10 workers• Workers can output an image onlyonce every 3s
• screen update interval is also around500ms -- noticably sluggish
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 16/1816/18
Overall Performance
0 50 100 150 200 250 300Global event interval (ms)
0
1000
2000
3000
4000
5000
Per-w
orke
r eve
nt in
terv
al (m
s)
1000/3500/15
500/3
800/20
1000/15
500/20
800/3
200/5500/5
800/10
200/10200/3
1000/20
200/20
1000/5
800/15
1000/10
500/10 800/5
200/15
• width of each virtual column isthe effect of multicoreoffload on screenupdate -- minor effect
• column height is theoverhead frommulticore messaging --
very bad for large images
• the best group:500x500 PNGs with anynumber of workers --recommended setup
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 17/1817/18
That’s all, thank you ...
M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 18/1818/18