37
Master Project Report IMPLEMENTATION ISSUES OF VISUALISATION ON SMALL DISPLAY DEVICES Submitted in partial fulfillment of the requirements for the degree of Master of Technology By Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering Indian Institute of Technology, Bombay Mumbai-400076

Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

  • Upload
    lexuyen

  • View
    219

  • Download
    2

Embed Size (px)

Citation preview

Page 1: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Master Project Report

IMPLEMENTATION ISSUES OF VISUALISATION ONSMALL DISPLAY DEVICES

Submitted in partial fulfillment of the requirements for the degree of

Master of Technology

By

Sanobar Nishat

Roll No: 113052001

Under the guidance of

Prof. D.B. Phatak

Nov, 2012

Department of Computer Science and EngineeringIndian Institute of Technology, Bombay

Mumbai-400076

Page 2: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Abstract

Visualization is an abstract representation of data element and information in somesemantic form. Information visualization techniques have been studied by many re-searchers and are developed in many forms for desktop. Increasing demand of smallscreen devices (e.g. Tablet PC, PDA personal digital assistant, smartphones etc.) ne-cessitate the development of innovative visualization techniques suited for small displaydevices. Though, these devices pose limitation to directly apply the existing visual-ization techniques on Tablet PC, PDA and mobile phones. Some of the limitations ofthese devices are limited screen size, limited calculation ability, small memory size. Thiswork illustrates the various available information visualization technique, designed fordesktop application and also provides evaluation among these techniques on the basisof data type and size of Information. Evaluation also includes the effectiveness of eachvisualization technique in context of device features and limitations. Moreover, thework also proposes the development of a resource browsing application e.g. library ap-plication, for Aakash Tablet PC using available visualization techniques by taking intoaccount the evaluation results for most suited Visualization technique for such devices.

Page 3: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Acknowledgment

I would like to express my deep gratitude to Prof. D.B.Phatak, who has always beenmaking things simple to understand. Without his deep insight into this domain and hisvaluable time for this project, it would not have been possible for me to move aheadproperly. He has been remarkable in his attempt to keep me motivated in this projectand has always tried to improve me with proper feedback.

1

Page 4: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Contents

Chapter 1 Introduction 51.1 Aakash Tablet PC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Chapter 2 Visualization 72.1 Process Of Visualization . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.1.1 Mapping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.1.2 Selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.1.3 Presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.1.4 Interactivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.1.5 Human Factors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.1.6 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.2 Types of Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.2.1 Sequential Layout . . . . . . . . . . . . . . . . . . . . . . . . . . 92.2.2 Hierarchical Layout . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.3 Classification of Visualization Method . . . . . . . . . . . . . . . . . . . 92.4 Interactivity with Visualization . . . . . . . . . . . . . . . . . . . . . . . 10

2.4.1 Zoomable Interface . . . . . . . . . . . . . . . . . . . . . . . . . . 102.4.2 Zoom + Pan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.4.3 Overview + Detail View . . . . . . . . . . . . . . . . . . . . . . . 112.4.4 Focus + Context or Fish Eye View . . . . . . . . . . . . . . . . . 122.4.5 Rapid Serial Visual Presentation (RSVP) . . . . . . . . . . . . . 12

2.5 Visualization Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.5.1 The Classical Hierarchical View . . . . . . . . . . . . . . . . . . . 142.5.2 Space tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.5.3 Hyperbolic Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . 152.5.4 Radial Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.5.5 Cone Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.5.6 TreeMap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.5.7 Fluid View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.6 Evaluation Of Visualization Techniques . . . . . . . . . . . . . . . . . . 212.6.1 Space Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.6.2 Hyperbolic Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.6.3 Radial Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.6.4 Cone Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.6.5 TreeMap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

2.7 Learning on Small Display Devices . . . . . . . . . . . . . . . . . . . . . 24

Chapter 3 Small Display Devices 253.1 Definitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

2

Page 5: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

3.2 Limitations of Small Display Devices . . . . . . . . . . . . . . . . . . . . 263.3 Physical Characteristics of Display Devices . . . . . . . . . . . . . . . . 26

3.3.1 Display Device Characteristics . . . . . . . . . . . . . . . . . . . 283.4 Visual Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

3.4.1 Hue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283.4.2 Luminance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293.4.3 Texture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303.4.4 Motion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Chapter 4 Conclusion and Future Work 314.1 Visual Layout for Content Rendering . . . . . . . . . . . . . . . . . . . . 31

4.1.1 Library Application . . . . . . . . . . . . . . . . . . . . . . . . . 324.1.2 Class Network . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

3

Page 6: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

List of Figures

2.1 A zoom + pan example [9]. . . . . . . . . . . . . . . . . . . . . . . . . . 112.2 An overview + detail example [7]. . . . . . . . . . . . . . . . . . . . . . 122.3 A Focus + Context or FishEye View example [7]. . . . . . . . . . . . . . 122.4 An example of the operation of the RSVP technique [12]. . . . . . . . . . 132.5 The Classical Hierarchical View [14]. . . . . . . . . . . . . . . . . . . . . 142.6 An example of the Space Tree [14]. . . . . . . . . . . . . . . . . . . . . . 152.7 An example of the hypertree [15]. . . . . . . . . . . . . . . . . . . . . . . 162.8 An example of the hypertree, changing the focus [15]. . . . . . . . . . . . 162.9 An example of the Radial tree [18]. . . . . . . . . . . . . . . . . . . . . . 172.10 An example of the detailed view of Radial tree [18]. . . . . . . . . . . . . 182.11 An example of Cone tree [7][19]. . . . . . . . . . . . . . . . . . . . . . . 192.12 A ConeTree displays category labels and a WebBook shows retrieval re-

sults. The left-hand page shows the title and the category labels associatedwith the document. The right-hand page shows the abstract associatedwith the document [19]. . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

2.13 An example of Tree Map [21]. . . . . . . . . . . . . . . . . . . . . . . . . 212.14 Fluid Views comprise two interconnected layers: the top layer features

items at varying scales superimposed over a zoom-able base layer, forexample, representing time, location, and content [22]. . . . . . . . . . . 21

2.15 An example of Fluid View [22]. . . . . . . . . . . . . . . . . . . . . . . . 222.16 To see the exact positions of cluster members, a cluster can be opened fol-

lowing a transition arranging the items around the cluster and displayingedges to their actual place on the base map [22]. . . . . . . . . . . . . . . 22

2.17 Image on left-hand side: Zooming from a continental view (a) to theMediterranean (b), and finally a regional close-up (c). With increasinggeographical detail in the map, the displayed blog articles are continuouslyrefined. Image on Right-hand side: The time scale is changed from (a)two months, to (b) two weeks, and (c) seven days [22]. . . . . . . . . . . 23

3.1 Visualization of a weather dataset using perceptual texture elements withtemperature hue, wind speed density, pressure size, precipitation ori-entation, and cloud coverage luminance [28] . . . . . . . . . . . . . . . . 29

4

Page 7: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Chapter 1

Introduction

Visualization provides users a quick and better understanding of data to solve varioustasks or to take better decisions. Abstract information has been presented as visualrepresentation to elucidate data and unveil trends or patterns in the data [1]. Withthe rapid increase of technology, and graphical power of computers, the technique hastouched almost all domain of computer application.

This success provides an opportunity and a huge demand to implement this tech-nology on small devices like PDA (Personal Digital Assistant), smart phones and tabletPC. Unfortunately, it is not a straight forward adapting from desktop computers tothese devices due to following limitations of these devices [2][3].

