Browser based Visualization ToolsJavaScript Infovis ToolKitAbhishek Sarkar10BM60004

Why do we need Visualization Tools?

Explosion of data on the

Web

A picture speaks a thousand

words

Use of data for multiple uses.

Example: Forecasting,

Segmentation

Overview Of the JavaScript InfoVis Toolkit

interactive data visualization tools

Not an application!

Open source JavaScript library

Uses JSON(JavaScript Object Notation)

data format

About JSON Data Format

Simple, text-based way to store and transmit structured data

Based on the way you define objects

Very useful in transmitting data during ajax requests

A JSON string contains an array of values(can also contain Objects!!).

An array is surrounded by square brackets, [  ], and contains a comma-separated list of values.

JSON string can also contain an object (an associative array of name/value pairs).

An object is surrounded by curly brackets, { and }, and contains a comma-separated list of name/value pairs.

JSON Contd...

A name/value pair consists of a field name (in double quotes), followed by a colon (:), followed by the field value.

A value in an array or object can be: A number (integer or floating point)

A string (in double quotes)

A Boolean (true or false)

Another array (surrounded by square brackets, [ and ])

Another object (surrounded by curly brackets, { and })

The value null

JSON Example

var JSONObject= {"name":"John Johnson","street":"Oslo West 555", "age":33,"phone":"555 1234567"};

var employees = [{ "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName": "Jones" }];

Advantages of JSON

JSON is smaller than XML, and faster and easier to parse.

Being text based it is language independent

JSON is "self-describing" and easy to understand

JSON parsers and JSON libraries exists for many different programming languages

Some Of The Visualizations Provided

Area Chart

Sunburst

Hyper Tree

Space Tree

R Chart

Icicle

TreeMap

To make the illustrations simpler…

A FMCG company is about to start operations in India.

Different divisions of the same have found this toolkit extremely helpful.

The application of the different components of the toolkit have been explained along with basic description of the same.

Area Chart

Displays graphically quantitative data

It is based on the line chart

The area between axis and line are commonly emphasized with colors and textures

Used to represent cumulated totals using numbers or percentages (stacked area charts in this case) over time

Area Chart Contd..

Area Chart Contd..

Sunburst

A Sunburst visualization is a radial space-filling visualization technique for displaying tree like structures.

The visualization also implements events for hovering and clicking nodes.

Node styling and tool-tips can be attached to DOM elements (like HTML or SVG labels) or they can also be attached to the Canvas.

Animations for collapsing or expanding sub trees can also be provided for.

The collapsing process reduces the angle span occupied by a parent node and sets its children alpha value to zero. There’s also a visual mark set for collapsed nodes.

The sales manager of the FMCG company can look to divide the total area under his control into sub areas.

The number of salesmen deployed or the total sales in each sub area can be tracked.

The last date of updating can also be tracked.

Icicle

It is a two-dimensional visualization of hierarchy

The icicle plot is equivalent to the organization chart.

The toolkit allows for functions like refresh, and allows movement both up and down the parent-child relationship.

The orientation of display as well as the maximum levels allowed can be controlled by the user.

This visualization tool comes particularly handy in case of clustering as the members in the cluster can be easily identified here unlike in other trees.

The organization structure of the sales team in a FMCG company in most cases involves for multiple levels in the hierarchy.

To make matters complex the hierarchy is spread over multiple regions-which thus brings in clusters. Example under 1 sales manager there could be 3 branch managers.

To track and analyze the performance of sub-ordinates this tool may come handy.

Moving up and down the hierarchy

Details about each node can be displayed.

Treemap

Treemaps display hierarchical (tree-structured) data as a set of nested rectangles.

Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches.

A leaf node's rectangle has an area proportional to a specified dimension on the data.

Often the leaf nodes are coloured to show a separate dimensions.

When the colour and size dimensions are correlated in some way with the tree structure, one can often easily see patterns that would be difficult to spot in other ways, such as if a certain colour is particularly relevant.

A second advantage of treemaps is that, by construction, they make efficient use of space. As a result, they can legibly display thousands of items on the screen simultaneously.

The range of offerings can be quite wide for a FMCG company.

The treemap can be used to examine the brand architecture of the offerings of the company, to decide which brands to introduce in India.

The size of the nodes can represent predicted sales of each brand or the past sales of the brand in geographies similar to India.

Details about each node revealed on hovering the mouse over the node.

The node when left clicked reveals details about the child nodes.

Traversing to parent nodes is possible by right click of the node.

Rgraph

Another visualization tool used to represent hierarchical relations

The selected node is made the centre of the graph.

The nodes linked to the centre is listed in the left.

The mouse wheel can be used to zoom and drag and drop the canvas to pan.

The graph can have weighted edges to incorporate other dimensions.

The nodes can be dragged and the graph panned or zoomed.

The cities to be distributed may be decided in advance.

The centre can be shifted by clicking to know where the warehouse may be needed to be set up optimally.

A weighted graph can be used to incorporate factors other than distance like ease of transportation etc represented by edges of varying thickness.

Changing the centre of the graph

Weighted edge Rgraph

Hyper Tree

Also called Hyperbolic Tree defines a graph drawing method inspired by hyperbolic geometry

Why do we need it?Displaying hierarchical data as a tree suffers from visual clutter

 Number of nodes per level grows exponentially(2^n)

Hyperbolic trees employ hyperbolic space, which has more room than Euclidean space.

 Nodes in focus are placed in the center and given more room, while out-of-focus nodes are compressed near the boundaries.

Focusing on a different node brings it and its children to the center of the disk, while uninteresting portions of the tree are compressed.

Hyper Tree Contd..

Hyper Tree Contd..

Space Tree

Can Represent qualitative as well as quantitative data graphically

Used for representing hierarchic data

Example of qualitative data would be work/project breakdown structure

Example of quantitative data would be probability based decision tree

Space Tree Contd..

Space Tree Contd..

Pros and Cons of the Tool

PROS Modular: Since the toolkit consists of code snippets the user has the option of

downloading only the codes that is needed for the visualization he/she needs on the website.

Extensible: The user also has the option to define custom nodes and edges and define custom animations (linear, elastic etc).

CONS Coding experience: As this is not an application but a code library, so a bit of

coding expertise is required to use the toolkit.

Fixed Data Format: The data format required for the toolkit is JSON(JavaScript Object Notation). This also puts a bit of restriction on the user