The document proposes a browser-based visualization system that aggregates performance data from multiple sources using HTML5 workers to generate PNG images on multiple CPU cores. This allows for dynamic, flexible, asynchronous and interactive graphics rendering within the browser by exploiting modern multicore hardware. Experimental results show the system can update screen sections below 50ms for small PNGs but sluggish updates of 500ms for large PNGs, with the optimal configuration being 500x500 PNGs generated by any number of workers.

2. Problem Statement
• old/traditional visualization technology
• example of data center traffic visualization
• problems: centralized, too heavy, impractical, inflexible
Web
Worker
Web
Worker
CPU
Core(s)
….
PM
PM
PM
PM
Switch To Cloud
Split Merge
Traffic
Mirroring
Interactive
Display
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 2/18
2/18

3. 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 -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 3/18
3/18

4. Visualization Basics
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 4/18
4/18

5. The Best Kind of Visual
• the best thing to do is to find the best metaphor for your data
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 5/18
5/18

6. The Waterpipe Visualization
• a model based on the concept of
plumbing
• several kinds of plumbing
• not only traffic but anything --
memory, CPU, etc.
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 6/18
6/18

7. 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
47k
45k
41k
40k
37k
37k
31k
26k
25k
25k
24k24k
24k
23k 23k
22k
21k 21k
18k
16k
15k
15k
14k
11k
8k
0k
0k
0k
0k
0k
0k
0k
0k0k
0k
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 7/18
7/18

8. System Design
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 8/18
8/18

9. Key Elements
• HTML5 native binary : can create PNGs and convert them in to base64
URLs
• base64 URLs are generated by Workers on multicore -- the inteded offload
feature
• each Worker is in charge of a section of the screen
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 9/18
9/18

10. System Design and Bottlenecks
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 10/18
10/18

11. Design Goals
Gc < Ge (1)
k∑
i=0
Gb,i > Ga > Gc. (2)
• Network Goodput Ga
• Worker Goodput Gb
• Network Goodput Gc
• Main Webapp Goodput
Gd
• Screen Update
Goodput Ge
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 11/18
11/18

12. Analysis
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 12/18
12/18

13. Experimental Setup
• a dripping water model
• no network traffic, just random local generation
• try out various configurations to feel performance margins
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 13/18
13/18

14. Simple Tests
• one thing to notice: slugging
with many workers
• CPU is not affected much
regardless of the setup
• let's see a demo!
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 14/18
14/18

15. Performance Analysis (1)
0 0.2 0.4 0.6 0.8 1
Decreasing order of values
0
50
100
150
200
250
300
350
Eventinterval(ms)
Size# 200 x 200 with 5 workers
-100 -80 -60 -40 -20 0
Time relative to the end of each 60s session
15.8
16
16.2
16.4
16.6
16.8
CPUusage(eachcore)
• small PNGs, 5 workers
• per-Worker rate is about 100ms per
frame
• screen update rate is below 50ms
(per section)
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 15/18
15/18

16. Performance Analysis (2)
0 0.2 0.4 0.6 0.8 1
Decreasing order of values
0
1000
2000
3000
4000
5000
6000
Eventinterval(ms)
Size# 1000 x 1000 with 10 workers
-100 -80 -60 -40 -20 0
Time relative to the end of each 60s session
14.6
14.8
15
15.2
15.4
15.6
CPUusage(eachcore)
• large PNGs, 10 workers
• Workers can output an image only
once every 3s
• screen update interval is also around
500ms -- noticably sluggish
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 16/18
16/18

17. Overall Performance
0 50 100 150 200 250 300
Global event interval (ms)
0
1000
2000
3000
4000
5000
Per-workereventinterval(ms)
1000/3500/15
500/3
800/20
1000/15
500/20
800/3
200/5
500/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 is
the effect of multicore
offload on screen
update -- minor effect
• column height is the
overhead from
multicore messaging --
very bad for large images
• the best group:
500x500 PNGs with any
number of workers --
recommended setup
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 17/18
17/18

18. That’s all, thank you ...
M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 18/18
18/18