• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Searching for the Most Cost Effective Method in Browser-Based Visualizations -- Screen Size, Pinch to Scale, Search and Browse
 

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

on

  • 122 views

 

Statistics

Views

Total Views
122
Views on SlideShare
122
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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