.

.

Objectives: The Why

M.Zhanikeev -- maratishe@gmail.com --

Cost Effective Method in Browser-Based Visualizations --...
.

.

Objectives: Assumptions
.
The Biggest Assumption is...
.
future visualizations will happen
... that

all

in browser...
.

.

Objectives: The Wish List
compex datatypes in browser
◦ specific example: a MetroMap 03
2. mixed datatypes: text wit...
.

.

Objectives: Specific Uses
NIcecover project 02 03
• it is a serverless webapp -- meaning of serverless in 03
• need ...
.

.

Options: Browser Based Drawing
Technologies

M.Zhanikeev -- maratishe@gmail.com --

Cost Effective Method in Browser...
.

.

Options: Technology Shortlist
pure HTML, SVG, CANVAS,
Flash, custom plugins

• the actual list:

• cross out

custom...
.

.

Technologies and Functions

M.Zhanikeev -- maratishe@gmail.com --

Cost Effective Method in Browser-Based Visualizat...
.

.

Technologies and Functions
HTML: drawing (ugly version) and text are done in HTML boxes
2. SVG: both drawing and tex...
.

.

Technologies and Functions
• all the HTML, SVG and CANVAS are

the same set of abilities

rotation transform -- even...
.

.

Testcases and Demos

M.Zhanikeev -- maratishe@gmail.com --

Cost Effective Method in Browser-Based Visualizations --...
.

.

Testcases: The Baseline
viz

pca

dependency

multidimensional

vne

ieiceconf

opportunetstic

smil

performance

m...
.

.

Testcases and Demos: Implementation
• open source at 01
•

upper window: drivers for
each technology

•

lower windo...
.

.

Testcases and Demos: HTML
http://tunyurl.com/kyutech131201a

browser window

Interactions

drawing

canvas
HTMLcanva...
.

.

Testcases and Demos: SVG
http://tunyurl.com/kyutech131201b

browser window

Interactions

drawing

SVG elementcanvas...
.

.

Testcases and Demos: CANVAS
http:/tunyurl.com/kyutech131201c

Interactions

drawing

HTMLcanvas
canvas
canvas
box
ca...
.

.

Summary and Lessons
drawing: better in CANVAS and SVG
• text: better when HTML boxes are used
• scale by pinch: perf...
.

.

The Ultimate (my current best)
solution

M.Zhanikeev -- maratishe@gmail.com --

Cost Effective Method in Browser-Bas...
.

.

My Solution: HTML + fluid layout
http://tunyurl.com/kyutech131201d

browser window

• go for

MetroMaps

• drawing i...
.

.

My Solution: Screenshot

M.Zhanikeev -- maratishe@gmail.com --

Cost Effective Method in Browser-Based Visualization...
.

.

That’s all, thank you ...

M.Zhanikeev -- maratishe@gmail.com --

Cost Effective Method in Browser-Based Visualizati...
.

.

[01] myself (2013)
This (browserviz) Code
http://www.github.com/maratishe/browserviz
[02] myself (2013)
Nicecover: P...
.

.

[06] J.Stott+4 (2005)
Automatic layout of project plans using a metro map metaphor
9th IntConf. on Information Visua...
Searching for the Most Cost Effective Method in Browser-Based Visualizations -- Screen Size, Pinch to Scale, Search and Br...
Upcoming SlideShare
Loading in …5
×

Searching for the Most Cost Effective Method in Browser-Based Visualizations -- Screen Size, Pinch to Scale, Search and Browse

245 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
245
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Searching for the Most Cost Effective Method in Browser-Based Visualizations -- Screen Size, Pinch to Scale, Search and Browse

  1. 1. . . Objectives: The Why M.Zhanikeev -- maratishe@gmail.com -- Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 --- 2 /21 2/21
  2. 2. . . 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
  3. 3. . . 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
  4. 4. . . 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
  5. 5. . . 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
  6. 6. . . 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
  7. 7. . . Technologies and Functions M.Zhanikeev -- maratishe@gmail.com -- Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 --- 8 /21 8/21
  8. 8. . . 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
  9. 9. . . 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
  10. 10. . . Testcases and Demos M.Zhanikeev -- maratishe@gmail.com -- Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 --- 11 /21 11/21
  11. 11. . . 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
  12. 12. . . 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
  13. 13. . . 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
  14. 14. . . 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
  15. 15. . . 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
  16. 16. . . 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
  17. 17. . . 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
  18. 18. . . 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
  19. 19. . . My Solution: Screenshot M.Zhanikeev -- maratishe@gmail.com -- Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 --- 20 /21 20/21
  20. 20. . . 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
  21. 21. . . [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
  22. 22. . . [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

×