 Seems our instructor got hit by a kryptonite on his way over here So let's start off with the tutorials. This one is on D3JS and Instructor Samir Segal is here. So I'm really sorry I woke up this morning I slept really late last night working on this woke up this morning. Nothing was working So I was just thinking about you know, I mean even if I come what I do So at 1040 was my last comment. Hopefully things are working Anyway, let's just get started How many of you use D3 before And So what I have over here is basically more basic We can start with more basics and then more basic stuff. We can just quickly go through this And then Something whatever everyone wants to do, okay, so if you can just open up this you are a I I'm learning ember so I try to put something using ember and what I have is just three sets of sections You know to me B3 I mean you guys are familiar with B3. That's why you all I have but D3 has just You know a single a simple thing that you can understand if you can understand that and if you can master that then life becomes really easy So it basically segments data and it into three states, you know Enter update and exit state and if you can understand what you want to do in each of these three states So if you can understand what you want to do in each of these three states, then life becomes really easy and simple, right? so and then so so D3 is this you know It can take data in any format that it has to be just on CSP and all of that But we'll just skip all of that because those things are there in the API references We'll just sort of go directly to some of the things if you know the critical parts if you can get that And I think you can use the API reference and then become pretty good at D3 The way I use D3 is I just go into those gallery section see the part that comes to my need And then pick that and then see what kind of data it needs You know, how do you prep the data and then sort of modify push and pull and edit and make it work There's a good section called Section if you can read that later, but there's something called about there's a philosophy on how you will be usable charts using D3 And that's interesting in your time. Maybe we can look into that Anyway So what I have over here is a very simple sort of sandbox sort of thing Over here, you have a code editor and this is your data You can add data to this Right now So this first section is just talking about philosophy of D3 Just talking about these three scales So this code over here does absolutely nothing The div over here has an id called graph And if you run this code, it will just simply add an SVG element and G which is a container So the way we build sort of graphs in D3 is we try and put everything into containers These G containers and that becomes really easy, you can translate it, you can transform them So you work on a group of elements together And SVG is where, you know, we can put up It's like a container for, you know, adding SVGs Anyway, you can just go ahead click on enter data And you can click, you know, load which will sort of add some code to this So this first section what it does is just adds a container This will be called once only internally once I'll just try to keep it simple You know, the sandbox will just call it once And all it does is adds this G element to which we will add, you know, anything that we want to add later on Now, if you look at your data, this is your data So 1, 2, 3, 4 is just an array, right? And what we're trying to do right now is we're trying to add subcodes So this SVG element, this G element that is written using that We're going to add circles, we're going to add data to this And, you know, in the interface we're going to append circles, specify centers and radius So, you know, the interesting part is just these three lines So what you, you first over here you say select all circles So if any circles exist already in the DOM in that SVG container And then we'll add data to them, right? And once it adds this array it will very quickly get to know whether this is the data This is new data that's going to be added to the DOM or not, right? And then only for those elements it will then add the circles So if you go over here and click render graph you would see sort of four circles, you know, come up, right? It's doing nothing, I mean all it's doing is that it's taking this value 1, 2, 3, 4 Applying it by 50 and specifying that as the, you know, XY coordinate and the radius Is this simple? Is this too basic? Is it okay? Right? So this is just the first part where you are adding, you know, SVG elements, DOM elements to You're adding SVG elements to the DOM, sorry The next phase is exit, right? So what I'm going to do is actually let me just go back to Let me just stay in this phase, let me add some more elements 5, 6, 7, 8 and so on, right? And let me render my graph so I get more points, right? Now I'm going to go to this exit data phase and I'm going to load this graph I'm going to load this code and I'm going to say run, right? You see nothing happened because we haven't changed any of the data just yet, right? Now let me go ahead and remove the fourth element over here And let's click run, right? We click the fourth element, right? So maybe this should have become red, but this became red, right? So this is pretty interesting because B3, the way we've just specified, if you go back to Yeah, so you go back to the code over here, beta, exit, you know, which is filled red B3 didn't understand that we removed the fourth element, right? It just saw that the array became shorter So it assumed automatically that the last element got removed from this, right? So by default, when you supply data to B3, if it's in an array format, it just works on positions It works on the index, on indexes, right? So we have to sort of tell it and make it understand, okay, what is the unique ID? Maybe the value is unique or, you know, some other time in your JSON object And we'll come to that Or, I mean, I'm just very quickly showing you the update phase If I go ahead and if I change the six and make it maybe ten, right? And if I click run, you would see that the data has moved, right? So it's sort of understanding where, and if you see the first three elements, they haven't changed, right? So it's understanding, okay, these elements are in the same place But all of them have become green, right? So that's another interesting thing, that if you look at the code over here, it says data It doesn't say enter or exit, so by default, it means it's in the update phase and it gets B3 So every time B3 loops, right? It looks at the data and it always runs it through the update phase, right? Unless it's new, I mean, if it's entered, it would go into the enter phase And if it's exited, it would go into the exit phase But otherwise, it would just run through this, right? Now let's go back and correct this issue, you know, where we moved some element in between But we got this red spot over here, right? If you go ahead and look at this code, you can see over here that we've added a function called So earlier we used to just supply data as an array, right? And now we're supplying data with a function called d, i So d is the value and i is the index, right? So by default, you know, B3 treats it this way Where, you know, this is sort of the standard default behavior where it would, you know, look at each element in the data And you need, it would identify its uniqueness by its position, right? But if we now set this as B, right? And let's go ahead and clear our graph Let's render this again Now let's go ahead and remove this fifth element What was the fifth element? So it not correctly identifies it because we've sort of done it, you know, based on the value, right? Anyway, this seems simple, but this is the crux of B3 If you can sort of figure this out, then, you know, everything else is sort of the APIs And the more you use, the more you understand So the way you need to sort of, when you're sort of trying to build a visualization, right? So one aspect is how the data is coming in, you know, preparing the data in the format, etc And that, you know, maybe the next two speakers would cover in greater detail But once your data comes in, then you need to start looking at it in this sort of model But, you know, what is the new data? What is the data that's changing? And what's the data that's leaving this visualization, right? And segment your graph into two parts One is the setup of the graph, so where you set up axes, you set up, you know, maybe the labels or the title And then something that will loop always, right? So that's how we've sort of done, you know, like we have a setup function and a drop function, right? Is this going okay? I'm sort of a little confused by the silence Yeah, just clap if you like something, I mean, there's nothing really to be proud of here Just, you know, just so that you can reassure me because I'll come in half an hour later and be sure of my confidence Anyway, so in the previous sort of sections, right, we were just multiplying by 15 And translating the graph, there was no real scale, there was nothing There was just a simple displacement of the translation, right? What T3 has, T3 has some, you know, great support for scales, right? So it has, I mean, two large sections are like linear and ordinary But it also has a time scale, it has, and the time scale is actually pretty interesting So when you're trying to do a time series visualization, it will try and understand how your data is split up over time So maybe it will show Monday, Tuesday, Wednesday, right? Or if the data is over many months, it will show automatically Jan, Fed, you know, and so on and so forth So these scales do a lot of heavy lifting for you They have something called as ticks, and if you can specify ticks are basically the number of, you know, what are those called? Basically grid points, right, on a scale And so if you specify five, it will give you five ticks which evenly space out in the entire range that you have So this is how sort of a scale looks like, right? So you say D3, linear scale, linear range, you specify a range So the range, these would be typically your pixel values, you know So what is the width of your graph, what is the height of your graph And then you have something called as, then you map the domain, right? So you remember the sets, some domain and range, right? So over here in the domain, we would put a value and we would get a pixel value out for that, right, from the range That's the whole point of scale We're translating a numeric value that our graph has into a pixel value in the domain, right? Now D3.extent is a simple function for you to get the min, max, you know, values of your data So if your data is not sorted, you know, it's all over the place You just do D3.extent and it will automatically give you, you know So like just to take an example, let's say this is data, right? And if I do a D3.extent of D, yeah? So you get 1,56, so it automatically gives you this, right? And so this makes life very easy, you can do it in one step and it moves, you know, very easily So MVA supports bindings, but when you use this, you know, editor called Portnero, the whole thing gets messed up So if you see the data that we have over here, 1, 3, 4, and you get to see 3 bars, right? R1 is basically over here, you know, which is at 0, right? Because the mistake we made was we said extent where we said, you know, so it would have got 1 to 4 And it would have mapped up to 0 to 400 So 1 would have mapped to 0, which is right here, right? And 4 would have mapped to 400, right? So if you see this, so what we've plotted over here is very simple We have to select all the rectangles, right? Add the data and in the interface, create new rectangles Who's width are, you know, split by the factor of 50 And we're specifying height, so over here we've specified wire, right? Which is our scale And if you see over here, this is something really cool I haven't supplied any argument, I've just said why, why the function? So automatically D3 takes each data element and passes it to that And gets the value and then adds that as the height, right? If you want to see how this looks So there you can see that, right? So x, x we were incrementing it by 50 And height is over here, so, you know, the first one is 0 And the last one is 400 And width we were again specified as 30, right? That's it, so we specified the height But you know, we would have expected a graph which was the other way around, right? Normally that's how we look at our charts And this is how sort of, again, D3 draws Because its origin is at this point, the leftmost, left top corner, right? So when you want to draw a graph, you need to sort of reorient yourself And say, okay, I want to draw the graph, you know, this way So basically what you would do is you would do the inverse Say, you know, this bar's height should have been here from here to here, right? So you would translate your y and you would change the height to be the inverse You know, maximum minus this value So you could do that Or what you could do is you could reverse your ranges, right? So earlier we would have sent 1,4 Now we're sending 4,1 Now 4 maps to 0 and 1 maps to 400 pixels, right? And so you could use that And you could specify that for the y value, right? So now your bar would start low And then the height would again be the maximum value to, you know, this So let's just go ahead and render this So now you graph sort of, you know, the exit cell So again, this is just, I mean, this is a simple, you know, geometry I mean, you need to just wrap your mind around that the origin is over there So we've talked about linear scales A linear scale is basically it's, you know, it's an f of x function It will just draw a linear scale, right? Then there are something called as ordinal scales So, you know, what we've been doing If you reload the page, it seems to work fine Okay I don't think it's loading the wrong section Anyway, so let me try and sort of correct this here itself So we want to create an ordinal scale whose range of bands are 0 and 400 Let's see if it works Okay, so again, so over here there's a slight difference I won't just directly supply x I'll supply x of y Now let's just play this book Exactly, I'm expected but anyway So what we've done over here is we've created a new scale for ordinal So, you know, linear scale is just f of x It's a function that will have a linear mapping And ordinal scale is typically sometimes when you have range values So you don't want to segment all your data into certain ranges Or when you have labels, like say, you know, Monday to Sunday you have some data But you want to show Mondays, Tuesdays, Wednesdays, right? So those are discrete ranges So that's when you would use an ordinal range So what we've done over here is we've used ordinal scales So we've said ordinal scale and we've specified a range band So over here we're saying it should spread between 0 and 400 pixels On the x-axis side And this is sort of to define what the... So the data you're speaking is the same data again? Exactly, 1, 2, 3, 4 So same for x, same for y? Same for x, same for y, yeah So then the graph is fine, right? Right, we could change that So actually, so x, we're supplying i If you were supplying d, then suppose your data looked like this It would be messed up 4 would move to the right and 1 would come forward Whereas we wanted to show it in... So we want this value to be plotted first And then this value So that's why we're supplying i, which is position, rather than d Sorry, this was the other thing that I could have done So now 4 is moved, right? 4 is the first part and so on and so forth Okay, anyways, I was explaining to you over here So range bands are... So what you've done is you've said 0 to 400 is what should scale to on the x-axis This point 1 is sort of padding, right? That is, what is the space between bands if you want? If you don't have any spacing, I think it assumes 1.5 to begin with But if you don't specify any... I mean if you specify it, I think as 1 or 0, 1 or 2 It will completely collapse all the bars together So you'll have all the bars sort of joined together And this way, when you specify this padding We can directly use this value called range band So this x is not defined Just to show you guys what it looks like So this is, you know, this is the range band So it's saying this is about 87 pixels wide, right? Let me see if I change this to 0.5 And then sort of see, so that becomes 44 It becomes 0, so it's inverses So that fraction, it's basically a fraction between saying that What is the padding is to, you know, the data, the bar and the width The padding is extra and the width of the bar So it's a ratio between the two of them So you're saying padding is 0.1% of the bar and width, right? Or the total space And if you make it 1, then padding takes the whole space And there's no space for the bar That's where you get 0 So this is the same Now for the sections that broke in this morning So you guys want to try using the sandbox And try and create axes for this graph So the way the graph is right now Maybe you can add these two lines But can you add an x and a y axis? You guys want to try that out? So there's a link here in this, you know, in adding axes You can open that up You can look at how they... So this is how you would add axes to the graph You have this SVG element that's anyway coming to you So you can add a class for axes Specify the width and height Add an open element And then call this function axes And the function axes, you would define it You know, something like this Where you would say d3.svg axes Scale x And you could specify tick values And this function You would then tick back and call it over here In this manner Then you would get an x axis You guys want to try it out? The translate basically moves from the origin It moves 0,30 So the whole G element moves that way So try it without the translator And see how your graph looks like And then add the translator and then see So actually that was the next sort of topic So this is how actually d3 sort of looks at a graph So the origin is your top left corner, right? And then we typically put everything into a G element And we translate the whole thing, you know Which is margin left, comma, top So the whole graph moves this way We do this because then you get spaces For space for your axes Otherwise your axes would not be visible And obviously if you're going to add margin On all your sides Then your width of your graph has to be recalculated So typically you would These would be sort of the first few lines Of your reusable chart You would define sort of, you know Default margins And then you would, you know, do something like this So like, you guys are familiar with backbone And you can use extend and things like that So basically you get back an option You get a complete set of options And if the user has specified some values It will overwrite And then you would do something like this Like to translate your entire graph Anyway, just coming back to the axes It would be something like this Like this So this is actually a helper function You could draw an axes for you The axes would look like something like this Where you have a line And then you have, at regular tick intervals You have labels that have already clicked The good part about this is that When you're starting off This is really easy to do The bad part about this is that This is not dynamic So if your graph changes And the scale changes Like, let's say, you know You're getting whatever Pollution data And in the evening, suddenly there's a huge spike In pollution, right? So your scales change So then, you know, this axis Will not scale So you would have to draw it By scratch You would have to put a line And put tick values, etc And we could come to that But basically, so here we have this We specify tick values If we don't specify tick values It would sort of decide on its own And we put this one, two, three, four There's another function called ticks So if you don't want to put tick values You can specify ticks This is really good when you want to say Okay, I want only, you know So many ticks on my axes Otherwise By default, I think it puts 10 But you can change it to any number It gets a little crowded sometimes You want to lower that number So over here, we've created an axis element And then we go right to the bottom And then we add this to our SVG element We go right to the bottom Because of the whole Z index aspect If we had put this up front Then this axis would have been behind the graph Now, our axis is just I mean, everything is fine But it's in the wrong place And that sort of comes from your Translate, the question you're asking So right now we've just We've translated it to 0, 30 But 0, 30 is Nowhere on our graph Our graph has a maximum value I mean, this bottom part Of the graph is 400 So it's that easy And you can use CSS to sort of Improve this You could either You can look at this This is the path element In class called domain So you could go ahead And style that and say Look at something like this You can always go and look at Someone else's graph And sort of get this What's happening here The interesting part is You split your styling between D3 and CSS So in D3 you can just Add a class And then go into your CSS And then sort of change the data And that works really well Because then In D3 code you just focus On getting your graph up and ready And the heavy lifting And the styling can then Just happen through CSS And these are all regular SVG elements So you can apply a lot of things On the side Is this okay? We already discussed this Yeah What's the function like When you write that Translate So that's the screen now Like that translate So any hints on How to write that code better Because let's see here some variables You have to write translate That screen close Less variable So that's a Java script right at the end of the day So if you're using poppy script You could use interpolation If you're using underscore You could use Things like that Your question is about That these would be parameters How to write that code a bit more Clear So typically What you would do is you would do this You would In your setup function You would get something like this The options along with The data So if I'm building a reusable component I would do this And then I would say These are my default options So I would say This is my default width Of 500 pixels This is my default height And so on and so forth About margin etc Then What I would do is I'm not sure but I think It's underscore which has this You would say options Default Options And you would take those as your options So what you've done now If the user forgets to specify something You've provided default values Then you would say This is my width You would calculate Your width as options.width Minus Whatever things like margin.left And all of that Then you would use this Function over here However you write it now In JavaScript you could do this So Variable is fine Variable is fine So trying to write that function Arguments and strings Isn't there Another way that you can call that element See I don't think so Because this is actually You're specifying this property I might be wrong but I don't think so You're specifying this property It's almost equivalent to See this Translate Over here It's almost equivalent to document.getElement By id and then saying DotValue equal to something So This is one way But if you want to If you're using coffee script or something like that Then It becomes pretty easy you could write Something like this Translate Offset So this is called interpolation And coffee script I just directly supplied like this But when it runs it will actually Make it this Because coffee script compiles into JavaScript Or You could use something like underscore That might make it easier And comes to 10 plus Does that help? But Maybe you want to check that out It works Is it possible to not just Express it as a string It would help you to tell whatever It's a more complex function I don't think so I don't know What is the issue with What is the issue that You see with this representation I think so I was just writing the same piece of code Doesn't sound so neat that String with arguments I was trying to find something better But I couldn't This happens For something like transform Where you can in the attribute Specify parameters Plansate scale Usually it doesn't happen for the other attributes Anyway For instance It's just putting in the parameters Usually only for transform That's all Like we said Between coffee script or underscore template Got an option of doing the other thing Now those are not necessarily Faster You could for instance use underscore template And run it But this is just blazing fast Might be worth getting used to it So this transform and translate Are properties of This SVG Absolutely nothing to do So that doesn't have anything To pass G dot call some transform No there isn't But one possibility is To write a generic helper function That creates a transform attribute For example, suppose I create a function That takes a dictionary That says width colon something Or sorry translate colon something Scale colon something Rotate colon something And that function would return these values Like becomes simpler You know where you don't have to You don't have to decide it once So that you don't have to This is what I mean Oh okay I feel that also For this is the property of the SVG container So it's you know You actually just Like I was showing you in that From toolbar You actually just supply those arguments And It does We don't translate You know We don't transform Transform, translate 0, width right 400 pixels It's got something else Sorry I'm looking in the wrong It's here Anyway so these are Properties for the SVG and it takes this And it does its work Anything else here The next part You know it gets really boring To sort of see your data and static format Right and the real power of T3 Is that it gives you pretty Raw access I mean a pretty low level access to How you want to be visualization I mean have you ever worked with Vocal visualization API and then you sort of Realize this chart doesn't support This sort of functionality It happens I mean many of you use some sort of visualization API there are certain I mean It has certain limitation Whereas this is giving you raw control About each and everything About how you want to design those elements How you want to labels to come How you want to rotate and stuff like that So you can Combine different sort of animation And get your graph On this thing Okay so let's look at this So if you see them that you know There was some animation right Unfortunately we don't have a random Let's just keep coming up and going What we're doing over here is So what we're doing over here is So how do we get that animation It was very simple right In the interface we specify What are You know basic rectangles But when data Changes we have added Two other things called transition So whatever comes after transition Will be transition from its previous value To the new value between Right and that So like over here I specified Why so why it will change Right why and height Both of these parameters will change Over this duration of 2000 Right We sort of adds some other functions Like interpolation and things like that So you can specify your own custom animation That's pretty cool So basically a step function You know in that duration From you know New value how it should go You could specify so you could have an easy function It could start really fast and then slow down Or it could start slowly with a lot of inertia And then become really fast Right so this kind of Access it gives you in sort of Capabilities which are not possible You know when you're working with standardised Visualization packages So now if you see this This graph appears Directly and then When I change the value You know then it Sort of transforms Right This is no fun right You don't like to see data Show up and then sort of behave differently Right so What you know one interesting Thing that you can do is You can always specify So you can always specify You know an incorrect Starting value here So in my interface I'm forcing it To start off with an y Actually you know in this case We want it to be 400 You got the point I mean it Actually we had to make the height also 0 So what do we do We specify you know Default values At the interface Then we forced it to Animate As soon as it loads it Right so now if you see this Now it comes out correctly Right So this is pretty Pretty straight forward it's a simple trick Right which you can apply You provide it certain defaults And then force it to run through The update phase So every time it does run an update phase You know whether it's going through an interface Or not It does that So this is and you can add I have only worked with Standardized interpolations But if you guys are familiar with Flash et cetera then You should find that pretty interesting These are simple mouse events So we are used to sort of using Google visualization or some other Where you put your mouse over you get a little tilted Right you get some sort of indication If you look at some of the really Cool graphs that people have built using D3 they use a lot of these Masses and simple things you know like Changing the color all over I could go ahead and sort of Add a label and say this is the value I could add a tool tilt and things like that So these mouse events are very Very you know it's pretty simple You can just say on You know on mouse over For this particular element Fill it right and then river it back So I think the important part We all forget to sometimes To river it back So you end up with a visualization That's also fun sometimes So it's really simple you have these Few sets of events mouse over Mouse out right That makes life pretty easy Now the next thing actually I don't have code for in that I don't have time but I think You know this I think is Is like You know When you're moving scales So let me go ahead and show you a graph So in your D3 learning curve You've already covered most of it I mean the basics If you can build a moving scale I think then you can sort of build any Visualization in D3 What do I mean by moving scale Is this So if you see not only the bars Change but even the labels Right Is that Is that visible Can you see the I don't know my script If you see the last row It's going from integer to decimal Number of ticks are increasing Number of Sometimes So that's pretty interesting So one is your values are changing If your values are changing Then you want to recalibrate your scale Because you want everything different So the bars We've already seen how do you transform the bars That's pretty easy So this part is pretty interesting How the axes are changing The scale So the way they've done it is That you maintain two sets of scales The old scale and the new scale Right So you have like scale x, old scale x, y Scale x, new Right You get the new data You plot the new data with the old scale Okay So your data word let's say is off the start Right so it will be here Now you clean it to The new position with the new scale So what will happen is You will see that the data was here Sort of come in like this smoothly inside Right And It took me a long time to figure out exactly how this was working This is what it's doing So if you see values go in and out Very seamlessly And that's all that there is You need to just remember that there's an old x And then you x scale You plot the values only older And then you clean them to the new one Right and that's it It sort of takes care of the rest So if you can build this On your own then You understood everything there is 2d3 and In terms of the philosophy The rest of it is api The more functions you use The more interesting your data is The more sexy your graphs you can build Right So d3 also has Is this font size okay So d3 has these Really cool functions called Dot json dot csv Which make it really easy to read Data from a file Actually first let's just go ahead And look at the data So this is Your data has got Ranges And markers So So there are 5 series The first one is called revenue profit And so on And each of those series have 3 Sort of data sets One is ranges, the other is measures And the final thing is markers And if you go back and you See the graph on top You will see that there are 1, 2 and 3 Check that out Basically there are these 3 Bars, there is this dark There is this light blue And there is grey and these Sets right, so they are also there And then you have this final line marker Sorry, I remember So this dark blue and light blue are One data set Your dark grey is in the background Is one data set And then finally you have that marker value Which is floating over here So he's plotted all 3 Data sets In this one bullet graph Does that make sense? So there are ranges This is 1500 to 255 I think these are the grays Measures are the clues because there are only 2 values And then finally marker is the one value That floats right at the end So In this one graph You can You can show a lot of data You can compare what does This split look like from this year This year if you have 2 quantities Compare it to what it looked like last year And then you could say what your Targets are, so it could be A graph Which is showing you all this data In one go Coming back to this So he gets this JSON data The complicated part That he's done in this Is that he is In this particular graph what he's done He's combined all of this He's looked at how we were working with data Where 1, 2, 3, 4 For him this is 1 This is 2, this is 3, this is 4, this is 5 That is Each one is one element for them He takes that one element And then he plots that data So it's got a little bit of recursive cons To it So here you can see that he's Maintaining the scales If you can see this X1 X1 is getting, it's the new scale So it's passing the new data It's building a scale Just focus on X1 is equal to d3.scale Just this part And he's supplying the data To this and he's getting that Whereas X0 he's saying this is the previous Scale He's storing this in this Chart, underscore, underscore Chart, underscore, variable Or he's creating it. So the first time You don't have a order scale So the first time it won't translate First time it will just be Both the scales will be the same But the next time around You would have the difference in the two scales When they update they would change So here that's where he Stashed the new scale right here The interesting things that d3 has Is Which is pretty cool Is Layouts So this is a stacked Layout What this does is Each one if you see over here Is a path Which is basically an area You specify all the boundaries And then you fill up that path Each one is a shape But Let's go look at the data But if you look at the data So they will all be In excel have you done the stacked Bar graphs Where you have different quantity But you pile them up on to each other The data set behind this is also Similar But the difference is Once you run it through this Stacked layout It modifies the data in such a way That It basically becomes a stacked data set And when you pass it Through this area function And d3.area or whatever And you would get such a visualization So you have You know you have one curve And then the next curve would go over that And the third curve would go over that So d3 does all that heavy lifting For you So this is there in Layouts There are different layouts There are a whole lot So there are all these layouts Bundle, code, cluster Of course I think you had done a pack With realization last time Partition This is your To get donut charts and pie charts Etc What they are doing is basically They are modifying the data And There is another interesting one called Sankey Which is a plugin Which I just recently explored So I wanted to show We are building an enterprise product And an application goes through various teams And at some stage it gets rejected And goes backwards And if you are a good organization You want it to flow forward So we wanted to show what percentage Of them are going back And things like that So the Sankey plot does it really well In nodes, they are the teams So it draws rectangles for them It actually looks ugly But you can just try and show it At the moment So I still need to work on this Make it slightly prettier Clearly you can see I have fudged it from Someone else's example Basically these were the way I can also show you our data So This particular graph Expects the data in this format So nodes are in my case all these teams So this is the financial node So This is showing you all the various teams And then it expects something like this link So between index 2 and 3 That is Application and sanction The value is 21 So Then Sankey takes this And sort of plots it this way Over here What we are looking at Is applications are going forward And it also has An animation built into it Or interactivity That I can pull back and forth So this graph Needs to be beautified But the cool part is that you can see These little steps Which are saying that you are going backwards So there is one application Which is going backwards here 6 You can also see where are people going From where are they jumping directly To the jet stage So The way At least I use D3 Is I Find interesting examples And then try and see if my data looks good In this or not, does it come through Because not everyone can understand What is going on over here And you keep iterating with it And then you sort of figure it out There is another visualization Which is the same data I tried to plot it this way To see what does it convey This really can make much sense This was the euro debt example So once you sort of figure out Your visualization then you start Weaking it and then you start Making it work for your needs Your specific needs Sometimes you just sort of exploring And seeing does my data look good In this or not And then the basic concepts Are always going to be the same So Watching Of the problem And then figuring out How to plot the data Against a particular group How to plot the data Into a particular layout How do I visualize The end result That I am going to use this layout And this data will go with this layout So This is a valid question And my only answer is trial and error So I think If you go to a D3 gallery You have a huge number of options And there are equal number of Community options But not everything is relevant I think You start off over here By looking at what you are trying to plot Is it location based You know Are you looking at some A network diagram Or is it a time series Data set It's a time series word You would look something like this There is another really cool example Called cross split I will try to understand how it works This is a company Called Square that I am going to use So By the way we haven't covered We haven't looked at even some of the advanced API There is something called as context brushes Where you can focus and zoom in On a particular part of your chart So I will say start here Just look at some of these visualizations And then see whether your data Makes sense or not So this is Data about flights You know the arrival and departure times Whether they were ahead of time Time of day when they leave And all of that So if you see this I am changing the So if you look at this This is actually pretty interesting This number 53,8007 And this is all happening really quickly So if I move this My screen is small This is all possible And D3 uses And it has something called as brushes And text brush D3, I mean start here This will give you a good place And then tweak And work backwards into making it work for yourself But definitely look at this resource In terms of You know, reusable charts Once you start Get a handle of things Then you would start wanting to reuse The same components Especially if you are using some MBC framework You know like Backbone Angular or anything like that Then you would want to keep using them You know The way of charts where you are on Was pretty granular control But most of The other APIs and all It's not that granular Whether you need this much of granularity For a day to day work That's also coming So that's the question on your hands Yeah, so sometimes Yeah, absolutely So you could take that call and then sort of decide If you want to do things with D3 And the other thing is you don't You could also use D3 in a different way You don't need to necessarily draw Charts with it You could pass in any kind of data And it could answer this thing about This is new data, this is updated data This is exited And you could use that to do a whole lot of other things I mean, but specifically in the browser So you could arrange Maybe you got a You could create a tweet And how you want to reorder them On your browser you could use that You could even D3 in there So you don't have to draw SVG elements, you could use this With the other There are also APIs built On top of this, right? So Vega for example If you want to use reusable There are other libraries like Vega Which fills up D3 Just use standard complex So I think those are again Things you can try out And in terms of choosing graphs I mean, you can Go and read some of the different books Or some of the other books will basically Tell you what to do in different types That's probably also a good start What are the data handling capabilities Like how much it takes I wouldn't be able to comment directly But you know with The thing I was discussing It had two lakh rows of data And in real time you were Sort of filtering that So that's pretty powerful, that's really efficient It has In great detail in these formats Like loading external resources So you have You could send it XML, CSV Taps, separate files, JSON, text And all of that So that's pretty powerful And really efficient Any other questions? About exporting mechanisms What do you mean by exporting Like print, PDF, or something like that To give it to the next level Of business management You want to export it in a nice graph Or whichever way Linking those to the PPT Or on presentation So I mean This is a web page right So you could take a print screen And I mean On a different note I mean, basically You could make this into a PDF Like Chrome allows you to do it I mean, this is not Specific to T3 This is anything in browser However you can export from browser Those same rules will apply But there was a pretty interesting story Almost a year ago or something There was this company Another analytics company They had Maybe it was charted out I have a lot charted out Basically they had Built this whole dashboard On the web So if you log in you could see your website You could see all these cool stats In a really cool way But they wanted to give the same Sort of visualizations on email So you get an update in every day Or every week, whatever you do And their big challenge was That this is D3, it is JavaScript driven And it can't be served in an email So what they did was Used PhantomJS PhantomJS is like a headless browser So they had a job Which would run And then plan it in a headless In a PhantomJS loop Take a sprint screen Attach it to the email and then send it out So that was really cool Because they reused all their code Which they built for the web For email, so they didn't Create a separate thing And the user experience was the same So how my graph looks like on the web Also looks like that There's no way to retain the interactive thing There's no way to It's not flash So There's no way to export also This is a very roundabout way This is a roundabout way So export it So you could make it a PDF And do the screen and things like that But I mean I don't think You can't imagine There are a few Ways that are emerging In terms of Export options So in New York Times for instance Shankar Released A browser Called SVG Gromar Which is What it does is extracts the SVG Which is one step to the solution There are enough ways Some more granular formats So you can load it for instance in inkscape And save it as a For a lot of time Or save it as an EMF And then import the EMF into Word or PowerPoint So those are semi-automated ways In the sense that you put automated Inkscape to do this Transfer and so on We've recently built something that Was SVG into Microsoft Office native objects For example, there are a few other examples That PDF output like Somebody mentioned using phantom.js Come up directly These are at their infancy But while D3 doesn't Directly provide this support I guess it's more a question of can SVG be exported to other formats The answer is Increasingly but slowly yes But just a separate thing Like you can also run these So we use these visualizations on a mobile as well As fans across mobile and In the web So this is the same sort of visualization That would run on the web That runs over here And you have the same sort of So for us it's very nice Because we are reusing confidence We try to do the same thing in Java And I don't really have a tough time I just want to reiterate that You can just copy the SVG Domain and save it to any file And save the extension as .svg Or in state as And also there's another library called NVDT It gives you a lot of reusable graphs Which are similar to your Google Visualization charts NVDT And you can also do the same kind of customization Also it's a good example For how you can Extend the DT library as Make reusable charts by yourself What type of Fallback we can provide If browser doesn't support SVG And also that So either images Either you store them as images Or I mean increasingly I don't know which browser is But I think IE7,8 maybe They are the only gaps SVG SVG SVG SVG SVG SVG part of it So I actually Supposed somewhat of SVG Did I natively Thank heavens for that That's got us a few crores of revenue Just that one feature And it's not too bad either Of the support But yeah, 6,7 and 8 are one reason Why we'll have trouble with SVG And the other are Browses that just do not But in that case I guess a visualization part Is more IE6,7,8 Candles wouldn't work either The only realistic options are Images like I said Or VML and there is An SVG to VML converter Which sort of works on The whole bunch of that There used to be one that Used to support Which was A fairly robust one I don't know Continues to be supported But without doubt this would be the cleanest way To handle SVG on older Process Images are a good word VML as such is a pretty good standard In the sense that it's Supposed many of the features that SVG does So which means that it's possible to use The interactivity that one gets with SVG With VML as well in some of the older Process But obviously this is a standard that is Failed Like We're a small start-up team So we've just sort of Try to reuse our code And this was in one place So we say we don't support IE But that's not the right approach But that works for us I think Jinseh Bird also doesn't Support SVG SVG is not supported below 2.3 or maybe 3 But Now you have a Samsung Galaxy 4.9 mk Which is 4.1 I think So I mean these are all Sort of You know it's all touch and go In the sense that you're moving forward Things are changing If you really have to support if you have a client Which is on legacy systems Then I think you should do that But if you don't have such constraints I don't think you should try and support The entire ecosystem That's my personal opinion So I just want a quick point for me Was this sort of Format useful Or was it too basic And too much time spent just trying to Make it in the app work We do have feedback from that I would love to know because Just tried a new approach and Just trying to see if that works Thank you so much and sorry for the delay In stopping