- Limited computational capability- Limited display size- Small memory volume- Low network bandwidth

While a large number of researches are going on proposing effective data visualizationtechniques. An enormous need exists for the researchers to come up with innovativedata visualization design and technique specifically for small display devices consid-ering its limitation. No paper in the literature has yet discussed the effect of theselimitation i.e. comparison of different display size and effects of visual acuity on datavisualization. Significant research is also needed to study the compatibility of various vi-sualization techniques suitable for different types of applications on small screen devices.

A range of applications from various domains have been developed for small screendevices to provide easy access to the user. By taking advantage of the proposed visual-ization techniques these devices can also be used adequately for training and teachingpurposes. [4].

1.1 Aakash Tablet PC

UbiSlate Smartphone/tablets (Aakash tablet), a project of Indian Ministry of HumanResource Development on Education Programme, that aims to link 25,000 colleges and400 universities in an e-learning program [5]. It is a low-cost tablet computer with a7-inch touch screen, ARM 11 processor and 256 MB RAM running under the Android

5

Page 8: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

2.2 operating system [6].

This work is a part of “Aakash” project to design educational applications to meetdifferent educational need of students and teachers. The limitations of the Aakashtablet i.e. screen size and computational power, requires innovative information visual-ization techniques to effectively utilize the device for learning and educational purposes.Through the following chapters, we will discuss in detail (i) peculiarities of visualizationand its types, (ii) techniques to improve visualization, (iii) information visualizationtechniques for small screen devices,(iv) evaluation of different information visualizationtechniques, (v) features and limitations of small screen device, and (vi) conclusion andproposed future work of development of resource browsing application for Aakash tablet.

6

Page 9: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Chapter 2

Visualization

“If I can’t picture it, I can’t understand it.” —Albert Einstein

Visualization takes in the pictorial representation in your mind what is happening inthe text. Visualization of narrative text makes use of sensory images like sounds, touch,physical sensations, smells, and emotions communicated in the story to help you picturethe story.The most referred definition in literature explains Visualization as: “the use ofcomputer-supported, interactive, visual representations of data to amplify cognition”,where cognition means the function of nervous system to perceive, store, process, anduse the information gathered by sensory receptors.

The question arises that why is visualizing so important? The answer is because thebrain “sees” in order to save and process information. Visualization provides the trans-formation of a non visual quantifiable data into a visual representation form for brainto better understand and explore the data and its hidden patterns.The soul purposethat visualization fulfills is to figure out what is insight. Visualization is use to explore,illustrate, discover and convey information in well explanatory form. Visualization isefficient in presenting bulk of data compactly and coherently and furnishes multipleslayer of details from different view points and provide them on-demand. Besides havingvarious benefits of visualization, it is equally essential to evaluate it in the context ofits usage, effectiveness, ease of incorporating them, and robustness. Visualization isa powerful technique for performing various cognitive specific process like descriptive,exploratory and analytical [7]..

2.1 Process Of Visualization

The process of constructing a well disciplined visualization consists of different steps,briefly lists in the literature of “Chittaro, 2006”. The list comprises of the followingdifferent steps i.e. (i) mapping, (ii) selection, (iii) presentation, (iv)interactivity, (v)usability, and (vi) evaluation, which describes the major task involving visualizationand to give accurate and error free model. Explanation of these steps is given in thefollowing sub-sections [2][8].

7

Page 10: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

2.1.1 Mapping

Mapping is the first act towards achieving visualization. It is the process of analyzingthe data and encode them in to visual form. Through this process, data or informationtransforms in to a graphical representation based on given visual features. Depending onthe clarity and concreteness of the relationship between data objects and visual objects,a more accurate and precise visual form can be be generated through mapping.

2.1.2 Selection

Selection is the second action in the visualization process. Selection means to choosethe appropriate data among the mass of data suited for given task or job. The processaims to the selection of data pertinent for the visual graphics or pictorial representation.In the visualization process, the selection step considers to be the most crucial as theselection of wrong data can mislead the user while taking major decision; hence greatcare needs to be taken in the data selection process and should refrain from unnecessarydata.

2.1.3 Presentation

Presentation is the third step for visualization. In the context of visualization, presenta-tion means how to effectively convey the textual information in the pictorial form in thelimited available screen space. After affective mapping, careful selection of data itemsit is equally important to present it in more concise, understandable and useful form.

2.1.4 Interactivity

Interactivity is the fourth step in the visualization process. In this step, the main focusis to provide an easy and user friendly interaction considering the provided facilities toexplore, establish and rearrange the visualization. A good user interactivity enables auser to easily analyze, understand, and annotate the data or information, by enhancingtheir exploration capabilities.

2.1.5 Human Factors

Human factor is also an important consideration for designing visualization feature.These factors categories into two broad group, usability and accessibility. End usershould find easy to use the visualisation. The use of human visual perception andcognitive knowledge is very effective in designing of the visualization and a commonpractice in Human Computer Interaction.

2.1.6 Evaluation

The most intrinsic task in visualization is to evaluate it for the best use dependingupon the provided features and limitations. Evaluation is also needed to examine theeffectiveness of visualization method suited for the application or Information , and thatthe visualization accomplish the goal or not.

2.2 Types of Information

With the increase of amount of information and complexity among their relations ,efficient technique to layout the data on the display screen is being more and more

8

Page 11: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

important. Based on the types of Information, layout can be broadly divided into twoforms [10].

1. Sequential layout2. Hierarchical layout

2.2.1 Sequential Layout

The information that are linear or has less interrelation between data can be efficientlydisplay using sequential layout. For example, the linear list of websites as a result of aquery search on search engines i.e. Google. This method doesn’t require to interpretdata in some other visual form e.g. graph, chart. It simply displays the results in theform of the list.

2.2.2 Hierarchical Layout

Hierarchal layout effectively captures the complex relation and hierarchy between in-formation. Through this arrangement, complications in the data can be simplified into simpler form which also reveals hidden trends and patterns in the data.Horizontal,vertical and circular or radial layout are different formats to represent Hierarchal infor-mation. Different visualization techniques uses different layout matches to the specificneeds. Tree, charts and graphs are the traditional approaches used in hierarchical layout.

In the subsequent section, different visualization techniques and layouts are discussedin detail for sequential and hierarchical types of information.

2.3 Classification of Visualization Method

A variety of Visualization techniques has enabled its implication in different domainand application. Based on that, different visualization methods and techniques arecategorized differently by different author. Broadly, the term visualization divided in tothree main category i.e. (i) Information Visualization, (ii) Scientific Visualization and(iii) Software Visualization [2].

Information Visualization: The illustration of information by using graphical andspatial representation in order to explore and understand data and to facilitate compari-son, change detection, pattern recognition.There are other sub categories of visualizationmentioned in different literature i.e.

Data Visualization represents the data visually in diagrammatic or schematic forms.Different techniques e.g. Table, Line chart, Histogram, Scatter plot, and Pie chart etc.are used in Data visualization.

Information visualization facilitates the user to enhance their cognition or perceptioncapability through the interactive interface. Dynamically created visualization helps theuser to better manipulate and understand the data, e.g. Data map, Semantic network,Time line, and Venn/ Euler diagram etc.

Concept visualizations helps in elaborating concepts, plan ideas and provide an easymechanism to analyze them e.g. Concentric circle, Mindmap, Decision tree, Layer chart,

