Name Sanobar Nishat (113052001) MTP : Implementation Issues of Visualization on Small screen devices Report: Summary Report 4 (week 4) Date: 4 Feb 13 Summary: Graphical data visualization is used to display data in a comprehensive way in form of various types of graphs. There are many different toolkits to choose from and there is a broad range of technologies being used for visualizing information using Javascript. These technologies include HTML5 (Canvas elements and DOM manipulation), CSS3 and vector graphic formats (SVG, VML). These libraries simplify the development process of custom visualization tools and provides basic types of graphs like: Pie charts, Line charts, Area charts as well as some special graphs like: Sunburst (with Highcharts), Gauges (with RGraph). There are certain benefits and trade-offs between SVG and Canvas. It also allows for control of elements via the DOM and CSS and has much better support for interactivity (i.e. every visual object can have event listeners). D3 creator Mike Bostock shows that D3 performance can render 500 animated circles in SVG at a resolution of 960 500 at about ~40 FPS in Chrome, whereas rendering the same via the Canvas element was closer to ~30 FPS. JIT - JavaScript InfoVis Toolkit JIT is an OpenSource JavaScript library used for creation of some special kinds of visualisation graphics. Customization and changes on the examples are not easy to do because of very complex data set and local settings coded in JavaScript. Technology: It is based on HTML5 canvas element. Browser Compatibility: Supported in all modern browser, not supported on IE 8 and below and Aakash browser (i.e. UbiSurfer browser or Android 4.0.4 [discussion required]) Layouts: o Layout with basic charts: Area, Bar and Pie charts o Special graphs: Sunburst, Icicle, ForceDirected, TreeMap, RGraph Data Driven Documents - D3 D3 is the successor of Protovis. It is more flexible than JIT. If a browser does not support the standards W3C DOM, SVG and CSS (or CSS3 Transitions) D3 won t compensate the missing support. Technology: D3 binds data to DOM using JavaSctript, CSS3, HTML5 and SVG, combining powerful visualization components and a data-driven approach to DOM manipulation. Browser Compatibility: o Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari support SVG. o IE8 and earlier needs a plug-in [source: http://www.w3schools.com/svg/svg_intro.asp] Layout: Hierarchical edge bundling, Node-Link Tree, Treemap, Zoomable Pack Layout, Zoomable Sunburst
Comparison of the technology: SVG SVG stands for Scalable Vector Graphics defines vector-based graphics for the Web in XML format. It also allows for control of elements via the DOM and CSS and has much better support for interactivity (i.e. every visual object can have event listeners). SVG performance instead scales with the complexity and size of the scenegraph. Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape. CANVAS Canvas has performance that scales with the size of the image area. Resolution dependent No support for event handlers Poor text rendering capabilities Well suited for graphic-intensive games Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic. Experiment: render 500 animated circles 1280 x 800 resolution and 2GB RAM: (http://en.akihabaranews.com/19898/legacyunused/pc/sony-unveils-their-new-vaio-type-c-thevgn-cs60b) To & Fro movement of rectangular box: 199-200 fps (http://techblog.floorplanner.com/) 800 x 480 resolution and 512 MB RAM (http://aakash.org.in/355/can-i-still-book-anaakash-tablet-pc) To & Fro movement of rectangular box: 34-41 fps Experiment: To & Fro movement of rectangular box 1280 x 800 resolution and 2GB RAM: 500 circles = 20 fps 1000 circles=11 fps 9000 circles=1 fps (.90 sec) 100 circles=60 fps 50 circles = 63 fps 1 circle = 63 fps 800 x 480 resolution and 512 MB RAM 500 circles=3 fps 100 circles=8fps 1000 circles=2 fps (.54 s) 50 circles=12fps 1280 x 800 resolution and 2GB RAM: To & Fro movement of rectangular box: 150-160 fps 800 x 480 resolution and 512 MB RAM To & Fro movement of rectangular box: 34-41 fps 1280 x 800 resolution and 2GB RAM: 500 circles = 12 fps 1000 circles=7 fps 9000 circles=1 fps (.142 sec) 100 circles=35 fps 50 circles = 35-55 fps 1 circle = 55-75 fps 800 x 480 resolution and 512 MB RAM 500 circles=3 fps 100 circles=10 fps 1000 circles=2 fps (.70 s) 50 circles=12fps Conclusion: Knowing what we know about how canvas scales, if the image area were less than 960 x 500, then canvas performance would increase, whereas SVG performance would not change.
Week # ACTION PLAN Date Description of Work Work Completed 1 2 6 19 Jan Study of the open source data visualization tools. e.g. JavaScript InfoVis Toolkit, D3.js, Slider. 3 20 26 Jan Test the compatibility of the tools on Aakash Tablet PC 4 27, Jan 2, Feb Study different visualization technique on Aakash tablet 5 3 9 Feb Analysis of Visualization technique and 6 10 16 Feb. 7 17 23 Feb. 8 24 28 Feb suggest appropriate parameters for each suitable technique for Aakash tablet. Design Data (XML or JSON format) to check the usability of the design parameters of choosed visualization technique 9-14 1 31 Mar Design a Class Network or Library Application (need to finalize) Studied working of JIT and D3 toolkit with 2 different layout (node-link tree, hyperbolic tree) JIT is not supported on Aakash default browser (because it uses Canvas element). Installed Chrome. Both the toolkit is compatible.