. . 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 --
[email protected] -- 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 -- [email protected] -- 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 -- [email protected] -- Cost Effective Method in
Browser-Based Visualizations -- http://tinyurl.com/kyutech131201
--- 5 /21 5/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 -- [email protected] -- 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 -- [email protected] -- Cost Effective Method in
Browser-Based Visualizations -- http://tinyurl.com/kyutech131201
--- 10 /21 10/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 -- [email protected] -- 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 --
[email protected] -- 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 -- [email protected]
-- 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 -- [email protected]
-- 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 -- [email protected] -- 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 --
[email protected] -- Cost Effective Method in Browser-Based
Visualizations -- http://tinyurl.com/kyutech131201 --- 17 /21
17/21
. . The Ultimate (my current best) solution M.Zhanikeev --
[email protected] -- 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 --
[email protected] -- Cost Effective Method in Browser-Based
Visualizations -- http://tinyurl.com/kyutech131201 --- 19 /21
19/21