9

Page 12: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Pert chart etc.

Strategic visualization deals with the strategical behavior and decisions of an organi-zation. It provides a way to visually represent the development, formulation, communi-cation, implementation and analysis phases in the form of strategy map, Organizationalchart, Portfolio diagram, and Failure tree etc.

Metaphor visualization communicates the insight of the information using the graph-ical structure assuming the key characteristics of metaphor that is applicable, e.g.Metro map, Funnerl, Story template etc. Compound visualization makes use of dif-ferent graphic representation format fitting on a single schema or frame e.g. Knowledgemap, Cartoon, Rich picture, and Learning map etc..

Scientific Visualization: In order to understand the physical phenomena in data,mathematical models, volume rendering, and glyphs etc., scientific visualization providesdifferent techniques and interfaces to efficiently explains scientific data and model.Researchers have made distinction between information visualization and scientific vi-sualization based on the analysis, that the former uses non-numeric data such as textand graph while latter uses numerical data. But this distinction doesn’t hold always inpractice. Many Information visualization applications use numerical and textual datato provide more concreteness to the visualization.

Software Visualization: Software visualization aids people to learn and acquire theskills of using computer software. Program visualization benefits programmers in han-dling complex software , and similarly provides support in algorithm animation, foster,and motivate student to understand the computation capability of an algorithm.

In this work, we will be focusing on the two widely use visualization methods fromthe above discussed techniques i.e. Information and Data Visualization.

2.4 Interactivity with Visualization

Through the process of visualization, an abstract data is extracted from the huge rawdata. So, it is highly desirable to provide an easy and efficient interactive visualizationtechniques to explore, understand, analyze the information presented in the visualiza-tion. One of the challenge in the visualization is to present only the relevant data insuch a visual form which is understandable to the user with minimal effort. For thispurpose, researchers proposed various interactive techniques that makes the manipula-tion of visualization efficiently and effortlessly. User has different ways of interactionwith the visualization or interfaces e.g. Mouse single or double click, mouse over, mouseright or left click etc. Card et al in 1999 presented the human interactive mechanism ofvisualization consisted of different phases as mentioned below:

2.4.1 Zoomable Interface

Zooming is an important technique in computing which allows user to interact with theinterface and see the required information much closer and in much detail. Zoomableuser interface “ZUI” in graphical environment facilitates the user to set the scale of theviewing space at varying level of details. User can use the zoom in technique when adetail view is needed and gradually zoom out to see a larger view. This technique is

10

Page 13: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

best suited for device having limited display size in comparison with the amount of datato be shown. Different strategies are proposed to provide different level of views, fromabstract view to detailed view [7].

2.4.2 Zoom + Pan

The Zoom + Pan technique is a collaboration of two separate technique i.e. zoomingand panning to access the user interface. Through the use of zoomable technique, a usercan drill down to some extent of lower level details of interface while can also zoomedout to have an overview of the interface. Through the use of panning technique, useris able to move across the content of the viewing area. The panning technique worksin both zooming conditions i.e. zoom in and zoom out. The two important benefits ofusing this strategy are the effective usability of the screen size and provision for scala-bility. Some of the disadvantages of panning technique is the loss of overview and slowernavigation [7].

Figure 2.1: A zoom + pan example [9].

2.4.3 Overview + Detail View

In the overview + detail view technique, user interface is provided with multiple viewsof the concerned information at the same time. One smaller view locates the detailview within a larger view and also provides the overview of the information space. Inthe other larger view the located information of the portion of the information space isdisplayed in much detailed view. These technique is very common in map navigation,picture or image browsing software. The degree of zooming from detail view to overviewfor 2D images is 30:1, given the limitation of usability to achieve the desired details fornavigation [1][2].

Through the method of conserving the overview with the detail view facilitates theuser from disorientation in the detail view, but causes visual breach because of switchingbetween the the two views. One of the advantages of this technique is the availability ofmultiple view or chained view or scalable views. But this technique is not very effectivefor very small screen display because of the presence of multiple view [1][2].

11

Page 14: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Figure 2.2: An overview + detail example [7].

2.4.4 Focus + Context or Fish Eye View

Focus + Context or Fish Eye view makes use of the overview + detail techniques withsome different interaction strategy. In this method all the available space is utilizedto show the information in the overview context. While a focus area on the overviewspace is magnified to show the details of information for portion of the information infocus. In order to keep the local and global context together on the same view, thesurrounding overview slightly descents by wrapping the overview. Due to the abovementioned technique, it is named as fisheye view or distortion- oriented display. Themain advantage of this technique is keeping the context when focus i.e. show thesurrounding of the focus area to provide an easy navigation for the user. Distortion andunstable overview are its main disadvantages. Figure 2.3 shows the focus + contexttechnique [11] [2] [7].

Figure 2.3: A Focus + Context or FishEye View example [7].

2.4.5 Rapid Serial Visual Presentation (RSVP)

Rapid serial visual presentation (RSVP) is Information presentation technique, mainlysuited for displaying text data. In the RSVP technique, the text is presented in chunksrapidly in a fixed focal position for a fixed interval of time suitable for the user to searchthrough the Information. Electronic RSVP is more like an electronic riffling throughthe pages of a book. Video-on-demand browsing systems, shopping service, and videobrowsing using dynamic key frame presentation advocate the successful use of RSVPwithin these context. Some studies also supported the use of RSPV technique as a

12

Page 15: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

result of the enhancement in the user information processing speed in comparison withthe simultaneous presentation of complete text [2].

Figure 2.4: An example of the operation of the RSVP technique [12].

RSVP seems faster than MS Explorer for rendering smaller as well as longer text ona PDA device. RSVP method is regarded as efficient as reading from a book or largescreen, but it demands user attention and alertness [2].

Visualizing large pictures on a limited space can be done efficiently with the useof RSVP technique by displaying the sequence of regions of a picture in cycle. Anautomatic method for the identification of the likely user’s region of interest is used forthe selection of the region. Te RSVP technique lowers the user effort of zooming andscrolling [2] [12].

RSVP Browsing is an interaction model designed to support both link traversaland backtracking using RSVP technique. RSVP browsing is proposed to support thepresentation of links, which can be followed during Web search, and page trajectoriesin case the user wants to revisit previously visited pages. It consists of controls neces-sary for starting and stopping RSVP, and selecting links and previously visited pages [9].

2.5 Visualization Techniques

Researcher proposes various layout for the visualization of the hierarchal or tree likestructure which broadly can be classified into two main streams:

1. Connection2. Enclosure

1. Connection

It is the most conventional representation of the hierarchal data in the form of node-linkpair structure. A set of nodes representing Information are drawn in the diagram and aset of edges (link) showing the connections or relationship between the nodes i.e. parent-child relationship. The benefit of using node-link diagram to describe hierarchal data ismost appreciated in the perspective of human visual ability to deduce the relationshipin the graph. Many researchers have been done in this direction such as cone tree,hyperbolic tree, radial view etc [13].

13

Page 16: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

2. Enclosure

Another approach to visualize tree structure is to use enclosure. Enclosure methoduses a bounded area to represents the data. In this method each node of the tree isrepresented as a rectangular space, which is followed by subdivision of the space inhorizontal and vertical direction to map the relative size of the children of the node.This is a recursive process which iteratively sub-divides the children node space in torectangular area to represents their children. Some models have been proposed by theresearchers in this direction. An example of this type of visualization is tree maps.Node-link structure and tree maps are both valuable techniques for tree visualizationof fairly large size of data. But efficiency of each one varies with the properties of data.Node-link diagram is most suited for the tree structure of uneven shape while tree-mapsapproach is most effective to represent quantitative or numbered data [13].

