Transcript of Searching for the Most Cost Effective Method in Browser-Based Visualizations -- Screen Size, Pinch...
- . . 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