D3: Animation

welcome back everyone to data science for everyone today we're going to be looking at animation and d3 let's get started so to start off let's go on and make a copy of our template and so um again something that we'll be uh looking at today has a lot to do with some of the the best parts of d3 and again we're just doing something very simple um we're going to be talking about uh using some transitions durations easing and delaying of events we can also do um a lot of other very cool um simple animations by the end of today and again as as things uh proceed um we'll definitely um be creating up some more advanced examples as we go along so let me go on and get inside of the animation one let me go on and open up both of these files here um all right so first off let's kind of go on and start talking a little bit about um the transition function okay and so from that we'll go on and put in some some styling in here so first let's create up a container okay and so this will have a height of let's say 100 pixels again this is going to be very similar to our previous example that we had of with um just with the little um div box uh that we had so let's also do another 100 pixels here um uh our background color is just going to be um yeah let's just have a dark blue um all right and let's go on and create a div in here and then uh let's actually go on and give it the id here uh of our container sure spilled everything right there all right container excuse me uh and so let's go on and actually um do a bit of a transition here so let's do d3 dot uh select here and we're going to be selecting uh by that id of container so and we're going to use transition and now maybe i should talk a little bit about what transition does okay so again um this d3 dot sum whatever the selection is dot transition is going to indicate the start of a transition and then it uh some different transition functions can be applied okay so in our instance let's say that we want to go from blue to red so we have a dark blue let's go to like a bright red so we can have that selection now off of that selection we need a duration okay and so maybe i'll make this um [Music] 1000 so 1000 in this instance would be one second and then we can say dot style so basically it's it's telling it to kind of wait okay oops extra um and that style will change the background color to um um i'll just let's let's just put it as uh red okay because then i think that's probably one of the furthest we can do from that navy uh and i think i think we're going to be good with that part from the transition so let's go on and do uh python-m http.server to start up the server let's go on and do localhost 8000 and that happened way too quick for us to see but let me um just refresh okay and you can kind of see that let me let me put it let's change this to maybe two seconds all right see there you can see again i'm just refreshing it so you guys can see it um and just goes from blue to uh to um to red and again maybe we could we could even add in something like dot transition dot uh duration 2000 uh style here uh background color and let's say that we want to change that to yellow so blue red yellow okay so then you can you can as you can see now you can kind of give it all kinds of different uh transitions you can stack them on top of each other uh and everything else and we'll and we'll see later on for example when we have like a line plot or something that transition we may have the the line plot kind of just like grow up or something um so uh again we have have another example of this and one thing that we can do is let's say that um let's actually just make this a little bit same thing just a little bit different here and do something like um var t r for no just t for transition it's going to be d3 dot transition and that's not gonna help me at all i need uh yeah we can do that actually so uh let's do d3 dot transition and let's say that you want to maybe um reuse this um in a couple ways and so like for example i used up here i used transition uh duration 2000 twice okay well we can actually go about doing this d3.select whoops i'm using some of the shortcuts there and i need to remember what they are um and so again let's do our container here and do something like transition but notice here we can do just t we can throw that that variable that we saved in there okay and then we can add in here dot or we can do style here of uh background color of what um purple and i want to change the no 2000 that's fine okay that didn't really change enough for us to see let's change this to to yellow okay and now that transition works and so this is i find this to be very very useful okay when when you're wanting to kind of have have a little bit of some effect or some transition time saved up okay you can save this as a variable and then you can reuse it um a lot later on um all right so let's go on and maybe look at one more and let's do something using delay so let me go on and comment this out and let's do something like this so the delay function uh let me let me just type it in here for now it's not what i wanted i want delay okay so just just delay again it's a function here um is again it's going to set a delay parameter for each element okay so again so when whenever some um transition is applied okay so we're going to have this transition that starts and stops at a specific delay value and so let's let's actually create up a little bit of a maybe a heftier example here uh so and i'm going to use um since it's going to be a little bit heftier i want to change this just a little bit to make it i'll separate everything out okay into variables um here select we want the body in here and we're going to a pen append here svg and i'm going to go on and comment you out and i'm going to comment out the style okay so that we can see here it's just going to be empty and so we're going to append some svg we're going to give some attribute in here our width a width will be 500 our height here will be 500. uh and then let's go on and actually create up a bar bar one here is svg.append here we want a rectangle and this is this is going to be very similar to how we would build up like um svg bar graphs uh that type of again that's technically what we're doing right now now again this is going to be a more of a long-winded way to make this but we'll and we'll have some other examples later on as well that are a little bit more simple um but again the the purpose of this is to show the delay function so let's go on and also add in whoops um an attribute in here and we want um let's do a fill effect of navy here we want some attribute in here of x 100 here we want y 100 no you know what no 20. want something smaller 20 um where's my that's fine uh and then let's do height here of 20 a width of 10 okay and then we'll go on and also create up another bar and i'm going to go in and just copy that and what do we want to change in here we're going to change you know let's let's have this other bar here be no we'll just keep it as navy for now um x we'll be at 120 y will still be at 20 here uh height will be 20 with will still be 20 and then we want to add in an update function excuse me why does it keep doing that um so we want update in here and then let's go on and create uh create up a function for um update so and here we want update um and let's not give it any parameters and so what we're going to be doing here is we're going to actually we want to grab each of these bars and this one needs to change to 2. um so again this is just going to have two bars in here and again we could have done this with some functional programming and stuff and we'll we'll do that later on but again this is just for a nice simple example so let's do something like bar one dot transition and we want to use the dot ease okay d3 dot ease linear all right dot duration and here we'll give it 2 000 and then dot attribute here we want height at 100 and then we're going to do the same thing here as bar 2 dot transition in here and again we're going to use the dot ease here d3 dot e's linear uh and then we want again uh duration 2000 milliseconds uh delay 2 000 milliseconds dot attribute here and again we want a height of 100. so uh once oops how did that happen okay and so oh actually i'm not gonna need those so now we have this update function okay and so that's that's gonna be working here for us so if we go back over here and run this notice this is what happens okay it's kind of cool right so this first one this one's the first one we're just going to transition and basically on the load of the web page okay it's going to start and then after 2 000 milliseconds we're going we're having this delay then this other this other bar 2 will start its transition so let's do that again 1001 1002 thousand one one thousand two okay so then now you can you can actually see how you can kind of maybe grow your bar charts up for each um item okay and that would be um that'd be kind of fun for if you're doing some sort of categorical bar chart or something then again you can have this um loop over uh your transitions and kind of add in uh specific uh parts as you go along and kind of have everything kind of grow and make it look very natural now something we didn't really talk a whole lot about okay is this ease function okay now um it's how we uh technically control motion okay so in this instance um we're having it kind of like grow at a linear um function okay now there is um let me let me pull up an observable uh file for everyone here i have this up here you guys can see these are the other types of um eases that you have so again you have them so they kind of like wobble back and forth a little bit you have them so that they're more of a circular motion you have this elastic type thing you have a bounce um and i don't know how they would actually look if we if we did this so let's maybe do um ease bounce ease bounce and see how that actually goes and works for us okay so that's kind of fun again particularly if it's kind of falling down um so or again we could do something like this um elastic and again you can get i find these to be really kind of fun animations and you can play with them however you want um whenever you kind of are creating in some of your nice functional forms and that type of stuff and again you're the only limit that you have is your imagination when you start working with the animations so this is this is a very quick introduction a rough introduction to um to animation with d3 i hope you guys like this if you did please comment subscribe and hit that like button and i will see you guys next time bye

Channel: Data Science for Everyone

Views: 299

Rating: 5 out of 5

Keywords: data science, data science for everyone, data science for business, ds4b, ds4e, data visualization, interactive data visualization, graphics for the web, javascript visualization, applications, dashboards, exploration, streaming, websites, plotting, charting, charts, D3, JavaScript, d3.js, d3, data-driven documents, HTML, CSS, DOM, Document Object Model, Document Object Model (DOM), animation, transitions, duration, delay

Id: WmPkd4IXLLE

Length: 16min 59sec (1019 seconds)

Published: Thu Jul 01 2021