The following sections provides insight of each of these techniques briefly and explainsthe limitations of using these techniques with different datatypes [13].

2.5.1 The Classical Hierarchical View

The traditional hierarchal view of the tree is based on the algorithm established by Rein-gold and Tilford. In this view, the children nodes are positioned below their commonpredecessor. The tree view can grow vertically as top-down, horizontally as left-to-rightor grid like positioning. Some of the advantages of this algorithm is its simple compu-tation and faster speed. But a lot of unused space gets wasted because the algorithmis not optimal in using the geometric space efficiently . Therefore, this technique is notsuitable for large size hierarchal data visualization [13].

Figure 2.5: The Classical Hierarchical View [14].

2.5.2 Space tree

Space tree, a novel design that incorporates the zooming environment with the conven-tional node-link tree layout that dynamically expand the branches of the tree to best fitthe available display space illustrated in Figure 2.6. The interface uses preview icons toencapsulate the topology of the branches when the space isn’t enough to show them atonce. When the user clicks on the preview icon or the corresponding node to navigateamong siblings, ancestors and descendants, the focus of the layout sets accordingly.Figure 2.6 demonstrates the how SpaceTree accommodates the lower level of hierarchy

14

Page 17: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

to be opened in the interface. It is observed that ”Semantic zooming is preferred overgeometric scaling ” which means that if the detail of the node of lower levels of the treeis not visible then show them in an aggregated or abstract representation.The consistentlayout of SpaceTree helps user to quickly return to already visited nodes provides useran appropriate interface for the frequent performing task [14].

Figure 2.6: An example of the Space Tree [14].

2.5.3 Hyperbolic Tree

A hyperbolic tree or hypertree uses hyperbolic geometry technique to depict data ina graphical drawing technique. The soul purpose of using the hyperbolic tree is tominimize the cluttering of nodes and efficient use of space which happens in the case ofdisplaying data as a tree structure. Because the number of nodes increases exponentiallyfor larger trees and requires exponential amount of space to display the data in node-linkdiagram. The hypertree design, illustrated in Figure 2.7, was at first proposed by theEscher woodcut. Two salient features of the techniques are: first the displaying strategyand second that the ability of the design to accommodate the exponential growth inthe number of components. The display space given to a node begins to diminish asa continuous function with the increase of its distance in the tree from the focus ofattention. The hypertree uses the power of focus+context or fisheye techniques wellsuited for tree visualization to smoothly transit between focus and detail view [15][16].

Hyperbolic Technique The gist of this approach is to arrange the hierarchical com-ponents on the hyperbolic plane and then display this mathematical formulation ofthe circular display region. Unlike Euclidian geometry, in hyperbolic plane the parallellines representing the edges diverge from each other.The property of circumference ofthe circle i.e. it grows exponentially with its radius, is effectively utilized by the hy-perbolic structure which means more space is available to display nodes as the distanceincreases from the root. Hence hierarchy, that expands exponentially with the depth,

15

Page 18: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Figure 2.7: An example of the hypertree [15].

can be distributed uniformly in a hyperbolic space, designates equal distance betweenparents, children, and sibling across the hierarchy. Consequently allows appending ofseveral generations of parents, siblings, and children, aids in easier traversing throughthe hierarchy for the user without getting lost. In comparison with the conventionalhierarchical technique, hypertext is capable of displaying up to 100 times as many nodesand a better means of navigation across the hierarchy [16].

Figure 2.8: An example of the hypertree, changing the focus [15].

Changing Focus The mapping is done in such a way that portions of the planenear the origin uses more space in comparison with the other portions of the plane.Very distant parts of the hyperbolic plane receive minuscule amount of space nearthe boundary of the disk. Using the focus+context method, the translation of thehyperbolic plane structure maintains the hierarchical geometric model as captured inFigure 2.8. The translation mechanism efficiently control the distribution of space fordifferent portions of plane without compromising the visibility of the detail view [16].The user can interact with the hypertree by clicking on any visible point to bring it into

16

Page 19: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

center of focus or by dragging to any other position. The display transforms accordinglyin either case by magnifying the regions approaching the center while shrink as they areprogressing towards the boundary [15].

2.5.4 Radial Tree

A radial tree, or radial map is another efficient displaying technique for a large treestructure in a limited space. The center of the region under visual focus representsthe root node and the lower level nodes expand outward radially from the higher levelnodes as shown in Figure 2.9. Layouts can be initiated by working outward from thecenter, root node. The first level nodes can be distributed evenly because of havingsame parents. In succeeding levels, the nodes are arranged in the ramining space ofthe assigned sector efficiently to avoid overlapping of the children nodes of one parent.A fixed distance is maintained between different levels of hierarchy to efficiently fit thegraph in the screen. The radial tree has some basic similarities to a hyperbolic tree. Theprimary difference between these two layouts is that hyperbolic trees are designed usingthe hyperbolic geometry, whereas in a radial tree follows a linear geometry between theorbits of the circular region [7][17].

Figure 2.9: An example of the Radial tree [18].

2.5.5 Cone Tree

ConeTree is a novel 3-dimensional user interface with the root node at the top and thefirst level nodes are dangled down in a circular shape connected to the root node bylinks depicts a cone-shape structure depicted in Figure 2.11. The nodes at the lowerlever also lays out in cones all the way down to the leaf node at the bottom of the screen.The 3-dimension layout of the tree and the animated rotation of the cones to bring theneighborhood nodes in the for-ground is of high interest for the user for eye-catching

17

Page 20: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Figure 2.10: An example of the detailed view of Radial tree [18].

presentation. The 3D hierarchy layout is very effective in maximizing the use of avail-able screen space and provides the mean of visualizing the whole structure. While theuse of interactive animated makes use of human perceptual system and aids the user toeasily navigates the tree.Initially the tree shows all the top level categories and provides an starting point to theusers. The users further explore the subsequent node based on their requirement. Userselects the node to expand in detail, which displays all of its descendants nodes. Theout of scope nodes can also be pruned to provide a smaller view space [7] .

Cat-a-Cone is a technique proposed by Hearst and Karadi to represent a very largehierarchal data using the Cone Tree layout. It integrates the browsing and searchingtechnique with the ConeTree and presents the complete hierarchy in one window whileunveil the occluded portions through animation [19].

2.5.6 TreeMap

Treemap is one of a novel technique to represent hierarchical data as a collection ofnested rectangles shown in Figure 2.13. Treemap is a space limiting and screen fillingalgorithm which efficiently utilizes all the available space. Each branch of the treeis represented by a rectangle, which further tiled with smaller rectangles representingsub-branches. The attribute of the data describes the size of each leaf rectangle andthe size of interior rectangles is calculated as the sum of the attribute values of itssubtrees while color of the node depicts any other attribute of the data [20]. Manyalgorithm have been proposed by researchers provides further refinement to the TreeMaprepresentation. Slice-and-dice is the original recursive algorithm that arrange the datain some meaningful order (alphabetical, chronological, etc.) in TreeMap, but resulted ina bar-shape layout.”Squarified” algorithm proposed by M. Bruls is a widely use TreeMaplayout. In this design the large squares representing the root node are placed in the

