Content Visualization Issues

Transcription

1 Name Sanobar Nishat ( ) MTP : Interactive method of Data Visualization on Small screen devices Report: Summary Report 6 (week 18) Date: 14 May 13 Summary: Information visualization on small screen devices has always been a huge challenge in research community. This work discusses issues and modification in transporting the existing information visualization technique on small screen device particularly on Tablet PCs. An experimental approach is used to compare four well-known visualization techniques includes space tree, hyperbolic tree, Icicle tree and treemap for displaying hierarchical data. The designs are evaluated on three criteria I) task completion time, ii) task correctness, iii) user interaction and satisfaction and iv) understanding of overall topology. The result suggested that space tree visualization is preferred over other visualization method for hierarchical data. Experiments are conducted to learn the usability and effectiveness of these layouts in performing information searching tasks. Experimental Setup In the experiment, 4 tree-browsing layouts were compared: Hyperbolic tree, Icicle tree, Space tree and treemap. All the experiments are done on an Datawind UbiSlate 7Ci tablet PC of 800x480 screen resolution with 1GHz CPU 512MB of RAM running Android It is 7-inches touch-screen device with finger touch (or stylus) as a primary mean of control. Each visualisations occupied 800x380 pixels on display area. The layouts were developed using Javascript Infoviz toolkit (JIT) [17], an open source library for interactive data visualisation on web. The application was resided in user tablet to avoid delay due to network connection and providing uniform means for comparison. Design The experiment set-up was consisted of 4(layout)x13(tasks) with different set of data to each layout. The analysis is based on repeated-measure design with tree layout as a variant factor. Each dataset is repeated equal number of times with all four tree layouts; hence provides equal basis for comparison. Data is collected from online data repository in four different category: (i) online shopping database, (ii) data on different spoken languages in the world, (iii) World top universities ranking in last three years and (iv) Film awards database. Variable structure and size of datasets were used to analyse the performance of each layout. Table II lists the variations in size and topology of each database. The text of the labels was kept smaller to avoid clustering of nodes. User could navigate through the tree by tabbing on the node?s label. To increase readability and interactivity, the font size of the label is set to 12 pt. All the dataset were of feasible size to avoid overlapping of the nodes. Automatic adjustment technique was provided to balance the spacing between the nodes at same or different levels of hierarchy. Only upto four levels of tree hierarchy was visible to the user at one time to avoid showing bulk of data. Tasks Users were asked to perform thirteen different tasks for each tool. Tasks were divided into following four categories: 1) Tree Overview: User understanding about the topology of the layout was tested with four different tasks. _ Balanced/Unbalanced Tree Participants were asked to find if the tree is balanced or unbalanced. They were explained that all the leaf node in a balanced tree will be at the same level or two consecutive levels while this is not the condition in unbalanced tree. Height of the Tree Participants was told to find the maximum number of hierarchical levels in the tree. _ Bushiest Child node Test users were asked to find a node with most number of leaf nodes. 2) Data Search: Participants were given three data searching task for each layout. _ Find Parent Node Given a node, users were asked to find the parent of the node.

2 _ Depth of a Node Participants were given a node in the hierarchy, they were asked to find the level at which the node was presented. 3) Data Comparison: Participants were explained different layout to find highest or smallest value node. In the case of treemap and Icicle, the area of the node corresponds the value of the node. While in hyperbolic tree and space tree, the label contains the value of the node. 4) Data Counting: Participants were given multiple tasks for counting child nodes of a given node at different levels of hierarchy. Previous work TreeMap y.com/map-of-themarket/ /hcil/treemap-history/ User Friendly Layout Application Type Requires explanation Too much data at first glance, clumsy SpaceTree Intuitive, self explanatory Only relevant data shows through navigation Hypertree Intuitive, self explanatory Only relevant data shows through navigation Icicle Intuitive, self explanatory Only relevant data shows through navigation. Unlike spacetree, the rectangular area can e utilize to display brief data information CirclePacking Intuitive, self explanatory Layout shows relation or Large Similar type of data. Ex author and books Suited for Deep hierarchal structure Able to show many nodes compare to tree but overlaps if multiple nodes of the same level open Suited for Deep hierarchal structure. The size of rectangular area shows the count of data. Feasible for data showing Fit for tab Yes. Better utilization of space Yes. No. Requires a square area to display Yes. Better utilization of space No, wastage of area due to

3 hierarchy but overlap data information is infeasible to read. size or can be represent able by different color scheme. circular region; not feasible due to overlap technique 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 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 [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: Layout: Hierarchical edge bundling, Node-Link Tree, Treemap, Zoomable Pack Layout, Zoomable Sunburst

4

5

6

7

8

9

10 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: ( To & Fro movement of rectangular box: fps ( 800 x 480 resolution and 512 MB RAM ( To & Fro movement of rectangular box: 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: fps 800 x 480 resolution and 512 MB RAM To & Fro movement of rectangular box: 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 = fps 1 circle = 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 or decrease.

11 Week # ACTION PLAN Date Description of Work Work Completed Jan Study of the open source data visualization tools. e.g. JavaScript InfoVis Toolkit, D3.js, Slider Jan Test the compatibility of the tools on Aakash Tablet PC 4 27, Jan 2, Feb Study different visualization technique on Aakash tablet Feb Analysis of Visualization technique and Feb Feb 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 Mar Design a browser based tool to view the and share the data using interative visualisation 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. Motivation for Tool Development: The motivation behind the development of a browsing data visualization tool has come from an online tool, developed by IBM for users to share and discuss data, and learn and explore different aspects in the data. It allows user to upload data through external formatted file e.g. excel file. We have imported the similar idea in our work in addition to some other features, to provide a better data sharing among students and teacher in a more interactive and impressive way. In a running system, database is the main storage for the entire academic and students data. This tool is aimed to provide users e.g. teachers and students, to see the data according to their needs and interest in a more interactive way. Features: Upload Excel File View Previous Uploaded Files View Data from Database using Query View Data from Previously Created Query View Data with Interactivity

12 Purpose: Treemap is pie chart's big brother. Treemaps divide up a rectangle into hierarchical categories, letting you see relationships among large numbers of components. This lets you get an overview of a complex whole -- and drill down. If you want to map a comparison of now vs. then? City vs. highway? Decaf vs. regular? The treemap lets you directly compare two different takes on a set of categorized items. It helps students to search the required data in more interactive way. The tool will provide a way to the teachers to provide more information to the students using interactive queries. It also helps teachers to compare the performance of each students. Treemap technique is considered to provide such comparison among data at a glance. Visualisation technique can be modify to include incorporating other file format within visualization e.g. pdf, audio, video. It will help student to search the relevant information from a well structured hierarchical data.