2. .
.
Objectives: The Why
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
2 /21
2/21

3. .
.
Objectives: Assumptions
.
The Biggest Assumption is...
.
future visualizations will happen
... that
all
in browsers
• not necessarily in Firefox, Chrome, etc., but based on the web
approach
• the web approach:
events and async processing
2. callbacks
3. generic AJAX and Web 2.0 tricks
1.
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
3 /21
3/21

4. .
.
Objectives: The Wish List
compex datatypes in browser
◦ specific example: a MetroMap 03
2. mixed datatypes: text with drawing
3. prefer vector, but will settle for rastor if necessary
1. need to draw
4. precision, scale, navigation, browsing, etc. -- the functions on the wish list
03 myself "Nicecover: LOIS研 Slides" http://www.slideshare.net/zhopasushami/slides-26150221 (2013)
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
4 /21
4/21

5. .
.
Objectives: Specific Uses
NIcecover project 02 03
• it is a serverless webapp -- meaning of serverless in 03
• need such an engine for the
• user access via Chrome Extension, but the environment is normal-web -- you can
use
jQuery, Dropbox, etc.
02 myself "Nicecover: Project Page" http://www.github.com/maratishe/nicecover (2013)
03 myself "Nicecover: LOIS研 Slides" http://www.slideshare.net/zhopasushami/slides-26150221 (2013)
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
5 /21
5/21

6. .
.
Options: Browser Based Drawing
Technologies
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
6 /21
6/21

7. .
.
Options: Technology Shortlist
pure HTML, SVG, CANVAS,
Flash, custom plugins
• the actual list:
• cross out
custom plugins and Flash -- thus restricting to purely
HTML5/CSS3 technologies
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
7 /21
7/21

8. .
.
Technologies and Functions
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
8 /21
8/21

9. .
.
Technologies and Functions
HTML: drawing (ugly version) and text are done in HTML boxes
2. SVG: both drawing and text are done in SVG -- the technology is built for that
1.
very purpose
3.
CANVAS: drawing is done in canvas but text is in boxes in upper layer
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
9 /21
9/21

10. .
.
Technologies and Functions
• all the HTML, SVG and CANVAS are
the same set of abilities
rotation transform -- even HTML can do it under CSS3
• scaling transform
• text as buttons with animation
•
• ...
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
10 /21
10/21

11. .
.
Testcases and Demos
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
11 /21
11/21

12. .
.
Testcases: The Baseline
viz
pca
dependency
multidimensional
vne
ieiceconf
opportunetstic
smil
performance
multiflow
multimedia
aggregation
crosslayer
• a MetroMap 05
modeling
theory
•
layout: NEATO algorithm, part of
Graphviz library
models
todo
•
software
kbseken
visualization
test
game
hardware
benchmark
networking
testing
opportunistic
session
ospf
drawing: first draw lines then
stations --- stations are buttons for
interactivity
cloud
optimization
05 K.Nesbitt "Getting to more abstract places using the metro map metaphor" 8th Int.Conf. on Information Visualization (IV) (2004)
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
12 /21
12/21

13. .
.
Testcases and Demos: Implementation
• open source at 01
•
upper window: drivers for
each technology
•
lower window: interface for
any/each technology
01 myself "This (browserviz) Code" http://www.github.com/maratishe/browserviz (2013)
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
13 /21
13/21

14. .
.
Testcases and Demos: HTML
http://tunyurl.com/kyutech131201a
browser window
Interactions
drawing
canvas
HTMLcanvas
box canvas
canvas
canvas canvas
canvas
text
M.Zhanikeev -- maratishe@gmail.com --
ugly but still understandable
• play with box sizes, scales, and
pinching in your computer
• drawing is
Internet
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
14 /21
14/21

15. .
.
Testcases and Demos: SVG
http://tunyurl.com/kyutech131201b
browser window
Interactions
drawing
SVG elementcanvas
canvas canvas
canvas
canvas
canvas
canvas
text
M.Zhanikeev -- maratishe@gmail.com --
• drawing is
Internet
much better but fonts
are harder to manage -- no way to find the size
of a box in SVG
box sizes, scales, and
pinching in your computer
• play with
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
15 /21
15/21

16. .
.
Testcases and Demos: CANVAS
http:/tunyurl.com/kyutech131201c
Interactions
drawing
HTMLcanvas
canvas
canvas
box
canvas
canvas
HTML CANVAS
browser window
text
M.Zhanikeev -- maratishe@gmail.com --
• drawing is the same as in SVG
•
Internet
text is in HTML where box
dimensions are handled natively -- high
efficiency and flexibility
box sizes, scales, and
pinching in your computer
• play with
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
16 /21
16/21

17. .
.
Summary and Lessons
drawing: better in CANVAS and SVG
• text: better when HTML boxes are used
• scale by pinch: perfect performance
• scale by transform: breaks and becomes unreliable
•
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
17 /21
17/21

18. .
.
The Ultimate (my current best)
solution
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
18 /21
18/21

19. .
.
My Solution: HTML + fluid layout
http://tunyurl.com/kyutech131201d
browser window
• go for
MetroMaps
• drawing is non-existent -- borders of boxes play
Internet
this role
• none of the above problems -- text and scale
are relative to each other
•
navigation window makes
browsing possible
…
Interactions
drawing
HTML box
canvas
canvas
HTML Group
text
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
19 /21
19/21

20. .
.
My Solution: Screenshot
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
20 /21
20/21

21. .
.
That’s all, thank you ...
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
21 /21
21/21

22. .
.
[01] myself (2013)
This (browserviz) Code
http://www.github.com/maratishe/browserviz
[02] myself (2013)
Nicecover: Project Page
http://www.github.com/maratishe/nicecover
[03] myself (2013)
Nicecover: LOIS研 Slides
http://www.slideshare.net/zhopasushami/slides-26150221
[04] w3cschool (2013)
CSS3: 2D Transforms
http://www.w3schools.com/css/css3_2dtransforms.asp
[05] K.Nesbitt (2004)
Getting to more abstract places using the metro map metaphor
8th Int.Conf. on Information Visualization (IV)
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
21 /21
21/21

23. .
.
[06] J.Stott+4 (2005)
Automatic layout of project plans using a metro map metaphor
9th IntConf. on Information Visualization (IV)
M.Zhanikeev -- maratishe@gmail.com --
Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 ---
21 /21
21/21