18

Page 21: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Figure 2.11: An example of Cone tree [7][19].

upper left and small squares in the lower right, provides ease of selection and often allowbetter labeling [7][17].

2.5.7 Fluid View

Fluid View is another information visualization technique that aims to reveal patternsand relationships in large dataset. It is a search interface concept that integrates twolayers i.e. visual background called as base layer and item layer, representing items atvarying levels of detail on top of a data facet as explained in Figure 2.14. The main goalis to provide ease of transition from overview to detailed outlook, display informationin context of their collection, scale results based on their relevance or popularity, andprovide user interaction to the diagram [22]. Figure 2.15 illustrates the different layerof Fluid view visualization.

The base layer provides visual landmarks in the zooming environment, positionalmeaning and interpretation for the items, and repositioning ambiance within the zoomspace. The item layer is used to display the information items for the viewer’s at-tention. Search queries and direct manipulation techniques are also embedded in thedesign.Semantic zooming is incorporated that gradually varies the scale of the displayitem with sensible increases of detail. When the the size of the visual resource is verysmall, it is represented by a square filled with the dominant color of the image andgradually replaces by the actual thumbnail as the size increases.Similarly when the sizeof the textual resource reaches a certain size, the whole document can be visualizedwithin the interface [22].

When many items are in close proximity then circular cluster technique is used togroup the relevant items together to avoid overlapping. The items within the clustercan be expanded by clicking on it as depicted in Figure 2.16. The items extents towards

19

Page 22: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Figure 2.12: A ConeTree displays category labels and a WebBook shows retrieval results.The left-hand page shows the title and the category labels associated with the document.The right-hand page shows the abstract associated with the document [19].

the boundary of the cluster. The position and color of a cluster is calculated by theweighted average of the positions and average of the colors of the enclosed item. Thesize of the cluster signifies the value of the data [22]. Figure 2.17 shows the resultsof two searching scenarios using two different base layer i.e. time-line and map withdifferent level of details as the user navigates through the layout.

Fluid Views visualization can be summarized by a 6-step process [22]:

1. Positioning: set dimensions and extent of base map.2. Selection: determine which items are in view using position information from the

base map.3. Ranking: calculate relevance values based on item popularity or search matches.4. Spacing: allocate screen space and set item sizes.5. Clustering: group items based on their proximity.6. Draw: display, change, or hide items and clusters.

All the above mentioned 6-steps triggers with each panning and zooming operationsof the base map while searching triggers the last four steps. Only the display get changedby detail-on-demand operation i.e. Step 6. [22].

20

Page 23: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Figure 2.13: An example of Tree Map [21].

Figure 2.14: Fluid Views comprise two interconnected layers: the top layer featuresitems at varying scales superimposed over a zoom-able base layer, for example, repre-senting time, location, and content [22].

2.6 Evaluation Of Visualization Techniques

2.6.1 Space Tree

This technique is suited for nominal size tree visualization. Space tree visualizationshows benefit for navigation tasks and provides an easy track to already previously vis-ited nodes. It also helps in estimation of the overall tree topology. It is more appropriatefor the representation of textual data.

21

Page 24: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Figure 2.15: An example of Fluid View [22].

Figure 2.16: To see the exact positions of cluster members, a cluster can be openedfollowing a transition arranging the items around the cluster and displaying edges totheir actual place on the base map [22].

Suitable Datatypes: Suitable Datatypes for space tree visualization technique arehierarchical information structures having parent-child relationship.

2.6.2 Hyperbolic Tree

Hyperbolic Tree is best suited for presenting a large hierarchal data. Tasks requirenavigation over named nodes can be easily represented using hyperbolic tree. The layoutis capable of providing user to visualize a group of associations [16]. The hyperbolictree view helps in identifying visual clues for the distribution of entity types and the

22

Page 25: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Figure 2.17: Image on left-hand side: Zooming from a continental view (a) to theMediterranean (b), and finally a regional close-up (c). With increasing geographicaldetail in the map, the displayed blog articles are continuously refined. Image on Right-hand side: The time scale is changed from (a) two months, to (b) two weeks, and (c)seven days [22].

ease of comparing each required item to the benchmark at the same time.

Suitable Datatypes: Hyperbolic tree visualization technique is capable of display-ing a very large hierarchical information structures. It can effectively display very largetextual data tree of about thousand nodes with the depth of the tree of 5 or 6 levelwhile it can also display visual resource of nominal size efficiently [15].

2.6.3 Radial Tree

Sometimes, it is useful to be able to visualize the complete hierarchy all in one go. Oneof the most efficient ways of doing this is to use a radial tree view. It works in muchthe similar way as Hyperbolic Tree but uses linear geometry.

Suitable Datatypes: It works effectively with the displaying of a large textual andvisual data. As mentioned in the above section, Radial tree is also able to render aboutthousand of nodes of multiple level of hierarchy efficiently.

2.6.4 Cone Tree

Cone Tree technique is in huge demand for an appealing 3-dimensional representationlayout. Textual as well as visual resources can be represented through this visualization.

23

Page 26: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

It is suited for a medium size tree structure.

Suitable Datatypes: Suitable Datatypes for Cone tree visualization technique arehierarchical information structures having parent-child relationship.

2.6.5 TreeMap

This visualization technique is most suited for representing quantitative data with mul-tidimensional attribute. It is extremely useful and capable of portraying several differentsorts of information in one diagram at the same time. The size of each rectangular re-gion represents the numerical value of data and different attributes of data is capturedusing rectangles of different colors. The use of TreeMap is most feasible to representtextual data. Treemaps are known to be weak for traversal and nesting levels tasks [23].Moreover the difference in the orientation in the Treemap makes the comparison taskdifficult and slower. It is observed that user finds difficulty in comparing rectangularareas of Treemap if both the vertical or horizontal dimension of the two rectangles aredifferent [24].

Suitable Datatypes: Suitable Datatypes for TreeMap visualization technique arehierarchical information structures having quantitative attribute of data.

2.7 Learning on Small Display Devices

To perform visualization on Small Display devices different types of data may use liketext, picture, maps, physical objects, and abstract data etc.According to data, differenttypes of approaches are used to perform visualization on Small Display Devices [8].

Learning Objects: Learning Objects (LOs) are digital resources that can be used(and reused) to support the learning process. Learning Objects (LOs) and their design-ing plays an important role in learning programming language.

Content adaptation: Content adaptation approach is effective in which firstly itselects useful data from huge amount of data on web sites then that data has beencompact and resizes to display on mobile devices.

Interactive learning object: In this technique interactive learning object (ILO)was created which consist of an advanced controller, the learning material, problemcommunication and then examination, which is just like problem based learning.

Multimedia interactive learning object: The other technique is multimedia inter-active learning object (MILO) with animation and auditory things. Reusable LearningObject allows user to solve realistic problem by constructing knowledge by working.

Information visualization: The main aim of information visualization is to givesupport for users to easily understand and learn large quantities of information fromsearch results and other questioning environment.

Generative learning object: Generative Learning Objects (GLOs) are generic andreusable LOs from which the specific LO content can be generated on demand.

24

Page 27: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Chapter 3

Small Display Devices

This chapter presents and discusses the various available small display devices andestablish a backdrop for the evaluation of visualization techniques [25].

3.1 Definitions

