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