 Hello friends. This is Sanoba from IT Bombay. In the next 30 minutes, I'm going to cover a very interesting topic that is data visualization. This is the outline. Initially, I'll talk about what is visualization. Then there are many applications. So, mainly I'll focus on one of its application that is data visualization. Then we'll see what are the different techniques as how to cover or show the data. Then we'll see some of the tools that is available. And what are the technique or what are the thing that they use in those tools that is Canvas and SVG tag. So, we'll see some of the demos so that you have an idea of how to use those tools. And there are some of the issues if we have to deploy the same visualization technique on the Aakash tablet or any other small screen devices. So, is there compatibility with that device or there are issues. So, initially we'll see what is visualization. Visualization is nothing new or it's not a brand new technique. It's just a way of showing or expressing your concept, your knowledge, your information through images, through diagrams, through animation. So, it's easy to tell someone through diagrams rather if you show the whole data. So, it won't be that much of interest for them and it's easy to communicate your message, your knowledge, your concept. Let's see for example if an employee has to give a meeting to a bunch of people and they are not that technical person. So, for them these kind of details of data is of no use. So, rather we show this kind of data or rather if we just go and show this layout it's much more easy to grab, much more easy to understand for everyone that okay let's suppose it's a financial data and it shows the up and down of the market price over the year or monthly. So, this is visualization that how this one-to-one or a raw column data has been expressed in the form of a graph or a chart. This is very normal or a typical way of expressing and it's more a way or to express number data. If we have some kind of other data, so what are the different techniques? So, we'll see it later on and we have seen that what actually data visualization it's to explore the data and make able you to understand it easily and it's increase your interactivity with the data and your understandability. So, this is a conventional way which have rows and columns and some of the data that is repeated and there is corresponding data. But in the first look you won't understand that what kind of data it is. It's one-to-one some linear relation or either it's a tree-like data or some nesting is there and what these numbers are. So, it's difficult to understand but if we just show this layout then it's far easy to understand to grab okay. The data is a type of a hierarchy. It's a tree and these are some of its categories. Let's suppose vehicles, peoples and there are some others and there are some nested nodes within this. So, rather we explore one by one or read if you see in the previous one you need to go each row to find your relevant data but here you just directly go let's suppose you are looking for some cars just go into the category vehicles and you'll see cars and then there is category. You don't need to see the other data and you don't need to worry about these what is other data. So, it's one of the layout. So, what are the benefits? First of all it's easy to understand in first glance it's first look you can understand that okay it's a hierarchical data and this is the nesting. Then if it is a number data then you draw it you render it and then it shows some kind of patterns and that it helps you in taking decisions okay let's suppose this category may makes you money more. So, you'll spend more into this category rather you'll go which is not beneficial for you. So, it's easy to understand and it helps you in taking decisions and it's also helps in let's suppose if you draw the data like this it's some kind of life I mean unable to read it life expected versus literacy rate. So, over the period it's it's rendered and then there is something fishy here. So, you see okay this part is more you know you need to take care of. So, it's actually shows a pattern that these areas these areas of no use and make you need to whatever change or whatever your relevancy is let's suppose in this part. There are mainly two kinds of data one is linear that is one to one relationship we have name and accordingly a man name his ID his address. So, there is no relation with the other Ross but there are let's suppose there are hierarchical data where A these are A's and B is its children C is B's children like that. So, rather we'll express such kind of data in a tabular form if we'll go in this way it's more understandable. So, in the in the coming slides we'll see some of the technique to show innovative ideas to express hierarchical data in a way that you will be you'll be able to interact with the data you'll be able to show more and more data and it's also so we'll have hierarchical data and then there are two main way of expressing this in a layout one is the node link and in which you can see there is one node at the root and there are children's and there are some children's and leave node and it is a top down structure it can be from left to right but the point of to be noted here is that the root is at the top or at the left most and then children is accordingly from the towards bottom or towards right. We can have another technique that is enclosure or space filling technique in which we show the children or leaves within our main area. The main area shows the root the head the starting point and the children or the sub node shows within this. How it will work I'll explain it later. So, initially we'll cover what is connection your node link method. The first one is the very conventional typical way of expressing that is root is at the top and there are children's which is following the root then there is another way of expressing the same kind of structure that is a rectangular node link structure it's suited for a tree in which we have a let's suppose label leaf. So, because it's give you more space so we can easily show names or whatever content we want to render. So, we'll show like this it will give you more space it's helps in a scale tree which has I mean which is for larger trees. Then it is same node link structure but with a variation that the node is that the root is at the centre and the leaf is crossing the root from all around. It suited for the structure which has more leaves because then the tree would have more space to capture. It's more suited for a network like structure which is you can say unrooted trees because every node is connected to any other node and so on. So, it's it can also be helpful in expressing the or in showing network data. Now, we'll see some of the examples as what the authors had proposed over the year a lot of work has been done on it and we'll see some of new and very innovative kind of layouts. The first is a space tree it's been proposed by Benjamin and Jesse. What it does it's actually similar kind of a structure node is at the root the root is at the left most side and the tree is propagated towards the left. The point of to be noted here is that so the thing we have to note here is that all the nodes is not expanded. We have just expanded one node which is of relevance and we'll further explore it as we go along as we want to explore more and more it. So, this is help in better utilization of the overall space. If we rather expand whole of the node at one time then it will be a cluster of whole the data and all the label has to sacrifice a space and then it will be very clustered and very not readable properly. So, this is the technique go as you move or through the tree and expand it and while you will explore the other one you can collapse again the the one which you have initially expanded. So, some of the benefits of such kind of a structure is that you have a better idea of the kind of a tree or kind of a structure or data it is. It's easy to navigate through the tree and it's this structure the layout is very intuitive. Anyone can understand okay you have to go this way. Then searching is very easy because only the relevant data is shown to you and this image actually shows that how when you will expand the node which is here this triangular structure when you click on it it will expand like this. So, if we and see it has lot of data. So, if we if we will start exploring everyone at same time it won't be readable. So, one by one we can explore it then there is a slight modification to the previous one that is cone tree. It's proposed by card and George what they have done is like add a third dimension to the previous structure. Here we you know in the previous one you can see it's only the 2D kind of a structure but here we can in fact move the move the leaves move the children of the node and the the the one which is at the behind it can come and maybe it's of your use. So, it's helps in expressing and showing more data in comparison with the previous one. It's actually use the center technique and the top down approach simultaneously and as you can see it's a 3D kind of a structure. Then this technique hyperbolic tree or in short you can say hyper tree. This uses the one which we have seen that in which the root is at the center. What this kind of a structure does it's actually render the data on a hyperbolic plane which is 3D kind of a structure and then map that 3D structure on a 2D plane. So, here the benefit is only the data which is of use will have more space and it can utilize all this space and the one which is far from the root or from the it's of no use for the time being. You can I mean it's at the far further distance and it's poor collapsible. So, when you click on it or drag it then it will expand. So, how it does because in the hyperbolic geometry the parallel lines actually diverges and so the children nodes have more space to show its children as compared to simple 2D circular structure. This structure is proposed by Lamping and Rao. See this is an example of the hyperbolic tree. What it does it's actually because of the hyperbolic structure it's accommodates exponential increase in the children nodes. While in the normal 2D circular structure only the linear increase with the increase of the radius only the linearly increase nodes can be accommodated in the children which is to rest of the power edge which is the height of the tree. The another technique is enclosure or a space filling technique. So, I will briefly talk about how this is this structure works. The blue figure you can see it's actually it's actually the root node the head node and it's the size can be calculated using the all the sub nodes of this root node. So, it's actually the cumulative of all the sub nodes and this is the size of this blue space and then it shows that there are two children of this root node which is the light blue cross kind of pattern and then each of these sub tree there is four children and then three children or three leaves or four leaf of these two children. So, what is the benefit of such kind of a structure it's not though not very intuitive initially you have to I mean grab it how it works and then only you can understand but the benefit of this kind of a structure is that with the size you can easily with the area you can easily express some of the parameters like for example you want to explain the amount of for example it's expressing an article then how much this article has been read. So, this shows the number it's popularity so it will take a larger area and which has of not that popular so it will take a smaller area. So, it can express numbers so there are some of the techniques or the layout that has been proposed one is free map thus this node link structure had been it's been rendered like this so how it does the main node is the first one a116 a16 this is the main node and then there are three children's so it will divide the space like this b3 and then there is c3 and then the remaining part is assume that it is d10 because d10 has three sub nodes g2 h4 and this i4 so this part you again assume g2 because g2 has node j1 and k1 so j1 and k1 has been shown here h4 doesn't have any leaf node so it will display here h4 and further the for leaf node of i4 is going to is going to represent here. So, here you notice that only the leaf label has been displayed and the children the parent of that node is not displayed. So, it's not that convenient to understand so there are tools that they have also displayed the parent node also so and then like for example this triangle this rectangle and there is a slide bar and there you can express that it's d10 and then within d10 these are the sub nodes. So, this way you can add to this diagram so now what are the benefits of this kind of a structure it's suited for those kind of data which you want to display all the data at one time so you don't need any scrolling or expansion but it's not suited for traversing the tree because again you don't have proper idea of okay this is the parent node because here it's it was a very small tree so I we can explain it but if it's a very large tree then you won't be able to okay this is the sub node of this parent tree. So traversal and nesting level task is not that easy and we also have experimented in you know on our cache tablet and it's proved that it's very difficult to tell that how many levels of this sub tree and what are the different children of this particular node which is quite easy with the the one which we have covered before which is the space tree or the hyperbolic tree. Some of the real-life examples of tree map there is one website that is HiveCroap where they have actually display this is a hundred iTunes and they have listed it or displaying it based on its popularity so the size here that I that we have discussed it's actually can capture any number kind of things so the popularity is can be displaced through the size of the of that iTunes and then these different colors these different colors are shows that their position in our chart on 24 hour scale so let's suppose this green if you have seen this green kind of node here it shows that it's a new song new iTunes and this category is based on different genre of the songs so this is maybe the sub trees you can say so here they have displayed the name of the subtree that we have discussed before then there is another example this is actually Google news so this application is being developed by Marcos Vaskam what they have done it's these are the different different categories of the news and the size shows how many articles are within that this category of the news so size shows the most red articles most red stories and the color shows different types of stories like for example financial news sports news or stock exchange news for example now the another technique of space enclosure it's circle packing it's similar to three maps but here instead of showing the data on a rectangular map rectangular screen will here the data has been shown on the circular kind of image so it's similar this node is the root then there are sub trees and within sub trees there are further leave nodes here you can see there are wastage of space that is not the case in the tree maps but it's far more easy to read through the structure because of this wastage you can easily understand okay this is the sub node hence it can it can helps you in estimating the number of trees a number of nodes in it again the size of the node shows the let's suppose file size or any other property which can capture numbers now there are some open source toolkit available and as a motivation for you to explore those toolkits i've listed some of them here there is one d3.js these are different layouts that has been developed there so we can just go and see different layout there these are some of the examples this is the circle packing that we have just seen this is some this is some kind of dummy data that they have expressed like this there are you can explore many other techniques they are like sunburst so when we click on it it gets expanded and then we can read the whatever content in it now there is another toolkit javascript info is i have put these two on the athash tablet animation is a bit slower if you compare with the desktop environment but we can optimize the code and we can we can see if it's actually make difference or we just need to do something with the code this is the example of three map this further expands and then maybe it can shows the whole article then we click with we right click and then it goes back to it's the shows the whole tree so these are very interesting layouts and we can try exploring these on akash as well this is the hyperbolic example that we have seen that you can see these collapse a bit which is at the farther from the root and give you more space to display the one which is at the focus this one is similar to a space tree but it actually better utilize the space this is the root node and these are the further sub nodes and within this node they these are the further sub nodes so if we click on it it further expand and if there are sub hierarchy sub no tree then it will show based on your if you want to go further or not so it will keep on going like the example it goes and see there is no further data so it will stop it will show till here so this is the basic html 5 canvas tag so we'll see how it how we can use it I'll do it from the scratch open a text document name it canvas open the html tag then the head tag we'll write the script javascript we'll write here because we we can explain or we can further add the events or animation in the canvas element canvas tag within this script we can also directly add but I will show both the technique of initially we'll show with the javascript so within the head tag we'll do that part then the main body part will where we'll add the canvas element canvas is just a container and within it's like a there's the name suggest canvas so it's a place where you just draw your objects like circle rectangular object so it's a place it's it's nothing it's it's it's actually it's not a shape it's just a provide your space to draw so within body let's suppose we write a heading that it's a this is a canvas animation we'll add canvas tag then we'll set the width and the height of the that space let's suppose it's a desktop so I'll take width as 80 height is 400 I'll set the id let's suppose my canvas now what I want is when the body of this html page loads which means when as soon as I click to the link when the page render then this animation should run so I should write the function on the on load of the body so on load function I'll call animate function and this function I can write in the javascript we'll write the function keyword write the name of the function open the curly brackets and here we'll define whatever we have to draw okay so in the javascript we have to actually use the DOM object and we need to find or we need to refer the canvas element canvas tag that we have just defined in the html so what we'll do we'll define war which and some name variable some name and then document dot get element by id it's a way to refer the elements in the html and then whatever id we have given it's my canvas I'll use it this way it will access this html tag now what I want to with this tag so initially what I want is actually an image and I want that image to rotate 360 degree so it will kind of a it will create a kind of a animation so let's suppose I call that image as pic and new image I have created an image object and then within this object it's outside the function so it's global it can accessible I'll use pic.src and this is the image I want to use and I'll call set interval method this method actually perform the animation so I'll call one function which has to call every time this would be the callback function so let's suppose do animation is the function and I'll set some interval after which it should call this has to go this has to go in this in this every time it will call my canvas object and do some drawing so some of the keywords that I that we have to use okay I'm just copying for the sake of time this or what does this object do it's check if the canvas is supported so if it is supported so it will return one and will come in there within this function and then this line of code I'm writing the one so canvas not get this method actually create a 2d dimension kind of layout we can also use 3d so it's 2d then we'll add these are some of the parameters that we need to set properties you can say fill a style then stroke a style then this method save each frame when whenever this canvas element call and at that position what whatever the state of that canvas it will save and then it will translate translate is its shift to this parameter I mean in y x y axis it will shift to 450 200 parameter and then this will call rotate method it's take some angle so this is the calculation of some some angle this is angle and then convert it to radian and then divide by 6 and then for each second so multiply with that seconds so it will rotate within each second and then this method actually draws the image pattern is the image that we want to display and this is the size of the image and restore it is a function which takes the last state of the canvas so save every time whatever the canvas state is put push it on the stack and restore while rendering the new canvas state it at first restore the previous one and then this render the another one so it's like an animation the previous one will be there and then creates a new one so I'll just run it here how it does like this so this is the image and I am rotating it with some angle that we have explained here and with this with this it's kind of shifting through an angle like this similarly we can also do with the SVG tag I just want to give an idea how easily we can do that this is SVG tag open and close and then this is another tag circle in the canvas we have used image so we instead we can draw our own objects so for example circle and we have draw a circle and then there are two separate functions so I'll just show one at a time this is this animate transform built-in function for this SVG and what it does it's actually take these parameters and it will show it will create animation so how it will does so it revolving like this this is the duration these are the parameter that sets the position of this circle and if I let's suppose add this is another built-in attribute what it does it's take the circle attribute R which is the radius and then changes its value to 80 150 and then again 80 so it will make this kind of an effect it grows and it's so the toolkit we have discussed uses these two HTML5 tags so I wanted to give you some idea of how it works thanks a lot