Different Information visualization techniques can be effectively evaluated in the contextof small display devices, when one understands what is meant by small displays. Thescreen resolution is the parameter to measure the size of the display. Resolution canbe explained as the number of pixels (color points) accumulated on a display element.It is the number of pixels on the horizontal axis and vertical axis e.g. the resolution ofhand-held device is 96 × 65 pixels.

Sharpness of the image also depends upon the resolution and the physical dimensionof the display element. The image will look sharper on smaller display while graduallydecrease its sharpness on larger screen for the same resolution because of the spreadingout of the same amount of pixels over a larger space.

The standard CRT desktop displays presents resolution upwards to 1600 × 1200pixels and more. While a typical hand-held devices including PDA (Personal digitalAssistant), smartphones usually adopt LCD (liquid crystal display) technology. Theresolution of display of these handheld devices ranges typically from 96 × 65 pixels to640 × 240 pixels.

When considering the effective size of a display, another parameter i.e. aspect ratioshould also be considered along with the resolution. The individual pieces of informa-tion presents on the display based on the measure of display resolution, whereas aspectratio indicates the shape of the display.

The effect of aspect ratio will be explained further below considering a real worldexample. A street map application running on 75 × 130 pixels resolution display willwork better than 10 × 1000 pixels resolution display, although the amount of pixels inboth the display are same. In reality the situation is much more complex, where thetypes of data being visualized have also given a significant consideration in deciding forthe optimal shape of the display. There are other additional factors that contributes toeffective display size including the capability of the display element to reproduce colors.

25

Page 28: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

3.2 Limitations of Small Display Devices

Adaptation of visualization techniques on small screen devices directly from desktopcomputers is impossible due to fundamental limitation of these devices. Additionally,the mobility context is different from conventional visualization in many ways. Theillustrated below section lists the difference that have to be taken care of in developingvisualization application for small display devices [25][26]:

• Limitation in the size, resolution colours of the display.

• The Width/Height ratio is very different from the usual 4:3.

• Limited Computational power, limited hardware(CPU, memory, buses, graphichardware)

• Human interaction techniques (e.g. tiny keypads, micro-joysticks, rollers) areoften inadequate for complex tasks

• The input techniques are different, e.g. hand-writing and pattern recognition ona small surface, one-hand thumb-based input, point-and-tap with stylus

• Bandwidth and Connectivity issues affecting the interactivity of application sig-nificantly for large data.

• There is a lack of powerful, high-level graphics libraries.

3.3 Physical Characteristics of Display Devices

This section captures the different physical characteristics of display device and visualabilities of the viewer to best match with the visualization design [25].

Different Data attributes could be accurately analyzed and explored using variousvisual features in the form of images and graphs. Visualization takes advantage of thehuman low-level visual system to perceive the provided knowledge. In order to takethe full advantage of the visual bandwidth of the human visual system, certain criterianeeds to be considered:

1. Display device’s physical characteristics (e.g., resolution in terms of the physicalsize of the display, and the total number of pixels).

2. Acuity of the human visual system (e.g., the distinguish ability limitation of thehuman eye for different visual features like size and orientation, color, the visualangle on the viewer’s eye subtended by elements).

3. Visualization technique (e.g., the approach used to map a data elements values toa visual representation).

4. Nature of the data (e.g., its dimensionality and number of elements) and theanalysis technique to be performed by the viewer.

A lot of research has been done on the visualization techniques and properties ofdata but very few work has been done on the first two criteria, i.e., how visualizationcan be enhanced by understanding visual features and visual acuity and how they effect

26

Page 29: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

visualization. The foundation for these studies can be provides by the Knowledge fromhuman psychophysics and computer vision [27].

The different visualization algorithm developed to date assumes that the display res-olution is sufficient to produce visualization effectively. Rapid increase in technology ofsmall display devices has increased the necessity to select the appropriate visualizationalgorithm for these devices too. Display devices characteristics, can have a considerableeffect on a particular visualization technique. These characteristics i.e physical size,standard viewing distance, pixel resolution, varies across different display devices.

Human visual system is another factor that also needs to be considered. For ex-ample, the minimum visual angle of the on-screen element on the viewer’s retina mustbe distinguishable. Also the concentration of pixels is also an important consideration.Increasing the pixel resolution of a display device (i.e., increasing pixels-per-inch andtherefore decreasing the size of the on-screen elements) beyond a certain limit will notproduce better result [27].

If the data elements to be shown are large, then a large number of pixels wouldrequire to capture the visual features to represent these data elements. The approachthat uses in visualization system is to smoothly decreases the number of data elementsto be presented as the viewer zooms out and re-displays the elements as the viewerzooms in. Maintaining a balance is required between more data element captured withfewer visual attributes, or fewer data element captured with more visual attributes.Moreover, the intervention of the presence of certain features (e.g., small sizes) with ourability to see other features (e.g., color) also needs to be considered.

Here the questions arise that (i) how many pixels (i.e., what display resolutions) arerequired for a visual feature to display information effectively, and (ii) what should bethe physical size (i.e., what visual acuity) is required to accurately identify and annotatethe visual features by our visual system. In order to better understand and validate theappropriate visualization technique, the understanding of the above mentioned limita-tion are must. The understanding will also characterize to what extent the techniquessaturates “visual bandwidth”.

In visualization design, certain characteristics of the dataset and the visual featuresused to represent its data element needs to be considered:

1. Dimensionality: Visual features must be identified to represent the data at-tributes. For large number of attributes, this may be difficult or impossible to captureeach attribute, compelling the display of only a subset of the dataset.

2. Number of elements: With the increase of the number of elements to display, itmay be impossible to fit them on the screen.

3. Visual-feature salience: An effective visualization takes care of the strengthsand limitation of visual features to match with suitable data attributes and analysistask to be shown.

4. Visual interference: The interference and interaction of different visual featuresamong each other must be eliminated or controlled to guarantee the effective analysis

27

Page 30: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

of data.

The visualization of dataset also gets effected by display resolution and visual acuity,for example, how many data attributes and data element can be represented at once,and how to best display different attributed using suitable visual features.

3.3.1 Display Device Characteristics

Display device characteristics e.g. display resolution, physical size and viewing distant,have a significant effect on the visualization of dataset. This arises two basic question(1) What fraction of dataset can be viewed by the display at any instance? And (2)what fraction of a display can be under consideration of the viewer at any given time?The viewing distance and physical size of the display also affects the visual angle formedby the object which is proportional to the size of the object and inversely proportionalto the distance of the object from the eye.

1. Display Resolution The term resolution has been briefly explained in the beaningof this chapter. This section illustrates impact of the display resolution on visualization.As it has discussed that the low display resolution of devices like mobile phones andPDAs limits the amount of information they can display at any given time because of theavailability of less number of pixels. Just by increasing pixels-per-inch doesn’t providethe required result in terms of the amount of additional information a viewer can see.In contrast, a large field of view (FOV) provided by the large display devices such apowerwall are also under utilize. There is a limitation of the human eye to perceive theamount of information based on horizontal and vertical FOV.

2. Physical Size Physical size of the device place a significant role to sensory andjudgment processes in humans. The physical size of a display device has a direct affecton the available FOV. Also, for a fixed pixels-per-inch, larger display devices have higherresolutions and therefore may be capable of visualizing more information.

3. Viewing Distance As the viewing distance increases, the FOV decreases. Forexample, a 16-inch display placed 22-inches from the user produces a FOV of approxi-mately 40 . Increasing the viewing distance to 30-inches reduces the FOV to 30 .

