D3 JS - Build Data Driven Visualizations with Javascript [svg animation, data engineering]

[Music] all right welcome back so we're gonna now talk about d3 d3 stands for data-driven documents what that means is d3 allows us to take very boring data such as Excel documents and so forth other data sources we take those and make beautiful visualizations such as these visuals as you can see here all right there we go so we take what is right data and we make them into driven documents that are visually beautiful in order for us to start using the 3ds javascript library we have to understand HTML we have to understand JavaScript as well as CSS so essentially all of the basics of web development we must understand those concepts so that we don't have a hard time with d3 at this point if you've been following us through this entire course you should have HTML Javascript and CSS under your belt if not you can either go back to the previous sections or you can go and get other resources other courses that deal with HTML Javascript and CSS very nice so let's go ahead and start looking at d3 [Music] all right so if you go to Google and say d3.js or just d3 you should see these results here so what we're gonna do is let's go to the first one that says the three digest and d3.js at old click on that and that should take you to these awesome beautifully crafted website so this is the d3 website so this is where we're going to play more often now you can see here everything here is built so you can see right away the moment you get there we have at the top here overview I have examples documentation source so but the cool thing is in the first at first glance here you can see there's a lot of goodness that's happening here now most of this may not make sense at this point but that's totally fine the Bureau of d3 here is because as a JavaScript library it has everything pre-built for us so the things that we can do with d3 in fact let me click on one of these you can see these are actually examples of things that have been created using d3 maybe not the best example let's see let's find something exciting about this one here all of this was created using d3 are the beauty right now the beauty of having a JavaScript library or a library generally speaking is that a library abstracts out all of the hard work per se this is to say that all that we can do with d3.js this library we can do ourselves with JavaScript however that will take a lot of work right because it will have to really first of all understand JavaScript and then we have to do a lot of work just to create something like this ok so that is the beauty of using a library and the beauty of having d3 to create beautiful visualization with our data so you can click anything here you can see that they have amazing graphics amazing visualizations that been created with d3 also you can see they even give you the HTML now look at that we have our HTML tag we have then script tag which then uses JavaScript here ok so all of this you notice is pre-painted with d3 so the three is the object that is the library we're gonna be using okay very good and you can see it looks a lot in fact it is a subset of JavaScript so it's a library was done or created using JavaScript that's why they say it is a JavaScript library all right so what I want you to do for the next videos is to explore this website now I don't expect you to understand everything like if we go up here we go to documentation that is not the idea but the idea is to get you familiarized with d3 documentation okay so they even give you introduction API references and all sort of things here and at the bottom here is tells you how to install which will do that in the next video and so all right very good so you can come back let's go back here you can go to source you can go to examples again which is a better representation of what we just saw now all of the examples are lined up here you can see at any point you can click let's say that one there look at this all of this is done using d3 very very amazing alright so play around with this go through all of this take your time so you can hopefully feel all wired up you feel excited about what you're gonna be learning and looking forward to building amazing visualizations [Music] all right so let's go ahead and set up d3 in our project here so we can start putting things together here let me get rid of all of this this is old stuff Dave as well so we have an empty file here it's a project go ahead and create an HTML project and what I did is I named it boots tester so go ahead and create an HTML project name whatever you want and create an index file as I did there and while we're here I'm gonna go ahead and create another file here say no file it's called this app is ok very good we have a digest there and now it is time for us to connect this project here to see next on HTML to d3 like I said d3 is indeed a library so if we go back to our page d3 that org page here you can see at the bottom they show us ways in which we can actually connect d3 project or projects now there's two ways there's one way which we can just take as you can see here there is the script we can copy this and go to our project inside of our head put it there okay that's one way now this way here says that every time we run our scripts every time we run our HTML it's gonna go and hit this link here right now this also implies that we have to be connected online so if you know for sure that it will always be connected online while you work on this course of working a project this is a good idea however there's another way which i think is a bit preferable because it doesn't require you to be online or have an internet connection ok the other way is very simple if you go to this link HTTP d3.js that org slash d3 that v5 that yes notice that it said v5 here that's the current version of d3 let's go back here to see it says here that download the latest version 5.7 I know now as of recording this video this is the current version now if you're watching this maybe six seven months or a year later this could be different and that's totally fine okay I like to always go with the current version and you should do the same so come back here you go to our link here so d3.js at org slash t3 that v5 if we are already on v6 of course you're gonna put v6 that yes okay so what this does is it gives us the entire library look at our handle there okay this is the library that constitutes our d3.js code all of this ah somebody had to go and write all of this or a group of people so that we don't have to write all of this okay so what we do here you can now go ahead and select all and say right-click or just say copy like that okay another option is to actually create this file internally so what I'm gonna do here inside of my project now right-click say new file and I'm just gonna go and say D 3 dot version 5 that j/s something like this okay hit enter now we have it here so I can go ahead and paste it all in there so now we have the actual library in our machine as you can see look at this 16 thousand lines of code so don't change anything here I'm gonna save and I'm gonna go ahead and get rid of that so that I don't accidentally do anything strange there so now we have our D 3 V V version 5 that is locally that means what I can do now here at the top I'm gonna copy this now for source I don't have to go directly to this link I can just go and link up to D 3 there we go v 5 digest make sure that the paths are correct meaning if we had added this D 3 on a different folder then you know you would have to navigate to that folder in order to get that ok at this point here I don't have to do anything I can just go ahead and comment that one out because we're gonna be using the local version of D 3 ok so I will leave that to you whichever you want to use just remember if you use this first option here that means you must be online while you work in a project because this is the link what we can find III otherwise he used this option doesn't matter if you're online offline it will still work because it's all inside of our machine all right very good so now that we have our d3 down here so I will do something real quick so we make sure that everything is working fine so we have our d3 added here and what I'm gonna do here at the bottom because remember everything is read from top to bottom when the browser hits the our HTML that means now it's customary to actually add a dis script that we want in this case here let me put source so this is the script where we're gonna be writing the app that is we're gonna be writing the actual d3 code because this is the library remember so we need to have say app that is like that right this one here this is where we are going to write our d3 code all right very good so inside of our body here gonna give a div and then I'm gonna just go ahead and put ap paragraph say hello there let me go ahead and put um a span keep saying another hello I save that you should see that we have hello there another hello so nothing out of this world of that there okay very good now the power of d3 lies on many things but the main thing is that as you know by now when we use JavaScript in order for us to select the day for any elements instead of our body here instead of HTML we have to do some work I remember we would have to do something like this document that either you select or we can subjet element by ID and then we pass here let's say ID my div assuming that we've added an ID to this Steve here my div like that okay and then we'll have to go and say something like get attributes or whatever else we want to do okay so it takes a lot of work but with d3 we don't have to do that anymore in fact because remember we are inside of index here we have our library already referenced and we have at the bottom here our abbe de Geste which is referencing our je s file what are we gonna write around the three code we are able to say just D 3 like this and say dot and I can say select and just like that I can say select P I say style and I can say color brown like that if you say this come here look at that hello there change the color to brown that we want so now it's very simple because we're using d3 if I want to select all of peas all the paragraphs I can select all I can say select all like that save that notice now I don't have another this changes to P like that save you can see now all of the peas all the paragraphs have turned indeed brown right very very very nice so this is a very small fraction of d3 of course because the main focus here was to make sure that we are set up to start learning about d3 but as you can see it's really easy alright I will see you in the next video [Music] so let's talk about SVG SVG stands for scalable vector graphics the reason why this is important to understand or at least to talk about is because d3 creates visualizations using JavaScript right these visualizations are actually much connected to scalable vector graphics because the scalable vector graphics allows us to create shapes that don't lose quality if we zoom in and zoom out and also these files are very small as compared to PNG or JPEGs and other image formats that are out there which means also they make it very easy to load in our system HTML file essentially will have divs in other ways of laying out the actual website right SVG is very important to d3 because it is indeed the container for d3 so everything that we're going to be drawing it's going to be inside of an SVG container now the reason why SVG is the best candidate is for the reasons that I said before it is a canvas that allows us to draw shapes in such a way that it also conserves the quality of those shapes that we create which is very important here's an example of a PNG and a SVG logo a PNG is just a normal bitmap or normal image now here's an example if I go ahead and zoom this in you can see that the quality starts to change as we zoom in right it starts getting pixelated and doesn't look that great because now we're losing the quality okay however if we go here and look at the quality of this image here right I'm gonna keep it make it bigger you notice it doesn't pixelate because the quality is still reserved as it should be so that is the one of the main differences between a PNG or a normal big map and a SVG file [Music] alright let's go ahead and see how can we put together an SVG tag inside of HTML obviously this is not how we're going to do moving forward what about I just want to show you just so you know okay let's create a container here so we're gonna go ahead and say SVG and close like that so there we go we have our SVG element now the cool thing about it it's just like any other element right so if you save this and go back to our web browser here by the way I made sure to comment this out in our app that J is here right because I just want to show something real quick if you go back here nothing is showing however if we probe in in order to inspect and let's go to elements you can see now let's open here body you can see now that we have our SVG element if you highlight it it tells us right away that it has 320 or 300 by 150 very cool very cool indeed and the great thing about this this is just an element an HTML element if you will you can also add some attributes here the second say style to style this I can say back ground - color and I couldn't say let's go ahead and say brown like that if you save this you will see now we have our SVG container so this SVG like I said before it really is just like a block such as a div and other blocks you can create in our HTML so this indeed is where we can add all sort of things I draw all sort of things inside alright very cool so if we don't put any style here it's still gonna be there as you saw before because we can go to body and we can see our SVG container showing up there now SVG itself the object SVG has several methods for drawing paths boxes or gold texts graphics image and so so many things okay so what I'm gonna do here so let's go ahead and play around with this a little bit so we can see let's see how can we draw a circle well the first thing we can do here I'm gonna get rid of this style and I'm going to go and say give it a with this SVG could have it with as well I'm gonna give it a width of let's say a hundred and it will know we're talking about a hundred units okay so I'm gonna say height let's give it about also a hundred let's save this so you can see real quick what's going on you notice we still have it inside here you have over you see with one hundred nine hundred and there it is you can see at the top here right so inside now I can go ahead and say for instance Oracle like that look at that so for circle we need to add CX as one of its attributes if you will so CX I'm gonna put 50 all right I'm going to see why I'm gonna put also about 50 and then I'm gonna say R for radius of our circle is going to be about 40 all right let's save that and see what's gonna happen and voila look at that and now we have our circle now let's go ahead and dissect this a little bit here so we can see what's really going on well when we say circle so we creating our element circle here and we adding a few attributes if you will so when we say CX we're saying what is this X value in the coordinates now one of the things that is very important to understand is that won't talk about computer graphics the coordinate is actually upside-down than what we already know of meaning if you look at this very simple example here this is how the computer graphics coordinates is laid out meaning this point here is zero zero meaning the x is 0 Y is 0 in this is a reserved here will be for instance in our view here window view will be at the top this corner here which I can't even really demonstrate okay that means in this case if I want to say see X is 3 means we go right 3 okay and Y is also 3 as this diagram shows that means we go down 3 so this would be the middle that's reason why if I say for instance see X 50 so this Center is going to 50 let's now go to the right about 50 here and it's also why 50 is that gonna go up Y as we would do with our coordinates right it's gonna go down 50 somewhere about here that'll be the middle of our circle that is the reason why we see it here that means it went 50 this way X and then Y 50 which is gonna be about there so it's gonna be in the middle here so that is what we're doing here we are indeed creating the center of our circle because a circle has to have a center and then we say we want the radius well the radius is the distance between the middle to the end of our circle so that means from here in the middle to any direction it's gonna be 40 okay so that's so that's what's happening here and you can see if I change the X to 150 what do you think is gonna happen is it gonna move to the right or left but save right so you can't see anything here why is that well the reason why is because well the width of our canvas is just a hundred and height is 100 so if you put 150 here it's gonna be somewhere to the right far from what we can see because remember again let's go back to our inspect here you can see when we inspect let's open up there okay when we inspect our visible area our canvas per se it's that small you see that right so we moved it to the right where we are not going to be able to see it because it's not the visible area for our SVG right you wanna see if I go back and say for instance 10 you're gonna see it of course you're gonna see now went all the way to the left you see it's a little bit over half that it's showing so if we go back here and I put 200 for the width I can go here in size 150 we should be able to see it there we go and if you open down here let's go to our torus VG it's right about to the end of our canvas now this concept is very important to understand especially the concept of our coordinates how it all works in computer graphics because now we're talking about computer graphics right because we're drawing things onto the screen always remember the Y goes down X goes to the right okay so it's almost like if you take this Y and put back up like two as we would always see that would be what we are accustomed to in mathematics and so forth alright so zero zero remember is always the top-left corner and if you go down the Y numbers will increase if you go to the right the X numbers will increase alright very good so let's see there are the things we can add of course we can say for instance that we want stroke to be yellow you can see let's go back down here you can see now our stroke maybe it's too small is there is that yellow you can see there very good what else can we do well we can keep going here add other attributes here I can say the stroke - with it's going to be about 4 units make sure that we have the actual spelling there we go and I can see it's pretty big looks like the Sun or Eclipse has happened we have unintentionally created an eclipse how fun alright so we can keep going here let's say what else can we do we can go ahead say fill right but I mean the inside color we can say it's gonna be yellow alright now the Sun is back there good so there's a lot of things we can do with SVG because remember we create the canvas first and we can add certain attributes or properties such as width height and many others okay and inside that's where we can create the actual forms the actual graphics if you will in this case we created a simple circle circle takes the x and y but you have to say cy + CX as as you can see there and you have to pass the R for radius in this case is 40 so the smaller this is let's just put it for you can imagine that I also will become small and place the radius is indeed smaller put back save and there we go so in this video were able to create a circle in SVG [Music] now a few more curious about SVG and you want to learn more about a speech e elements and so forth if we go to developer at Mozilla that orgs or MDM web documents here this is a good place to be we can come here and you can search for sv g like that and i usually go to this link there and at the bottom here says let's see SVG documentation on mdn so click that and it will give you exactly what SVG is and all of the information that you may want and looks like even Google Maps is created using SVG why do you think that is go back to what SVG is and you will realize the reason why it's used in Google Maps and so many other technologies what we mostly interested in here is this SVG elements if you click here you can see there's a lot of elements that we can use with SVG right we use circle click there it oh look at that it looks almost the same right very cool so you can add other things with SVG such as view box as you can see here at 0 0 it means 100 100 right width and height and you can pass an XML so to point to the tablet or org SVG a namespace and of course you have that circle that we created earlier so this is another way of putting it right what we do is circle if you look back as you can see here we did not terminate it the way they showed in that example like this right but not a huge difference you can do either way that works very good what else so there's other things you can look at by clicking here clip path if you click here it tells you exactly how to do that so once you have a handle of this creating SVG graphics directly in HTML you can see that it's not that hard and it gives you a lot of flexibility as you saw so far however you notice this is not the way we want to create our graphics using d3 like I said before d3 actually uses SVG as its canvas wear d3 actually starts writing into the SVG for obvious reasons so this it was just to kind of let you know show you that you can actually do in lines and sometimes you may want to do everything in line as we did here but the power here is that we can then use SVG elements inside of our apps yes in which is our d3 and that's what we're going to be doing in the next video [Music] all right so we have now the SVG that we learned earlier now we can actually do the HTML inline SVG as you saw here but like I said before this is not very efficient because as we start creating complex graphics and so forth using this method here you can't only take us so far alright so what are we gonna do actually is I'm gonna get rid of all of this what I'm gonna do here is I'm gonna create a div I'm gonna give this div a class name of canva like this and there we go so we have our div and we call class name canva as such so what I'm gonna do now is I'm gonna go to our app J s remember this abjure s is connected to our HTML which previously we added our d3 v5j s library so this is our d3 alright so that means here wherever right here it's going to obviously a manipulate our Dom here so how do we then get or select our cafe here so we can start doing things with the tree so previously we talked about how to do selection of our HTML elements in JavaScript so we would have done something like this constant let's say a for instance I would have to say document that query selector and it would pass in this case a class name canva like that right but with d3 we can do the same thing without having to go through all of this we can just go ahead and say constants day in this case I'm gonna say B is equal to D 3 dot I can say select and look at it I can pass the canva class like this very good so let's say go ahead and log these two here so I'm gonna say a and B and see what's going to happen if you save that let's go ahead and open up our perhaps make this to the bottom again let's go to our console here the woman to do that you can see the selection that happens so it went ahead and got our canvas canvas there go and we have our selection there so if you click here you can see the first selection went ahead and got our 8 which is the selection of our canva div but the second selection has something else something more what this is the reason why we have this selection here is because this is now wrapped into d3 that means we create a d3 that select and it wrapped it with our d3 library so this B here this variable it's not just any variable it is indeed a d3 wrapped object which means it gives us all of these other objects inside of it meaning that now we have a group and were a parent we will talk more about this but for now I want you to know that every d3 object has a group and you can see in that set of group we have this Steve that canva which is exactly what we got here in HTML right everything now is organized in an array as you can see here and has the first element which is a div canva and has all of the properties of that element ah very nice if there is a difference so when we do this way just to go traitor Dom well we get the div class now when we do this way because now we're talking about an actual object in actual d3 object which has other things that we can do with then we have this selection object which contains a race or a list of other objects such as group and so forth that is a main difference now that we have so in this case here we have B as the canvas so that means now we have selected this div here right we put in this variable in fact we can just change this to canva and get rid of this because we won't need that anymore okay which is for to show you a little bit so we have our kaveh that is wrapped into d3 selector what we need to do now is to add an SVG element to it because remember we need to have an a seviche element in order for us to start adding things into our canvas right so SVG in this case element is going to be our canvas so we can do the same thing what we did earlier by actually writing HTML SVG elements by hand but we realize that it's not the best way to go about we can do that easily with d3 and how will we do that well simply we can go ahead and say we have our canvas now here so I can create another constant and I'm gonna say SVG is equal to what I'm gonna use canvas that this should be canvas and I can say dot append and what is it I'm going to append SVG just like that if you save this all of the sudden nothing happens however let's go to our elements the moment you look at our elements you go inside our div wallah now we have the SVG that was injected by d3 ah so we did exactly what we done before except now we are doing it straight with d3 which is a Java Script very very cool that means now that we have always VG we can add certain things I can go ahead and say for this is SVG say otra or attribute notice the moment you do that you will get this code snippets here now what I did to get this code snippet I kind of helps us to write code faster it's very simple so you go to our extension here and you just say d3 code snippet right mine is already installed so that's reason why it doesn't show the install button so what I want you to do is to go ahead and install it you probably have to restart the editor and so forth but that kind of helps as you code it gives you the hints that you need so that it can actually write code faster alright so go back there so atre or attribute we can add attribute just like we have been adding for our HTML or anything else so our truck like that enter so for attribute there's two parameters that we pass the first is gonna be the attribute tag that we want to add in this case gonna be with I can say I want with to be something like 800 like this I put too many there let's get rid of this save this what's gonna happen let's go back to our console there look at this now with is 800 very nice and you can see now it spans all the way to the right so if I want to make it smaller obviously let's say 500 inside of canvas it's 500 it selects smaller okay to add another attribute I could keep going here I can say dot otra and what is I want to add I can add height as such and it's going to be 250 save down to our canva and there we go we have hi 250 with 500 very good so it is indeed working but the thing I can do I can actually put this on other line so what are we doing here is method chaining but remember because we created this SVG at the top here is variable which will have this canvas and we appended the SVG we could actually put all this attribute inside of this line here as opposed to have to do this right to simplify our life I can just come here say a dot or get rid of this attribute there and just add a dot out here like this this will also work ok and I like to indent so that way it's easier to read and you can see that this training here pertains to this canvas or this variable again if you go back down here if you save you can see things are still great everything works just fine so now that we have our SVG I can come down here and say for instance SVG variable dot append let's say I want to create a circle again if you save come down here let's see you can see inside now we have this circle which is indeed empty right and of course we can go ahead and add a few attributes as well I can say dot atre and I can say for instance C X it's going to be 34 as we know already I can come down here say dot attributes again see why it's about 34 as well dot attributes atre and I can say are about 50 you can see there it is now it's not very nice because it's cut off and all this stuff but it is indeed ok because at least we know it is working ok so all of this we've done this before haven't we now let's change this CX maybe a little bit more to the right and then third your like this there we go maybe the Y value so see why about it the same thing so now it's right at the bottom here so we have to go down in fact maybe change this to 100 so that we can actually see everything so we can play around and see what really works ok so save that and there we go so we have our circle that we created you notice that we can keep going and say that attribute right fill color is gonna be blue save that look at that very easy so now we can use the SVG object it is an object why because we went through canvas which has the d3 that select so we selected our div element in our HTML and then we pass it on to SVG but we went and appended so we added an SVG element inside and the moment we added we said we want with to be 500 and the attribute height also to be 250 units so we created our canvas with these dimensions and now we are saying we want to append something to our canvas so essentially is exactly what we did before and if you again if you go back down here and you look at how things are laid out inside of our div it is exactly what we've done before we've seen that so we created our canvas put all the attributes and then inside we create a circle just like that very very easy now you can see this is more scalable of doing and very intuitive as opposed to doing everything in HTML like we did before nothing wrong with that of course but you can see that now have more flexibility of doing all sort of things so what I want you to do now we create a circle I want you to create for instance a rectangle hint-hint is gonna be something like rank or rect like this ok alright go ahead and figure that out and I'll see you in the next video I have used single quotes and double quotes interchangeably here everything still works now it is customary to stick to oneness style of coding so if you're just gonna use these single quotes just do that if you want to use the double quotes do that also but this is usually not a good idea so what I'm gonna do here because I tend to use double quotes all the time so I'm gonna change this also to double quotes like that the other thing you notice is that I put here a number 50 and I didn't put that as a string meaning wasn't inside of double quotes and yet everything still seems to work just fine now you may say okay what happens if I get rid of this hundred or get rid of this coats their double quotes this is still work yep still works if I get rid of these other ones there as well is it gonna still work let's see yep it still works so the moral of the story here is that when you actually add those attributes in this case here you can either just put them as the full numbers or put them inside of quotes to me it seems like because javascript is so smart per se and also the library d3 he knows how to decode whatever you writing here however if it comes for instance if I want to say I want to put in terms of percentages if I say 12% like that made really small that's why we can't see everything let's maybe put 56% like this and there will go everything you can see everything let me the sperm smaller there we go however if I remove the quotes in that case what do you think is gonna happen right it's not gonna work if you save we're gonna have some problems so anytime that you actually want to put something pending the numbers a 56% I would recommend for obvious reasons to put in this case inside of quotes so that the angel knows that are talking about percentage because we have that a percentage sign there but any other number that you are adding here for instance what was I say 400 is I already said here doesn't matter safe like that it will still work whether you put inside of quotes or outside of quotes or just like numbers as you can see here okay there we go so that is what I want to point out before we move forward just very small things but I thought it would be a good idea just to let you know just in case for those of you who are have a very keen eye this will satisfy your curiosity alright so we have here our circle let's go ahead and create another one here which would be SVG again I'm gonna create a pan say of hand and we want to panned a rectangle so you say rekt like this and like we did before we can go ahead and say dot pass an attribute and I want for instance the width to be about 200 okay dot ATR and I want the height of it to be about 250 how about that okay let's go ahead and save you can see there we go it's pretty big because the width it's too much I'm gonna go ahead and say 100 just to see what's gonna happen there we go so now we have these two they're very nice indeed what if we want to also add the attribute of the X&Y coordinate because remember we still have this option of telling exactly how things will be drawn on our canvas so we can keep going here right in fact let's go back and get rid of that semicolon there say dart attribute I'm gonna say the attribute X I wanted to start drawing from where let's see about 50 okay an attribute for y coordinate I want it to be also about 50 there save you can see now things have changed okay let's go ahead and make this smaller let's say with I want with two about tan and that hard to be about fifty say if you see what happens alright so there we go that's much better because it was too big it was pushing everything over to the side meaning this circle we weren't able to see it so we have now our rectangle that we created and we said we want the X to be remember again 0 0 coordinate it's about there so we'd say we want go 50 to the right went over 50 to there and then it's gonna be 50 to the bottom so it's gonna be 50 to the bottom that's why it's starting right about there to draw it so if you want to make this two more to the right right so X to the right this way you would know that you could add 150 or such and you can see it went all the way to the right if you wanted to put it down here how about how another 150 save and it's gonna be down there alright I'm gonna go back to about 80 like that very good and you can do the same thing right like we did before go attribute again I can say fill - color and I want to say I want it to be green let's see should be feel just like that save there we go we have their screen very good so were able to create a rectangle we can also go ahead and create a line right these are kind of the most primitive shapes so I'm going to go ahead and say SVG like that I'm gonna say app and again and I'm gonna say line as such I say atra or attribute so the first attribute we're gonna pass for a line we have to pass x1 I'm gonna say for in 629 this is just random numbers actually beauty I'm gonna pass X to escape this 45 that a try again the same thing so y2 or y1 300 atra Y to say 46 and I'm gonna say also add another attribute here which is gonna be stroke alright so that's the color that it was gonna be filled right and I'm gonna say this is going to be grey save that and you can see there is our line so let's change this Y to about 100 if you save that you can see now the height of it is also changed so this is how you create these very primitive SVG shapes so we so we start with circle we have a rectangle and we have line now again one thing you can do to look at other attributes that it can add into our canvas SVG here look at this going back to our SVG attributes reference from develop that mozilla.org if you go to SVG elements all of these you can actually create rights from these elements for instance let's go to circle just the simplest one you can see we have CXC why are those are inside attributes go down here again if we want to create a line let's go down look all of these are attributes you can work with you can see there is an image there we can create there's paths there's a line that we just created look at that so it needs x1 y1 x2 y2 and this stroke all of these attributes that you can see here are being added we also we add them using javascript using d3 as such so whenever in doubt if you want to play around with something you can look here there is this path again you can do that as well okay there's so many things you can do there is direct that we use before again x0 y0 and you can even create a rounded corner rectangle look at this by adding our X that means Radia X like that okay so for our rectangle here so this one is our rectangle let's go ahead and see if we can translate this so that it looks something like that right so the corners are rounded like that well let's go to theirs go right angle here and I'm gonna put it dot another atra attribute and I'm gonna say our X give it 15 tribute or Y it's gonna be also 15 let's save that and see what's gonna happen go down here and you can see it looked very unattractive well the reason why is because we need to follow exactly what they had here so those two dimensions actually work so for y 0 and x 120 so Y zero and this 120 they said like oh let's see that very good there we go maybe something else we're missing height with 100 height 100 so right couldn't like make sure that it's indeed a square make sense all right I should be the end of it and while you can see we have it in working all right so that's another way for you to practice and see how to create all sort of shapes using this documentation here so anything that you see inside of this rack SVG element here and that can be translated into what you see here there we go that is the beauty of d3 and SVG [Music] all right the next thing we can add is actually text right so to add text with d3 it's very simple we say SVG again we're gonna use up hand and here we're gonna say text just like that okay and then we are going to add the actual text now so far for any other shape we've added the attribute as such right but now to add the actual text we want users to see we say that text so that's one thing to remember and then we've just passed test here hello there as such once we save that you can see that we don't see anything in our screen here okay let me go ahead and let's go ahead and inspect inside and see what's going on well as always we need to do this to make sure everything is great and you can see we have our text hello there and as I hover over there as you can see to the top here you will see what's gonna happen it says text it's there but we can't quite see where it is that's because we must add the x and y values for it to know where exactly supposed to show so I'm gonna say dot add another attribute here let's put X say 100 and let's go ahead and add dot actually viewed and pass why I'm gonna say 150 Save and you can see there it is hello there so whenever you're adding tags you must add x and y value otherwise it's going to be really hard for us to see it showing like any other element here we can also add other attributes now one thing to remember here is that even though this looks like a normal text that we would add the HTML and so forth this is actually not just a normal text this is still an SVG meaning if we were to zoom in as much as possible it would never lose its quality that's one particular thing that it's important to remember it looks like just a normal text but it is indeed in SVG other things we can do can say that attribute can add for instance a caller who say Phil I want it to be gray there we go very nice and we can add other attributes too for instance I can say that attribute and say font size okay I wanted to say it 123 frames let's save that you can see now it became really really big right it even cut off over there because of our canvas size now there's other things we can do for instance let's go ahead and get rid of all of this at list make sure that all of it is actually from here down there let's save this and make this about 12 so that it's not massive as you can see there very good alright and I'm gonna put an X of 10 so that goes to the left there further so we can actually see it and for now let's get rid of our inspection in there and I'm gonna give it a 10 as well so that goes to the top there we go so we can see it hello there very good I'm gonna go ahead and copy this and copy and paste there a few times so we can take a look at what we can actually do with all of this so I'm gonna change the Y here to 30 and this to 50 save that there we go we have three of those and I'm gonna change the text to just something different so the first is gonna be hello this is gonna be there actually let's see this should be hello right hello there James save this you can see differentiation now there were other things we can do with our text let's put this way to the right how about 110 this is gonna be 110 and also hundred and Tanis it's gonna do put it to the right there very good so we can actually position our text by adding this attribute to say dot attribute so what I do here I can say text - anchor like that and I can say start save nothing's gonna change but look at what's gonna happen I'm gonna do the same thing to the other but I'm gonna change this to NATO if you save you can see now it moved to the left it's now aligned to the middle meaning the middle of this whole text here used to be all here now went to the left so that the end is now in the middle okay so I can do the same thing here to these other one here at the bottom here and this is gonna be to the end what's gonna happen so this one here is gonna go all the way this end all the way to the left whenever we want to move our text around position it we can use text anchor attributes to move things around now this is another way we can actually move text around and of course you can do all of these things using CSS obviously but I just want to show you the other way of doing this so I give me I can add stroke here I can say attribute stroke we can say green for instance safe we can see there is a green there okay if I change this size to perhaps 23 this is better 23 and the why I'm gonna say maybe 80 so that goes down a little bit so you can see everything you can see that we still have the gray that we say fill so the stroke is gonna be as you know the around color of the letters as you can see here there's a lot of things that you can do to make your text position a text to make it different colors different strokes different fields and so forth now these are small bits that I am showing you so that once we are ready to start using in a bigger project this is no surprise now go ahead and play around with this constant here create text move it around add size make sure that the y and x values are added otherwise you're not going to be able to see anything showing on this wing so that's very very important and very crucial all right I'll see you next so we've done a lot of things so far so we understand the basics and how to create SVG's and then put all those elements inside and painting the SVG's into our canvas and so forth okay so back to our apt ideas have changed with to 600 and high to 600 of course you can change to whatever else you want but I just added those too so that way we have a bigger canvas if you will also please do remember that our view here our browser here is zoomed in meaning that everything you see here it's gonna be bigger than usual so yours may look smaller that store will fine the reason why I have bigger is so that you can actually see it better so now let's go ahead and look at ways in which we can actually dynamically create things so you see here I created a data array this is an array because we have square brackets and we have items inside of it so an array of course has elements so this will be element at index 0 so everything starts our zero in JavaScript and increments that way so this will be index 0 index 1 index 2 ok and the length of this will be 3 again if you're not familiar with arrays and so forth they can go back to previous sections where we talked about fundamentals of JavaScript so we created here our SVG element which we created in inside of our index we're calling this class ative here to create our SVG canvas per se and we gave it 600 by 600 let's go ahead and add a rectangle inside so I'm gonna say it cost rect right and I'm gonna say SVG I'm gonna append a rectangle like that if you save this we should go to elements and we should have the rack inside there all right so of course we can go ahead and add a few things inside of a rack so I can save that attribute now remember this is for right in fact to make this much better I'm going to put that in a one line and then I'm gonna use our racket here say that attribute and I'm gonna say I want the rack attribute to width to have let's say 24 and then that attribute again height wanted to have about a hundred let's save this and you can see we have this awesome rectangle bar here let's change the color because why not that attribute feel say orange save we have our orange bar there looks really good now because we understand that d3 the whole idea behind it is to create dynamic visualizations meaning that we should have some sort of data that we're getting and then we are then using that data to create charts and so forth or bar charts like this okay now how do we then add this data that we have at the top here because this will be data right because we have 4 15 and 30 for 12 to add data we just go down here because we said rect attribute as another attribute we can't just say that data and we have to pass the data array so whatever data that we are creating or we have created or we got we pass it that way so now we're saying that's this rect here as one of the attributes in this cases data is going to have the array now for us to be able to go through and actually get this data here that we added which has been passed into our data method there we can do the following I can for instances come down here and say dot attribute I can and I want to say X and I can say X for instance let's give it about 15 if you save this should go to the right a little bit as you saw there but we can dynamically change that x value to do that we pass in a function this is indeed an anonymous function because it doesn't have necessarily a name as you can see there and then we are gonna say return and I'm gonna put a semicolon there so I don't forget and we can return something because we are passing a function and this rack we pass here a data method which in turn has their alright in this function here it will know that we can pass D and I what is this what is the D what is it I will distance for data of course you can call this what everyone could have called this Charlie or Paul whatever you want but it's customary to add D for data representative data which means gonna be the data that we added here okay in the I because we know that everything that is added as data type is gonna be some sort of an object in our Ray format which means now we have the index so if I go here and I want to make sure that every time the attribute X is computed we're gonna return this value here what value do you want to return let's just go ahead and return let's say 90 see what's going to happen save and all of a sudden you saw it moved 90 units to the right that means now I can go ahead and for instance say I want to return d x for instance let's say 20 if you save you notice it went back to the left right because d x 20 what is d at this point well let's go ahead and say log to cancel that out Sadie like that save and we can open of course our inspector here and inspect and go to console it says for that means it went ahead and got number four which is the first element inside of our array ah so now we are dynamically getting data and do something to it in this case here we are returning D which is four times 20 so each time we're going to pass in a V here right because four times 20 is 80 which means gonna be for our X that's reason why it moved to the right or left depending on the unit that we pass here right we can do the same here I can say attribute again for the X actually Y coordinator should say and I'm gonna pass in a function so anytime I'm gonna pass D and I we haven't used a yet that's fine and I'm gonna say return I want to say return D times 12 forgot our comma there to separate the values okay if we save now look at that it moved it down again if I just say let me put this in the second line so it's more visible for all of us there we go and you come down here and say log and console like this and I say D again safe it's gonna show full force it goes ahead and gets the first element in there okay now what would I give us so let's put an eye here and save it's gonna give us 0 why is it 0 well because it's saying now D D is the data and the I is the index so the first element of course is gonna be on index is 0 that's reason why we're getting 0 when we console.log I hmm very nice so that means now we're starting to combine data with our attributes with our elements that we can put on the screen so you can start imagining now if we have a more complex data array here or even an object array we can do all sort of things so that now the data that's been added it's influencing the way things are being shown on the screen okay I hope you're starting to see the power of what we gonna be doing here so this is the beginning of a very crucial journey that will allow us sourcing things happening on the screen very good so we'll continue working on this so we can see the capabilities as we add data to our project all right so at this point you may be asking all right this is great but every time we run this we're actually attaching the first element of this array and we can never really get to the second and or third well the reason why is because we've only appended one rectangle this one rectangle element is attached to the first element of our data array how do we then dynamically allow to create for instance you want to create three rectangles right for instance if you want to go through all of these items and add them to different bars or different rectangles as you saw here okay let's start by using the hard-coded method so what I'm gonna do here remember the append it appends later once the HTML is run right because as you see the SVG here we don't have SVG inside our canvas it's empty so what I'm gonna do here just for to make things a little bit easier so you can see I'm gonna comment this out here real quick and what I'm gonna do in say and state I'm gonna say const SVG again so essentially the same once a canvas dot select okay what am i selecting I'm gonna go ahead and select in this case SVG very good so we haven't created a SVG yet I'm gonna come down here and say SVG there we go we have our SVG canvas there okay so we're selecting it notice we are just selecting what is already added once we have selected of course we're gonna have problems here because now everything is not working correctly so what I'm gonna do next is now we have our SVG even si fracked inside of our HTML inside of our SVG we're going to go ahead and add a rectangle like this rekt there we go so we have our SVG in our rectangle and the beauty here is that let me save this so the beauty here though you can see it's still working now it's showing because we added that rectangle inside which we've been doing by doing the append okay so we went ahead and got SVG and now we append and direct now this R act here that has been appended it's not necessarily the rectangle that we added here in fact if we go down here to our class canvas we're gonna see that we have SVG and these notice we have to correct so this is the one that we added you know HTML this one here and this is the one that we are pending at the bottom here so say SVG app and rect so what we want to do actually is different for now so I can show you what's going on I'm gonna comment this out as well if you save notice that it's gonna break nothing's gonna show that's totally fine so now we're gonna do I'm gonna say Const wracked I'm gonna say SVG dot select what am I gonna select wrecked save and it's look it goes back and adds it back now if we go down here in our div you notice we only should have one rekt there we go which is this one here to make this a little bit so you can see right 24 orange height XY very good so now instead of appending an extra we're just selecting what we already added here now the cool thing is I can also add more rectangle say rectangle along and selects the first that it's found in fact if we go down here and let's say I want to console.log lets console.log here at the bottom and I'm gonna say rekt save let's see what's going to happen let's go to console you notice we have this selection here this election is the object that contains our rectangle but you notice that we have this groups parents do not worry about that so we have a few objects here but the one we were very interested in is the actual first one so groups here notice that we have this rect which is first one correct right there's just one and we probe an inside and go down to find what the data property is or attribute takes a little bit and there we go there's this data property it says for what is this for where the four is indeed this first item in our data array so that's reason why we only seen one and that is selected if we go to our elements is VG we notice one is the one there's there's just only one selected now how do we select others as well well we just go ahead and here and say select all now if you save this you will see let's see what's happening here let's go ahead to canvas SVG aha notice what happens now it seems it went ahead and got all of them all of them now are selected and they were added all of the attributes with width and everything so all of these is now happening because we say select all from our HTML and we manually created this all of these records inside of SVG now you can say okay it seems like there's three there have been shown but I only see one here what's going on so if we go to console here now you can see say 0 1 2 these are the index why are they showing is because we said we want to show them in this lock here let's get rid of this for now and here I'm just going to go ahead and pass d Save all right you can see for 1534 we click on selection now you can see that our groups already has node list 3 which means it's now looking at all of the SVG's rectangles that we created there okay so that is what's happening and if we go in let's probe in so first group node list of three there's three rectangles here and you can see that all of them are showing now the problem that you can't see is because the x-values are really big in fact before X let's change instead of x ten let's just multiply say actually I times 10 save but look at that now you can see one two three still not let's perhaps say 20 and see what's gonna happen okay still nothing now let's be a little bit smart about this so we know that x value is what actually makes things move left or right right the x coordinate so what I'm gonna do here is for D in fact I'm gonna just get rid of the Y here get rid of the Y so everything is gonna be in the same axis and the y okay it looks like one giant block there that's totally fine let's be smart a little bit here so we know the X is gonna be width so we want to make sure we know that width is 24 for our rectangles right so we want to add another 24 times I what does that do is the following every time it hits X here it's going to go ahead and say okay I'm gonna return a value for x which means the horizontal displacement left or right okay for each item that I'm gonna be showing on the screen in this case for each part okay now at first time it's gonna be zero because I remember is the index and what we're doing here multiplying 24 that means the first time is gonna be 0 so the first item that's gonna show is gonna have X what 0 plus 24 times 0 is 0 which means the X is gonna be somewhere and is 0 x value the second time is gonna be 1 so that means 24 so it's gonna show the 24 with bar and add another probably 24 to the right before it puts another one okay so if you save this we're gonna see a little bit different there we go it changed a little bit but still no problem that means now we are really putting everything together because remember too width for each one is gonna be 24 that means after the 24 the width let's say this is gonna be 24 we're gonna start from 24 and add another one that's reason why you don't see the gap so to see the gap we're gonna multiply by maybe add two or so you're gonna see a little gap happening still nothing let's say 25 because our smaller number aha now you can see that gap right because we know st. each time it goes through and create one of these rectangles one of these bars we want to create the next one a little bit to the right depending on the index of the item you trying to add that's why we have this gap there meaning again for our gate will repeat this because this could be a little bit confusing 0 times 25 is gonna be 0 so let's assume this is being shown here so we put the whole rectangle at 0 here okay the next time is gonna be 1 that means we are going to this 15 here right the second one so it can be 1 what's gonna happen with 1 well with 1 what's gonna happen is we are going to multiply 1 times 25 so it's 25 so it's gonna start 25 pixels from 0 so we're gonna go this is 24 and it's gonna add a little one pixel over as you can see there and create the second one the second one is gonna be what 2 2 times 25 is 50 so starts from 0 here again goes 24 another 25 and gives a little bit more and goes so far now you can see we are seeing all of those three there very good now the cool thing is now that we understand this for the height we can do the same or maybe a little bit different let's put a function here back right and I'm gonna pass D and I okay by the way you don't have to pass I in this case I can get rid of I there and still works in this case here I'm just gonna say for height I want to return what is red I want to return well I want to return D so if you save this look at this now we have this very upside-down graphic that is showing there in fact if I want to give it a multiplier so it gets a little bit bigger I can say x 2 like that so this gets a little bit bigger that so we can see that when we start talking about scales and all this stuff see how to make all of this look much better as well as make it so that it's not inverted like this now the reason this is looking like this right be inverted is because as we said before everything in computer graphics everything that is put on our browser starts from the top zero zero left there right because the axis starts from here that's why it starts from there as well we will learn how to change this behavior so that it actually looks the way we want which is the opposite of this the inverse of this right so we turn it around so it starts from here an app like this now you may ask okay why is it that d3 doesn't give that capability to us right away well the reason being is because it wants to give us the developers the power to do so to change things around the axis and so forth it may be a pain if you look at it in those terms but in a way it's a blessing in disguise because then we have the power to do whatever we want there we go so we have created here three bars separated beauty here is all of these are with data array so now we are dynamically creating things creating elements you know SVG using data so what I want you to do is play a run with this console change some numbers here and see what happens and also remember that we had to add all of these manually so in the next video I'm gonna show you how to not rely on adding this manually because the idea here is following we could get a data array that is way bigger than this in fact we may not know how many items we have in our data array in our data source per se so we want to make sure that all of these happens dynamically instead of us having to select do rectangles which we have created here manually and so forth I'm gonna show you how to do all of that manually [Music] so to change the way this looks because we say that this is inverted so what I'm gonna do we're just gonna move this around so that we can actually see the way we usually see graphs right because this is kind of inverted upside-down there are better ways to do this but for now what we gonna do we can kind of brute force it a little bit so what I'm gonna do here because we want to make sure that the Y is inverted meaning that instead of the way computer graphics dictates how things should work with Y or how things should be positioned we're gonna a brute force it so that everything is the opposite meaning now we're gonna have something like this like a normal graph okay to do that let's look at the attribute Y so attribute y so what I'm gonna do here I'm gonna also create a function and then this function because we want to get by everything dynamic an i as such so we're gonna say a hundred let's say a hundred okay I'm gonna subtract that by the height of our rectangle so I'm going to say the same thing we had here the top T times two so this is why it's gonna be returned like that okay so save this and we should see now it looks much better so we have inverted or we've moved things around a little bit so that it looks like something we would look at as a graph all right so if I want to make this little bit bigger of course I always have to make sure that the the multiplier is the same for the height because that's what are we subtracting and getting rid of it as we shift things around so it looks good save now it's just gonna make it a little bit bigger there we go and remember again I am zoomed in so for you you should see something pretty much like this that's a hundred percent okay so I'm weighs emptying so that we can actually see what's going on very good so now things look pretty decent [Music] before we did all this you can see that we were appending our rectangles and we're even appending our SVG meaning we were not adding it as we did here manually or hard-coded in our dom HTML and we said all so at this point everything works fine because we added three rectangles but this is not the best way to do this because like we said also before this data array could be more than three items or hundreds of a million items that are inside of our data rate and data source in that case that would mean that every time we get our data array we would have to know exactly how many items are there and then we have to come here and add rectangle one two three and a million other rectangles this is not obviously the best way to do this because the idea is to make everything automatic and dynamically meaning that we would not need to know in advance the length of our data array or our data source in order for us to predict how many items we have to add or how many Rhett's elements we have to add inside of our SVG so how do we do all of that actually how do we make it all work well first of all let me go ahead and get rid of all those three here you should imagine already what's gonna happen then this has happens right so it goes ahead and shows just one bar here and you can see four is because it's going and getting the first data point for no array now if we open here we can see the selection we can say group node list if you open there you can say node list it only has one item that is been selected if we go back here we are selecting all but we go to index is there's just one item there okay so how do we enter or how do we add how do we append other racks or anything else we want in this case it's gonna be other racks inside of our dom without having to manually add that to do that we need to understand this concept called enter selection what is this thing well the enter selection is a very simple concept so if we look at the way things are right now we went to the Dom we a direct one rack to and then we are mapping in with that are a 5 in 13 so this 5 is gonna map with the first rectangle 13 with the second rectangle however if we have more items in our their array there's going to be a way in which we can actually access the Dom and say hey we must add another rectangles so that we can map to the data that we have here without having to go manually and add those so likely there is this enter selection element or object that is set for us to do that which means we'll have to actually invoke the enter method which will tell the browser to reserve in the Dom virtual elements so there will be other elements that are quote unquote hidden ready to be added as we need them for this to happen for this to be reserved we have to use the enter selection let's go ahead and see how we can do that well I'm gonna get rid of all other ones like we did before and just keep one there and when we go to our app here what we can do now is the moment we add our data I can go ahead and say dot enter right and I'm gonna go ahead and append something what is it I want append well I want to paint erect like that let's save this and see what's going to happen if you save let's go ahead and open and see so nothing is happening there because let's move this attribute outside so that we can add that afterwards right because we pass in data first and then we enter and then we start putting together all of the attributes I think this will be better there we go now we see only two okay let's go to our elements and see what's going to happen because we say data we pass the data and then we enter meaning that we now trying to say okay we're going to enter that selection that exclusive club if you will that has all these virtual elements there waiting for us to use them and just in case they're needed and we could say okay once we enter then we are adding a rectangle a pending one and then we do all sort of things but in order to see there's only two that are showing here okay what's going on let's go to elements here SVG it looks like it creates two and there is one that is just empty what is that well that is because we have one that we created here which is empty so if we get rid of that and save and voila now you see all of them now let's look closely and see what's going on here let's open back here so we created our rect and we select all rectangles there but you might say well but there's none because we haven't done anything here yet that is sort of fine because d3 knows exactly what's happening in the back these will actually be reserved until we get to enter once we get interested all right so we need to add to make sure that we have those virtual elements that are waiting there to be added and we append the rect and then we're selecting all the rectangles and then we're adding all these attributes the hence you're able to see this working now okay now this may be a little bit weird at first because you say well selecting all before we even have created an e that's true because again we don't have freqs inside here but d3 knows exactly how to manipulate the dome so that it knows to reserve these select all after we have appended something inside of it because now check this out because I have this way I'm not tied down with HTML meaning I don't have to come here and add a rect anymore I could if I wanted to but I don't have to cuz now I can come here and add for instance 123 another item and save ah look at this that's the problem has to be common there let's save look at that he went ahead and got that other one okay and I can keep going let's see I want to add 23 there you go now you can see we have a problem here because these 34 and 23 they're kind of the same height well we can change that by coming down here let's see height and put it to again make sure to come and change here as well and wise it can have issues and save you can see now it's way better okay the reason why we are heating the ceiling here is because it can't go any further than that right that's reason why we will see how to use scales and all sort of things at a later time so we can make sure that we have better ranges so we can see everything working look at this now I don't even have to know what easy that I'm receiving as a data right because I can keep adding here I can even put 0 put 0 what's gonna happen it's not going to show anything but it isn't is showing because 1 2 3 4 5 6 we should have 6 elements inside of our SVG look at that 1 2 3 4 5 6 if you hover over it tells you exactly what's going on it says 25 of width or 24 width and height is 0 because we add a 0 and all of this data remember is being actually dynamically added into height and to also X so forth very cool now have made sure that every time our data comes in we don't have to manually go and add directs ourselves because we're using the enter selection here this is very important concept ok just remember it's a virtual element store waiting for us to actually add something to it which will decouple us from having to come down here and add Rex ourselves so now this is more dynamic which is exactly what we want what I want you to do now is to add more data more numbers here as you want and see all of these working right they should all show there the other thing you can do is you can add different colors now this is gonna be a little challenge because any time we want to dynamically change data we pass in a function as such right for we pants ain't function D and then we'll multiply the data that we're getting from where our data array and multiply by two okay now how about if I wanted to make sure that for instance the widths are also random how would you do that well you put a function like this and you could pass into your eye whatever you want and it can multiply add a multiplier there and you can see different kind of shapes so play around with this concept because I want you to really understand what's going on here most importantly understand the enter selection which is very crucial for us to understand what's going on all right congratulations as he next now that we have our enter selection working and you notice now you're are appending everything really we can go back to what we had before so I can go ahead come up here and uncomment that and I'm gonna go ahead and comment this now if you say we should have a problem why is there a problem because now we were appending SVG but this SVG here is not the one that we are actually using let's look at our canvas here so you should see that we have this empty SVG which you can see it's showing there and we have the one that we just created a top and we append it dynamically inject it and you can see there if you open then you see all of the atoms that should be seen in our view here but however they're not showing even though when you go ahead and hover over you can see all of them actually affair why aren't they showing for obvious reasons we have this SVG so we have two of them that are doing two different things right so the thing we need to do here is just go come down here and get rid of this because now it's just gonna append one and there is only one that will go ahead and be connected and show everything that we can see right now so coming down here again you can see SVG 600 and if you open inside and we have all of these now all of these items here are all dynamic now folks they're all dynamic which is awesome alright so there we go we can clean up our code a little bit in fact we can just go get rid of all of this and voila now we have perfect code all right so you see here we have our data array this is wonderful it's fine and all but let's make these let's make our data array here to be actually little bit more meaningful meaning that we can actually pass objects right here that have more values more information for us to actually create our visualizations here what I mean by that is the following instead of having those numbers in fact let me go ahead and comment all of that out there I'm gonna say far again data array and I'm gonna just create an array which will have objects so to create an object of course we create curly braces like that and then we can put all the properties inside so the first property I'm gonna add for you so they can say with it's gonna have 25 like that say height is gonna be 4 and I can say feel as a property of this object let's say I want it to be pink like that and I'm gonna copy this a few times and paste that comma there like this and change a few values here so with I'm gonna keep with the same and Heights I'm gonna change this 14 sounds like this okay so very diverse and this is gonna be portable and let's keep this orange and this one here green and they're gonna say this is gray very good so now we have that that means we have an object we have an array that contains objects so in this case here because it's object we're gonna have an error because it's gonna say attribute is not a number because we've changed our data right because now we can't get extract those values that we have passing here so these data here D because it's not just an array it is an object that means I will have to do the following to get the height I have Sadie that height right because I'm accessing what is inside of our array so D that height is gonna get the height of our bar or graph so I'm gonna have to do the same let's see here where whatever we have a DMS a d dot height as well like that save voila beautiful so we did a few changes there and now have all these greatness now notice also because we are console logging D as the data it gives us the data right look at this that means we have one two three four five items inside of our data is a true one two three four five items inside of our data array which is an array because we have square brackets and inside we have object so this is object number one two three four five and it has all of them there so we can open inside you can see has feel pink height 4 with 25 now we still not getting the colors the pink property here is not being read what we need to do we just have to come here instead of hard-coding this look at this I can do the same say function like this I'm going to say return and what am i returning well let's pass T here no need to pass the I I didn't want I want to return d dot feel save look at this and just like that all of our bars our graph bars here are showing with different colors because each time we go around it goes and fetches the correct color so for the first object goes gets to width and height and the fill is pink is that true there we go it's pink and the second is purple which I have a purple there let's probably put this there third one orange green and gray so if I come down here and copy this and create other another object here and I'm gonna say height is 32 okay and red look at this save and voila just like that very good so we didn't have to do a lot of work you just had to change a few things but now we have the capability of accessing our data array and inside get all the properties of our each object and plot everything on the screen as you can see here very good so what other properties can you add for each object here think of them and then try to add those properties dynamically inside of our rect like we did here now you have a lot of knowledge to be very dangerous go ahead and figure out ways in which we can better our code here or add other properties and make it really really nice remember because this is a rectangle you can actually go and add a radius around the corners ah things you can do because these are just rectangles right we can go ahead here and say dot add another attribute and keep going all right go ahead and figure that out and play around this concept and I will see you in the next video [Music] so we've learned how to put things into perspective here but getting data and automatically all dynamically creating shapes according to our data that we passing so this is great however it's not every day that we actually have to type all these state ourselves and then create all these bars or any other form of SVG elements on the screen right because idea is to be able to get data from somewhere and perhaps parse it through so we can then create our graphs and so forth so the first concept that we need to talk about here real quick is the concept of JSON JSON is another format of data that is wildly available everywhere that makes all of the data look like this so this would be a JSON in fact JSON let me write it here Jason stands for JavaScript object notation ah interesting javascript put a T there object notation what that means is that this way of putting together pieces of data is actually inspired by JavaScript why is that well that means now the way we created this data all right here this would be considered also a JSON per se right because of a JavaScript object notation so this would be an object in JavaScript we have here with height and fill which are any properties or attributes of our JSON JSON is the most preferred in most used way of transmitting and receiving data online in fact here is an example of a JSON if you go to JSON placeholder type code com you will see here you can find an API I think of an API as just an external way in which we can actually tap in some URL and get information or data so you can see this would be an API this would be a JSON API as you can see because it gives us this notation remember which is exactly few changes there the same you can see here although the indentation and the way things are broken down here may look different right but it is the same if I come down here and do like this put everything in a different line and voila you notice that we have indeed a json notation just like this here right because we have this braces which means this is indeed one object which is inside of an array very great so this here is what a json is now like I said an API allows us developers to be able to go and fetch data on a remote server that has all the things that we don't even have to know that allows us to tap into their databases and everything that they have going on there for example here what's happening we are tapping into this URL which will then return something that we see here which is a JSON now we using here a very important topic in JavaScript which is the promise now the idea here is whenever we are tapping into something unknown in this case the world of internet will be unknown to us so if you were creating our application here and we want to get to this URL so that we can receive in return a JSON that would be what we call unknown territory meaning we don't know what's gonna happen because we are asking for something remotely something that we don't know if it's gonna work out or not that's when we use the promises it can be a little bit complicated topic in the beginning but it's not just think of a promise this van here as a way of us saying okay go ahead and knock at this door here this URL and wait to get a response from this server to make sure that we are ready then to get that information in the form of response and then we can then go probing and get information the actual JSON piece of data that's why we get this okay now you also notice there's this may be a little bit complicated first this is what we call arrow function this could be written as follow this here this piece of code we have an error function is the same as what we did here in fact what I can do here I can just get rid of this function like that have a D because I'm returning something I'm gonna put arrow function like this and I don't need to put the return which means I no need to add that as well in there we go so what is this if you have over it tells you that is our parameter that means now this is an error function if you hover over even he tells you exactly what it is right so the error function so it's a function which has D as the parameter and returns it so this is the same thing as we have down here you notice now this is a better way of doing this because it is clean and it doesn't require a lot of works not you can use this right here as we've been using in fact you should use this way whenever you have more than one line of code inside so if I want to say far a is equal to 10 or some sort this way wouldn't work right because we have more than one line inside of our function so you would then need to use this way the other thing too about error function is that this of course the D is a parameter as you hover over concedes as a parameter of type T of type any I should say meaning could be any object now if you want to add more parameters for instance I then this is what you would do you put parentheses and put D comma I just like what we do here but now we don't have the function okay so you can see this is really nice and clean these are called error functions in fact if you save this thing still works just fine I'll leave it this way so that you have that example as well but of course like I said you will find me probably using this more often than I use this notation here but either way it works okay I may do this interchangeably sometimes I may use this way other times just go with error functions very good now going back to what we're saying here so we have our JSON we talked to me a little bit about promises and everything let's figure out how to do this now this URL can be used right away for us to test things out I'm going to take this URL here because it says here that if we tap into the URL we should get this JSON payload here like that right so let's copy this and see how can we then get this JSON data parse it and do all the work and the beauty here is that with d3 we don't have to do a lot of work to be able to parse through and get these actual data why because d3 has this method called JSON that we can use so what I'm gonna do here I'm gonna go say d3 dot JSON and hit enter the moment I hit enter because I we have that plugin or extension that allows completion in fact to add it to d3 is there let's get rid of that and gives us this that JSON and we have to pass the actual URL where we want to get JSON I'm gonna say pass it all in like that that's totally fine and then we have this function here now here I could go ahead and of course add to the code and everything will look great but what I'm gonna do I'm gonna change these actually so let's get rid of all of this instead I'm gonna use the van that you saw the promise so I'm gonna say dot then and inside here I'm gonna use arrow function I'm gonna say data arrow function like that and then I'm gonna give it a body like this all right because there's more things I would want to enter or add there it's like we can put this at the bottom so we have more space we can see everything okay so we have again remember this is arrow functions we have data this is the payload that we're gonna be getting in this case we'll have this information here JSON format let's see if that's true I'm gonna just say log and say data like that see what are we gonna get save everything is running and there we go user ID 1 title the electors autumn completed false and that's exactly what we have here very good look how simple that is now that means if I want just like an object with remember this is called JSON for a reason because it's JavaScript object notation to facilitate our lives this should tell us a lot about JavaScript right because if there is indeed a way of sending and receiving data that is named after JavaScript you can tell how popular JavaScript really is okay so in this case here if we want to go to user ID or get the item of these field user ID we can do the same right we can go ahead here say data that user ID of course it has to be the name exact name of our property there if you save we should be able to see one why because our user IDs one let's get title I'm gonna copy that viii there get that element filled we should see the electors out r10 okay very good so there we go we were able to write like that get a JSON and everything now again the reason we're using this promise then here it's because this will make sure to wait until we actually get the data before we do code here to actually draw elements on the screen okay that's why everything we are going to be doing once we get the data it's gonna be below here inside of our then promise they're also JSON is not the only data format that is allowed 53 d3 allows CSV which stands for comma separated values and many many other types of data but usually JSON is the most popular one and easy to work with now in this case here we were getting this information from this URL from this API we could also have gotten this information from a file inside here in fact I can go ahead and create a new file here let's call this test dot JSON notice now we have to say dot JSON to say this file here is going to contain JSON objects right just like we have index s HTML J s and so forth and I can come down here in fact come down here and copy this and put right there look at that now it is indeed a JSON as well if I save that and I come down here and change this instead of wanted to go to this URL I can pass what text JSON also notice that text JSON has to be exactly the same name and also in the same directory that's why we can just go straight and say text a JSON like that let's save this you notice we get the same information in fact I can just go ahead and retrieve the whole data and there we go user completed ID and all of those properties there the only difference now is that we were getting it from our project text that JSON that means that we can actually take this data here I'm gonna copy all of this just to give you a little and get rid of all of this say V now because it's JSON here we need to put that inside of brackets like that double quotes take your seconds here I will do this real quick there we go so I've made a few changes here added all of the double quotes there so that we know these are fields so remember this is JSON is not a J's file okay don't worry about this formatting here because it's pretty much the same as everything else is just that this is all in online this is in different lines okay I just wanted to make a point earlier so now what we can do if we go back down here and comment this out here okay it can show you real quick inside of our d3 JSON here like I said before everything that pertains to showing our user interface here we must put inside of here so I mean close down this so this means now we can take all of this we have outside here got it all I'm going to put inside here very good we lost some indentations here I'm gonna just do this and do a tab there we go that looks much better and this as well that way you know that this pertains to our erect all right there we go we don't need this anymore that was just for us to see things all right if you say you're gonna have an error here because there are things we need to do notice that our console that data is still working because if you open here it's giving us our JSON look at this fill height and width why because we are indeed calling our text JSON okay even though we commented out our data array now bodies needs to be done here so our data array here we just change it to data like that right because this is the data that we'll have what all of these items all of these objects there look if I save this let me put this back so you hopefully can see what's going on let's go ahead and save this see what's happening and voila we're back in business as if nothing happened really in terms of the visuals but we know that now we are gaining this JSON here from where from our texts at Khe Sahn right that means if indeed if we had this text JSON somewhere else just like I showed you earlier write in a URL or in an API somewhere like we did here right that would still work all we would have to do is just pass the URL where we have our data as long as our datasource is going to confirm with this it's gonna have this kind of JSON right because it's important because we need the width we need a fill height we need height in all those things to get for instance D that height to get the property's height and so forth and just like that we were able to abstract out everything now we don't have to use this we could if you want we don't have to use it because now we have that in a text file and we can come here and add a few more look at this I can come here copy this one 25 still how about 100 and I want this to be yellow couple more how about 98 magenta if that's gonna work save look at that it's working this has the same let's say 90 90 about that there we go it's totally working now the reason why these are still the same is the same reason we talked earlier it's because our viewport where we actually can see things right we'll have the scale set up properly so that means if we come back here so if we come down here I want to put 200 so we have a better range save that now you can see difference I'm gonna make this perhaps at the bottom look at that you can see now the full range very good and all of that was done more dynamically meaning that we've compartment eyes our code so that we have all JSON in a different file and we're calling it using the d3 that JSON which takes our JSON and parses it through and gives us this data object okay which has as you can see of course all of our objects all of these voila alright so what I want you to do is to go online and find JSON APs just type JSON free api's and find as many as you want that will have data that you can play with because now you have all the information all the tools all technology you need to actually create these bar charts like we did here with real data okay go ahead and do JSON free API and find those API JSON API is that he can use to create awesome bar charts like this alright I'll see you next [Music]

Channel: Build Apps With Paulo

Views: 52,710

Rating: 4.8944283 out of 5

Keywords: data visualization javascript, data visualization tools, javascript, d3js v5 tutorial, d3js, data science, programming tutorial, data visualisation, data driven design, data driven documents d3, data driven documents tutorial, plotly, data visualization, d3.js, data visualization course, d3.js tutorial, how to use d3.js, data visualization tutorial, d3.js for beginners, d3 setup, d3.js course, learn data visualization, d3 udemy, svg, svg animation, plotly dash

Id: nzshmMlOuwI

Length: 110min 53sec (6653 seconds)

Published: Sun Feb 17 2019