Info Vis Assignment 3 PDF

Preview

Summary

Third assignment of the course...

Description

ASSIGNMENT 3 Information Visualization 4DV800

Alain Perkaz ap222ze

Contents Info Vis Assignment 3 – Task 1 ...................................................................................................... 2 Task 1 – Answer the questions.................................................................................................. 2 Details of InfoVis Reference Model ....................................................................................... 2 Range Sliders supported interactions ................................................................................... 3 Data object highlight on selection ........................................................................................ 4 Task 2 – Implement a scatter plot ............................................................................................. 5 References..................................................................................................................................... 7

Table of Figures Image 1 - InfoVis reference model ................................................................................................ 2 Image 2- Single and ranged slider ................................................................................................. 3 Image 3 – Visualization with ranged slider with inner visualization [1] ........................................ 3 Image 4 - Example of brushing on visualization[2] ....................................................................... 4 Image 5 - Result data1.csv............................................................................................................. 5 Image 6 - Result data2.csv............................................................................................................. 6

1

Info Vis Assignment 3 – Task 1 Third assignment for the course Information Visualization 4DV800.

Task 1 – Answer the questions Details of InfoVis Reference Model The Information Visualization reference model (Image 1), describes a general flow model that most of the visualization systems follow, containing: the raw data, the data tables, the visual structures and the views. The model is spited into two main sections, the data related section and the visual form section.

Image 1 - InfoVis reference model, originally on [1]

The user interaction is key in visualization, thus the model shows the different interaction levels available to the user: data transformations, visual mappings and view transformations. In the following paragraphs each of this concepts will be explained in detail. Following the flow a visualization, usually on the first stage the raw data is acquired. The raw data can be in any format and frequently lacks from a defined structure and contains missing data values. In this first stage, that data has to be structured in order to ease its posterior representation. This process is called data transformation, and converts the original raw data into structured data tables. Once the data is correctly transformed, is ready for being mapped (visual mapping) into a visual structure that is consider adequate for that data structure. Is important to note that every case is different and finding a perfect fit is usually a complicated task. The generated map can be measured in terms of expressiveness (the amount of data from the data table represented on the visual structure) and effectiveness (the ease, quality and error prone of interpretation). The election of a suitable visual structure is hard and will greatly affect the outcome of the visualization. After the visual structure is chosen, some view transformations must be chosen in order to add interactivity to the static representation. This will help with scalability and focusing on special parts of the representation. Multiple techniques can be applied, such as pop-up windows, magic lenses, viewpoint control… From my point of view, main the strength of this models is the clarity with which it shows the different stages and the interactions necessary for shifting from one stage to other. Also 2

modeling the process in a linear manner eases to discern the natural order of interactions to achieve a representation. To conclude, is important to note that simplifying the process to a four block model allows to abstract from the low level operations implied in the different interactions.

Range Sliders supported interactions Sliders help the user set the value (qualitative or quantitative) of a variable using a moving marker. Useful when building dynamic queries in a visualization. They support left to right value selection (if horizontal slider) and range sliders support specific range definition, by maintaining two markers on the slider.

Image 2- Single and ranged slider

In order to show more valuable information to the user, apart from the values that are actually picked, the maximum and minimum values of the slider can be displayed. This will help the user learn the boundaries of the system and therefore choose with a different criteria. Displaying the data inside the slider helps by providing a richer understanding of the underlying data distribution (Image 3).

Image 3 – Visualization with ranged slider with inner visualization [2]

The following table lists some pros and cons of using range sliders.

Pros

Cons

Fast and intuitive value change Exploration of data by direct feedback Good for representing time

Linear scale of data Loose of fine grained control Not as good for qualitative data 3

Data object highlight on selection To highlight the same element in different representations when selected is called brushing and helps identify the given element in the other visualizations. This technique is widely used, as helps the user search for specific elemenst in an easy manner and brings consistency to multiple representation visualizations. When navigating highly populated visualizations, having brushing presents a huge advantage as reduces greatly the amount of time expend on finding the same value in different representations.

Image 4 - Example of brushing on visualization[3]

4

Task 2 – Implement a scatter plot In the second task of the assignment a scatter plot visualization has been build using html and JavaScript. The source code and a short readme containing the instructions are attached. When displaying the datasets form the files, is noticeable that most of the same class attributes form clusters, clearly differentiating from the others. The results are displayed bellow.

Image 5 - Result data1.csv

5

Image 6 - Result data2.csv

6

References [1] E. H. Chi, “A taxonomy of visualization techniques using the data state reference model,” in Information Visualization, 2000. InfoVis 2000. IEEE Symposium on, 2000, pp. 69–75. [2] “Compare multiple series | Highcharts.” [Online]. Available: http://www.highcharts.com/stock/demo/compare. [3] “File:Ggobi04brushlink.png - InfoVis:Wiki.” [Online]. Available: http://www.infoviswiki.net/index.php?title=File:Ggobi04brushlink.png.

7...