. . 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

. . Thats 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