3.4 Visual Features

Visualization uses variety of visual features to illustrate different data elements. Someof the the most common visual features are hue, texture,luminance, and motion. Thefollowing section discusses about these visual properties and their use in different do-main, visual interference, and spatial frequency. Figure 3.1 illustrates the use of visualfeatures to represent multidimensional data with an example of weather forecast [28].

3.4.1 Hue

The most commonly used feature in visualization is Color. Color can be described interms of hue, luminance and saturation. Hue is of the main properties of color, it isexplained as the wavelength of the light of the given color. Hue is also explained as“the degree to which a stimulus can be described as similar to or different from stimulithat are described as red, green, blue and yellow.” Saturation is measure of degree of

28

Page 31: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Figure 3.1: Visualization of a weather dataset using perceptual texture elements withtemperature hue, wind speed density, pressure size, precipitation orientation, andcloud coverage luminance [28]

purity or strongness of a color . i.e. how distinguishable the color is from Grey in theHSL and HSV color spaces. The most saturated color is acquired by using just singlewavelength at a high intensity while the saturation drops with the drop of intensity ofcolor. Brightness of an image is a function of luminance of a visual target. Luminance isa measure of amount of light emitted from or passes through a particular area. All thesedimensions of color needs to be taken care for better control of perceiving difference invarious color patterns.An efficient and balanced color model with linear mapping describes data changes andvariations of an attribute’s domain. It is also possible to capture the attribute’s con-tinuous or discrete nature, and spatial frequency using automatic colormap selectionalgorithm. The color distant, color category, and linear separation must be taken careof while selecting discrete collections of distinguishable colors [28].Research shows that the observance in the color variation depends on the size and satu-ration of the color patch along with the contrasting degree from its surrounding colors.Hue is efficient to represent low spatial frequency data of nominal size.

3.4.2 Luminance

Luminance is a physical measure of the brightness of any point on a surface that isradiating or reflecting light. It is often used to define the amount of emission or reflectionfrom flat, diffuse surface. Luminance is best suited in representing high spatial frequencydata ( i.e. data with high variations in its spatial values). Researchers imposes moreimportance to luminance over hue in low- level visual system in identifying the boundaryof the data. It is observed that our low-level visual system recognize luminance patternsfaster than hue patterns.

29

Page 32: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

3.4.3 Texture

Texture is characterize as the appearance, feel or consistency of any surface having a tac-tile features. Texture is a composition of various perceptual properties. Various displaycharacteristics i.e. density, regularity, contrast, size, shape, orientation, and directionuse to display information. Texture dimension can be controlled using the individualvalues of data attribute which changes the texture patterns according to the data values.

Height is one of the important characteristics of a texture pattern. Research on cog-nitive vision shows that the low-level visual system preattentively observe the differencein height. Results proposes the use of this feature to represent the quantitative dateand can efficiently support the discrete five values.

Density is another visual parameter for the classification and segmentation of tex-ture. For the representation of low spatial frequency ordinal data, density considers tobe best suited. It is observed that hue, luminance and height can interfere with thedensity of the visual.

The visual system is able to make orientation distinction by using different cate-gories of perceptual direction to capture the orientation. Different researchers havelisted different number of categories exists for orientation. For example flat, tiled, andupright or steep, flat, left, and right, then there is 2D orientation which can be used torepresent information. Experimental results show that hue and luminance cause visualinterference with orientation.

The uniformity of a spatial position of texture element termed as Regularity. It isone of the crucial visual feature that helps in many computer algorithm in performingtexture segmentation and classification. The differences in regularity is difficult to detectfor a human visual system. Regularity is efficiently represents low spatial frequency data.Hue, luminance, height, and density all these visual features cause visual obstractionfor regularity.

3.4.4 Motion

Motion is also a significant feature that holds strong perceptual information. Motionhelps in the process of clubbing data and is efficient in providing the overview of patternand trends in the data. The human visual system is also able to recognize, perceive,track and anticipate movement. Motion is a combination of different other features e.g.Frequency, amplitude, motion shape, direction, phase and velocity.

30

Page 33: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Chapter 4

Conclusion and Future Work

In the previous chapters, a detailed discussion is provided on (i) what are the uses andbenefits of visualization, (ii) what are the different visualization techniques that areavailable, (iii) what are the different types of available devices with some of the limita-tions of these devices in the context of visualization.

Most of the researches in the field of visualization have focused developing techniquesfor very small device e.g. smartphones, PDA. No literature is available that discussesthe issues and limitation of visualization on medium size screen device e.g. Tablet PC.Hence, it is a possible future research work to find effective visualization layouts formedium size display devices i.e. 7 inch screen device. Different visualization techniquesneed to be compare in context of their easy of interactivity, design, data types, and sizeof data. Moreover, it is also required to consider the limitation of Tablet PC devicei.e. screen size, computational power, memory size.The aim of this work is to designapplications using the visualization techniques appropriate for Tablet PC.

In the absence of actual facts and figure, the transformation of the visualizationtechniques directly from different set of device to tablet PC is not possible. A series ofexperiments need to be performed in order to come up with the actual design parameters.In the following section, a brief detail is provided to be done in the next phase.

4.1 Visual Layout for Content Rendering

1. Design an experiment to analyze different visualization technique and provide acomparison among them. Perform experiment to suggest appropriate design pa-rameters of each layout for the tablet PC. Different design constraint that needsto be observe are size of data to be displayed, font size and color schemes con-sidering the human eye distance from the device, appropriate data types for eachtechnique, effect of animation on visibility [27]. The standard followed by differentpublication for representation of text in different size of layouts e.g. book, pocketdictionary, newspaper etc. could be taken as point of reference.

2. Create a program to dynamicaly suggest the appropriate layout based on typeand size of data and renders it accordingly. The dynamic selection of the layoutrequires an algorithm which predict the layout on the fly. Experiment needsto conduct to estimate the parameter of the algorithm in translating data intoefficient visual structure.

31

Page 34: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

3. Design a Resource Browsing Application e.g. Library application, Class networkfor Aakash Tablet PC by using above discussed visualization techniques. Exper-imental results listed above also needs to consider for selection of various designparameters and technique appropriate for the Resource Browsing Application .

JavaScript InfoVis Toolkit[29], InfoViz[17], prefuse[1] are one of the popular freelyavailable visualisation toolkits that provides state-of-the-art interactive visuali-sation techniques. JavaScript InfoVis Toolkit is designed on web standard us-ing HTML, CSS, JS, SVG, provides modularity, extensibility, and composibility.Moreover it has major browsers support which is also compatible with the speci-fications of Aakash tablet. In the development of Resource Browsing Application,JavaScript InfoVis Toolkit will be used to generate visualization layout. The fol-lowing sections lists the features and implementation details that is intended toprovide in the discussed application.

4.1.1 Library Application

Design an interactive library database application to provide an easy and faster navi-gation method to browse the required book through the collection of books . Librarydatabase could be a hierarchichal structure of authors, catogory of publication e.g. jour-nal, book, magazine etc., information domain e.g. science, arts and culture. Hyperbolictree and Space tree could be a suggested visualization model for the application becauseof efficient space utilization in hypertree and easy navigation through the deepest levelof hierarchy in space tree. The design could also consider the conventional searchingtechnique in library to be able to provide user the look and feel of a real world library.Hence, an efficient searching and filtering technique needs to be implemented in theapplication. A user can search the book by author, catogory, title etc. and the datadisplays accordingly. Different display features e.g. hue, luminance could be exploit torepresent different dimensions of information in the visualization. For example differentcolour schemes could be use to club different catogory or domian of books. For a moreinteractive visual layout, the displayed data could contain thumbnail of book cover withthe title of the book. Basic details can be seen by setting the focus on thumbnail.Similarly, the complete text of the book could be read by clicking on thumbnail.

