1. Browser based Visualization Tools
JavaScript Infovis ToolKit
Abhishek Sarkar
10BM60004

2. Why do we need Visualization Tools?
Use of data for multiple uses.
A picture speaks a thousand
Explosion of data on the Web Example:
words
Forecasting, Segmentation

3. Overview Of the JavaScript InfoVis Toolkit
interactive data
visualization
tools
Uses
JSON(JavaScript Not an
Object Notation) application!
data format
Open source
JavaScript library

4. 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.

5. 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

6. 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" }
];

7. 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

8. Some Of The Visualizations Provided
 Area Chart
 Sunburst
 Hyper Tree
 Space Tree
 R Chart
 Icicle
 TreeMap

9. 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.

10. 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

11. Area Chart Contd..

12. Area Chart Contd..

13. 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.

14.  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.

16. 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.

17.  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.

18.  Moving up and down the hierarchy
 Details about each node can be displayed.

19. 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.

20.  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.

21.  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.

22. 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.

23.  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.

24.  Changing the centre of the graph
 Weighted edge Rgraph

25. 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.

26. Hyper Tree Contd..

27. Hyper Tree Contd..

28. 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

29. Space Tree Contd..

30. Space Tree Contd..

31. 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