Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jit abhishek sarkar


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Jit abhishek sarkar

  1. 1. Browser based Visualization ToolsJavaScript Infovis ToolKitAbhishek Sarkar10BM60004
  2. 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. 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. 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. 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. 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. 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. 8. Some Of The Visualizations Provided Area Chart Sunburst Hyper Tree Space Tree R Chart Icicle TreeMap
  9. 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. 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. 11. Area Chart Contd..
  12. 12. Area Chart Contd..
  13. 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. 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. 15. 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.
  16. 16.  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.
  17. 17.  Moving up and down the hierarchy Details about each node can be displayed.
  18. 18. 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 nodes 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.
  19. 19.  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.
  20. 20.  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.
  21. 21. 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.
  22. 22.  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.
  23. 23.  Changing the centre of the graph Weighted edge Rgraph
  24. 24. 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.
  25. 25. Hyper Tree Contd..
  26. 26. Hyper Tree Contd..
  27. 27. 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
  28. 28. Space Tree Contd..
  29. 29. Space Tree Contd..
  30. 30. 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