4.1.2 Class Network

Design a visualization that captures the network of an on-line classroom. The designcontains the pictorial representation of a class in the form of connecting graph thatdepicts the interaction among courses, their respective faculties and the enrolled stu-dents. A node in the graph can represent course, faculty and student while the edgesdenotes the relation or association among nodes in the graph. Each node can be fur-ther expanded by clicking on it to illustrate detailed information about each category.Patterns in the class network e.g. size of the class, number of enrolled student in acourse , number of courses taken by faculty could be capture by using different diplaycharacteristics e.g. different color scheme.

32

Page 35: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

Bibliography

[1] J. Heer, S. K. Card and J. A. Landay, “prefuse: A Toolkit for Interactive InformationVisualization,” ACM Conference on Human Factors in Computing Systems, 2005.

[2] L. Chittaro,“ Visualizing Information On Mobile Devices.” IEEE Computer SocietyPress Los Alamitos, CA, USA , v.39 n.3, p.40-45, March 2006.

[3] H. Y. Yoo , S. H. Cheon, “Visualization by information type on mobile device”, Pro-ceedings of the 2006 Asia-Pacific Symposium on Information Visualisation, Tokyo,Japan , p.143-146, February 01, 2006.

[4] D. Churchill, J. Hedberg, “Learning object design considerations for small-screenhandheld devices.” Computers & Education 50, 881893, 2008.

[5] “India unveils prototype for $35 touch-screen computer.” BBC World news-SouthAsia. 23 July 2010. Archived from the original on July 24, 2010. Retrieved on Septem-ber 25, 2012.

[6] “Datawind: Makers of Aakash & Ubislate Tablet”,http://www.akashtablet.com/features.html, Retrieved on September 25, 2012.

[7] M. Khan and S. Khan.“ Data and information visualization methods, and interactivemechanisms: A survey.” International Journal of Computer Applications, 34(1):114,2011.

[8] U. S. Junghare, V. M. Thakare, R.V. Dharaskar, Review Based Comparative Studyof “Visualization Techniques for Learning on Mobile Devices”, Retrived on 23 June2012 http://www.bioinfo.in/uploadfiles/13133797841 1 2 BIOINFO OTA.pdf

[9] O. de Bruijn, R. Spence, M. Y. Chong, RSVP Browser: Web Browsing on SmallScreen Devices, Journal, Personal and Ubiquitous Computing, v.6 n.4, p.245-252,Springer-Verlag London, UK, September 2002.

[10] H. Y. Yoo , S. H. Cheon,“ Visualization by information type on mobile device.” Pro-ceedings of the 2006 Asia-Pacific Symposium on Information Visualisation, Tokyo,Japan , p.143-146, February 01, 2006.

[11] S. Manojit, B. H. Marc, “Graphical fisheye views,”Communications of the ACM 37 (12), 73 - 83, 1994,http://portal.acm.org/citation.cfm?coll=GUIDE&dl=GUIDE&id=198384

[12] O. de Bruijn, R. Spence, Rapid serial visual presentation: a space-time trade-off ininformation presentation, Proceedings of the working conference on Advanced visualinterfaces, p.189-192, Palermo, Italy, May 2000.

33

Page 36: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

[13] Q. V. Nguyen, M. L. Huang,“ A Space-Optimized Tree Visualization.” In Proceed-ings of the 2002 IEEE Symposium on Information Visualization (InfoVis”02), pages8592, 2002.

[14] C. Plaisant , J. Grosjean , B. B. Bederson, “SpaceTree: Supporting Explorationin Large Node Link Tree, Design Evolution and Empirical Evaluation.” Proceedingsof the IEEE Symposium on Information Visualization (InfoVis’02), p.57, October28-29, 2002

[15] J. Lamping , R. Rao , P. Pirolli,“ A focus+context technique based on hyperbolicgeometry for visualizing large hierarchies.” Proceedings of the SIGCHI conference onHuman factors in computing systems, Denver, Colorado, United States, p.401-408,May 07-11, 1995.

[16] J. Lamping , R. Rao,“ Laying out and visualizing large trees using a hyperbolicspace.” Proceedings of the 7th annual ACM symposium on User interface softwareand technology, Marina del Rey, California, United States , p.13-14, November 02-04, 1994.

[17] J. D. Fekete, The InfoVis Toolkit, Proceedings of the IEEE Symposium on Infor-mation Visualization (INFOVIS’04), p.167-174, October 10-12, 2004.

[18] http://www.data-art.net/flared music/

[19] M. A. Hearst , C. Karadi,“ Cat-a-Cone: an interactive interface for specifyingsearches and viewing retrieval results using a large category hierarchy,” Proceedingsof the 20th annual international ACM SIGIR conference on Research and develop-ment in information retrieval, p.246-255, Philadelphia, Pennsylvania, United States,July 27-31, 1997.

[20] T. Ying, H. W. Shen, “Balloon Focus: a Seamless Multi-Focus+Context Methodfor Treemaps.” IEEE Transactions on Visualization and Computer Graphics, v.14n.6, p.1157-1164, November 2008.

[21] http://en.wikipedia.org/wiki/Tree map; retrived on 20, sep 2012.

[22] M. Dork, S. Carpendale, C. Williamson; Fluid Views: A Zoomable Search Envi-ronment; Proceedings of the International Working Conference on Advanced VisualInterfaces, 2012.

[23] B. Shneiderman,C. Dunne, P. Sharma, P. Wang,“ Innovation trajectories for in-formation visualizations: Comparing treemaps, cone trees, and hyperbolic trees.”Information Visualization, vol. 11 no. 2 87-105, April 2012.

[24] T. BARLO, P. NEVILLE,“A Comparison of 2-D Visualizations of Hierarchies.”Proceedings of the IEEE Symposium on Information Visualization, 2001 .

[25] A. P. Sawant, C. G. Healey, “A survey of display device properties and visual acuityfor visualization,” Tech. rep., Department of Computer Science, North CarolinaState University, 2005.

[26] J. L. Encarnac ao, M. Fruhauf, and T. Kirste. Mobile Visualization: Challengesand Solution Concepts. In Proc. Fifth International Conference on Computer Ap-plications in Production and Engineering (CAPE 95), Beijing, China, May 16-181995.

34

Page 37: Sanobar Nishat - Kanwal Rekhi · Sanobar Nishat Roll No: 113052001 Under the guidance of Prof. D.B. Phatak Nov, 2012 Department of Computer Science and Engineering …

[27] S. Few. “Data Visualization for Human Perception.” Ency-clopedia of Human-Computer Interaction. Soegaard, Mads andDam, Rikke Friis (eds.). Aarhus, Denmark: The Interaction De-sign Foundation, 2010. Available online at http://www.interaction-design.org/encyclopedia/data visualization for human perception.html

[28] C. G. HEALEY, “Choosing effective colours for data visualization”. In ProceedingsVisualization, , pp. 263270, San Francisco, California, 1996.

[29] “JavaScript InfoVis Toolkit,”http://www.thejit.org/

35