Your SlideShare is downloading. ×
Searching for the Most Cost Effective Method in Browser-Based Visualizations -- Screen Size, Pinch to Scale, Search and Browse
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

74
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
74
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. . . 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. . . 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. . . 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. . . 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. . . 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. . . Technologies and Functions M.Zhanikeev -- maratishe@gmail.com -- Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 --- 8 /21 8/21
  • 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. . . 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. . . Testcases and Demos M.Zhanikeev -- maratishe@gmail.com -- Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 --- 11 /21 11/21
  • 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. . . 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. . . 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. . . 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. . . 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. . . 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. . . 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. . . 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. . . My Solution: Screenshot M.Zhanikeev -- maratishe@gmail.com -- Cost Effective Method in Browser-Based Visualizations -- http://tinyurl.com/kyutech131201 --- 20 /21 20/21
  • 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. . . [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. . . [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