D3 Tutorial (udemy preview) #1 - SVG & D3 Basics

Key Takeaways

all right they're ninjas so this course is a preview of my d3 and fire-based course I've just released on udemy and I've been splitting this course over two videos each one about 35 minutes of content each so there is a lot of free content here and both of these videos together should teach you a lot about the basics of d3 now if you do enjoy these tutorials and you want to learn more advanced d3 features and visualizations and how you can also use it with firebase to create some cool projects you can sign up to the full course by clicking the link below and that link has a discount or two applied to it so you'll get it for a reduced price too anyway on with the course I really hope you enjoy it all right so this course is all about d3 and firebase right but d3 job is to create SVG's which we can then render to the browser so it makes sense that we understand a little bit about SVG's before we dive into d3 so SVG just stands for scalable vector graphics and by scalable I mean we can make them bigger or smaller without losing image quality therefore they look crisp in any resolution or screen size unlike typical images such as PNG or JPEG so that is a really cool feature of SVG's we can make them bigger or smaller and they maintain the same crispness okay now they're also very small in file size again different from PNG Zoar JPEGs which grow very large depending on the image size so for these reasons SVG's are a good option to create diagrams or things like logos in webpages now there's several ways to create an SVG so let's just talk about some of them now before I show you how to actually create an SVG first of all I want to demo the difference between a PNG and an SVG in the browser so you can see right here I've got the Google Chrome logo I've also got it in SVG format over here this one is PNG now it looks okay there but if I start to zoom in we can see that as I make the image bigger or rather as i zoom in we lose clarity and quality of the image we can see it starts to go jagged around the edge especially now if we look at the SVG over here that's crisper a small size but if i zoom in this is still remaining very very crisp as it gets larger so this is one of the huge benefits of SVG's they're super scalable and they do not lose quality so there's a few different ways that we can actually create an SVG and then view it in a browser the first way is to use a program like Photoshop or Adobe XD and then create an SVG file in one of those then we can reference that much like we would a PNG or a JPEG inside the source of an image tag then we can view that in a browser that's absolutely fine another way is to create SVG's directly in the HTML code using these SVG tax and the way this works is by first of all creating an SVG container like this with a width and a height and then any kind of shapes or diagrams we want to draw inside that we nest inside those tags so this for example is going to draw a circle with a fill color of gray and these different properties which we will talk about later on but we can also create rectangles lines paths etc so that's the second way by directly creating these different tags inside the HTML code the third way and the way that we're going to be using throughout this course is by using something like d3 in JavaScript to create these SVG s and then render them to the Dom as tags like this so it's going to output the same kind of code as this but it's just that we're now going to be creating it using javascript and d3 and this is a really good way of working with SVG's for many reasons first of all d3 makes it much easier to create complex different diagrams so that's one benefit the next benefit is that these SVG's can then harness the power of javascript to become dynamic and interactive so if we want to click on a button inside a diagram we can do and we can change the diagram depending on that click OK so there are the three different ways that we can create SVG's like I said we're going to focus on JavaScript in d3 to create them but first of all I'd just like to show you a little bit more of these syntax to create these SVG's things like circles tangles that kind of thing so we'll take a little look at that first in the next video all right then gang so let's have a look at some of the different simple shapes that we can create directly inside the HTML code using these SVG tags so the first thing we need to do when we're creating SVG shapes this way is to create an SVG tag like so and this is like a container for all of the different shapes that we want to create and all of those shapes will be nested inside this SVG container so that's the first step now we also have to supply a width and height to this SVG container and that doesn't mean that everything inside the container is going to be of this width and height it just means the SVG container itself or the SVG canvas is this width and height it's a drawing board if you like so let's say the width is equal to 600 and that means 600 pixels and the height is also equal to 600 okay so now if we wanted to draw some shapes we'd create those shapes inside this SVG tag so say for example I want to create a rectangle we'd use a tag called rect now right now if we were to save this and view it in a browser we're not going to see anything because we've not specified any properties of this rectangle we've not said where to position it the width of it the height of it or the fill color so it's going to look like nothing at the minute in a browser so let's add some of these different properties first of all I'll add an X property and this means where we want to position it in the x-direction and that means from left to right along the x axis okay now if we were to say here zero then that means position this at the very left zero pixels from the left if we were to say 400 then it means position it 400 pixels from the left okay so I'm going to say 300 for the x coordinate now the y coordinate is the Y direction and it starts at the top and goes to the bottom so if I was to say 100 it means okay position the top of the rectangle 100 pixels from the top of the canvas all right now I want to do a fill color as well so I'll set that equal to blue so we can actually see it and then also we need to define a width of the rectangle which I'll say to be 100 pixels and then also the height which will be 200 now if I was to right-click and go to open with live server and I can do that remember because I have the live server package installed in vs code then it's going to open this in a browser for me and I can see that rectangle right there so you can see it's positioned about 100 pixels from the top and 300 pixels from the left because we said X 300 Y 100 so there we go that's our first SVG shape done a rectangle okay so let's try something else let's do a circle so again we need a tag and this time it's called circle and this time it has different properties we don't say x and y we say instead CX and CY and that stands for Center X and Center Y meaning the center of the circle right so if we were to say CY or rather CX is equal to I don't know 300 then it means position the center of the circle along the x axis along the X Direction 300 pixels from the left I think that's a bit too far so I'm going to do 200 okay let's do the same for CY which means the center of the circle along the y direction from the top and we'll say 200 as well all right we also need a property called R which stands for radius and that defines the radius of the circle so we'll say this is 50 pixels obviously the larger the radius the larger the circle and then final it will say the film is going to be equal to pink so let's save that and view now and we can see this circle right here so the center of the circle which is in the middle of it is going to be what did I say see 100 pixels from the top so there to there is 200 and also 200 pixels from the left okay whereas with the rectangle it was 100 pixels from the top of the rectangle not from the center and 300 pixels from the left of the rectangle so this works from the center this works from the left and the the top left if you like okay all right then I want to show you a couple of different properties we can add on these SVG elements first of all I'm going to say a stroke and that is going to be equal to ret so if I save this now and view it will notice a little red line around the circle let me just zoom in so we can see that a bit better that red line that is a stroke okay now we can set the width of that stroke as well by saying stroke - width and setting it equal to something so I'll just say - to make it twice as big because by default it's 1 and then we'll save that and view it and now we can see it's a bit thicker all right okay so let's create one more shape now we'll go to the end of the circle and come to a new line and we want to create now a line element so again we need a tag first of all this one's called line and what this does is run from one point on the canvas or the SVG container to another point so we need to define a starting position and an ending position now the starting position is made up of two coordinates an x-coordinate and a y-coordinate that's x1 and y1 and the end position is made up of two coordinates and x-coordinate and a y-coordinate so x2 and y2 so these are the things we define inside this line so let's say x1 is equal to 100 and y1 is equal to 100 as well so that's the starting position then x2 is going to be equal to 120 so it moves along to the right a little bit by 20 pixels and also y2 is going to be equal to 300 so it moves down by 200 pixels as well from 100 to 300 all right so at the minute we're not going to see anything on the page because we've not given this any kind of color now we don't give lines a fill color instead to see them we give them a stroke color so much like we said stroke red over here let's say stroke this time is going to be great so that's the color of the line and then again the stroke width will give a value of 3 so let's save that view that in the browser and this time we can see this line over here as well okay now it doesn't look in the correct position so let's just take a look at the code and yep I've said why is that instead of y2 so let's change that and now we see it right there okay so there we've got my friends there's some simple different shapes that we can create directly inside the HTML code using these SVG tags now the whole idea of d3 is that we don't have to manually create all this because as you can imagine if we start to create things like graphs or different diagrams then this is going to become very tiresome to do so the job of d3 is to create these elements for us it's still going to output the same code to the browser to create these shapes but we'll be using javascript and d3 to generate them alright then so so far we've seen how to create some simple shapes circles rectangles and lines in SVG former now what if we wanted to create a shape that was a bit more complex for example a star or something even more complex then what we could do is we could use a path to do that now we're going to be using d3 to generate paths later on but I thought I'd introduce you to them now so it's not like a foreign language later on when I suddenly dump them on you so this is what a path looks like it's called path and it has an attribute called D and that D attribute is a string of seemingly random letters and numbers and these letters and numbers right here these are what makes up the path it tells the SVG how to draw the path if you like so if you notice it starts off with a letter then some numbers then another letter then some numbers then a letter then the mers then a letter so what do these different things mean well first of all M which we start with means move to and that's typically what we start the path to and that means move the pen if you like move the drawing implement to this position and you can think of this as you moving your hand over a piece of paper to find a starting position when you're about to draw something you're not drawing on the paper you're just moving to a specific start point before you start drawing okay so that's what this to us so we're saying move to and then we have two coordinates the x coordinate and the y coordinate so 150 is the x coordinate then a space then zero is the y coordinate so we've moved to that starting point first of all right then we have a space then this other letter L and this means line two so this means actually draw a line to a certain point so we're currently at this starting position put your pen down and draw a line to another point so we're going to this point right here 75 on the x coordinate 200 on the y coordinate so essentially we're drawing a line from the start position over here to this position right here alright so that's the second step then we're creating another line so we're going from the position we're currently in to this new position 2 to 5 and 200 ok so we've created two lines and then finally what we're doing is saying Z and Z means close the path so go from our current position and close the path go back to the start position and it's going to draw a line there from this position that we're currently in to the start position it closes the path up alright so that's a basic little path and there are more letters that we can use as well we're not going to be using all of them but we are going to be using d3 generators to create paths with these letters in it so I thought and let you know what these things mean now so we've already seen the first three move to line 2 and closed path then we have H for draw a horizontal line so that's from one x coordinate to another then we have V for vertical line 2 so up and down then we have C for curve 2 and that will draw a curved line and then s for smooth curve to a smooth curved line and there's much more as well and we'll see different things as we go through this course which represent different things in the path but this is just a preview of what these things are so for now let's create a simple path ourselves directly in the HTML code all right then so let's create our own simple path ourselves let's create a triangle using the path now first of all you can see I've already commented out these things so they don't show on the browser over there but now let's create a path element I remember we need to specify a D attribute and this defines the actual path what we draw if you like so remember the first thing is to define a starting point and we need to say where to move to on the canvas so we'll say M and then the starting point is going to be 150 on the x-axis so 150 from the left and then 50 from the top ok so the next thing we need to do is draw some lines so we'll say we'll do a line 275 and then 200 so we're going from the starting point putting our pen down and drawing a line from here to here which is 75 on the x-axis and 200 from the top alright so let's do another line now let's do a line from our current position then 2 2 to 5 on the x direction and 200 from the top ok and the final it we need to close that path off to go back to the beginning and to do that we say Zed all right so before we preview this let me just give this a fill color so I'll set that equal to orange just so we can see on the page save that view it in a browser and we can see this thing right here so that's pretty cool we're creating now a triangle using a path element so remember we start here which is at the top and then we go to this position by drawing a line then this position by drawing a line and then finally close the path using Z which goes back to the start position then we fill it in orange alright now what if we wanted one of these lines to be curved for example from here to here then we can use C instead of Z we could use C now this becomes a little more complex when we're using curves it takes a series of six numbers after the C and they come in sets of two three sets of two now before we talk about what those sets of to represent I just want to draw your attention to this cubic Bezier generated so you might have seen things like this in the past when we're creating curves okay so this control stick right here has a start point and an end point and this end point is the thing we move around and to control the curvature of that line you can see it's kind of dragging the line around so when we define a curve inside this thing right here what we're specifying is three sets of coordinates 3 sets of X&Y the first set of coordinates represents this thing right here the starting position of our control point and that is going to be right here the starting position of our curve now the second set of coordinates represents the end point of our control stick and then the final set of coordinates represents the end point of the curve itself ok so the first set of coordinates second set and the third so we know the first and the last set of coordinates already it's going to be this thing right here and this thing right here but we just need to define the middle set of coordinates which represents where our control stick will end so let's do that let's say for the starting position of the coordinate it's going to be in our current position which is right here so let's copy those and paste those in that's the start of the control stick then we want the end of the control stick now I'm going to say this is gonna be about 150 and 150 and then finally we're gonna do the end point which is going to be the start because we're going back up to the top of the triangle so we'll grab those and paste those it now if we save these we can see now we get a curve from this point to this point right cool so just so you can visualize this better what I'd like to do now is also draw on the SVG elements to show that control and where it will be so it looks a bit more like this thing here so let's do that let's first of all do the circle which represents this thing right here at the end of the control point so underneath here let's do a circle tag and inside this circle we need to specify a CX position the center x coordinate and also AC y coordinate so the center X is gonna be this thing right here 150 because that's where our end control point is and also that is going to be the CY because we said 150 for the y coordinate as well okay so now let's give this a radius equal to 5 so just a small circle and also let's give this a fill color on Rea like so save that and view this in a browser and now we can see this is our end control point right now what I'll do is draw a line from here to here so we can kind of see that control line so underneath the circle let's also do a line elements and remember a line takes some starting coordinates x-one and y-one and some ending coordinates x-two and y-two so let's define those x1 is going to be equal to this point right here yeah so let's grab that it's 2 2 5 and then it also takes a y1 which is going to be 200 so the x2 is going to be the starting position which is 150 so type that in there and the y2 is going to be the starting position as well which is going to be 50 so just put that in there okay so that's our line now let's also do a stroke and set that equal to gray and save that view it in a browser and we can see now it goes from here to here obviously I've done the endpoint wrong we want the endpoint to actually be here to show that control so let's do x2 and y2 to actually be equal to 150 and 150 where the control point is so 150 and 150 so save that view in a browser and now we can see that control so you can imagine us moving this thing around to generate this curve all right so we've entered into the curve these coordinates then these coordinates then these coordinates much like we have in a cubic Bezier graph alright so that is paths for you and curves now I don't want you to worry too much about how we're generating these strings of letters and numbers because 99% of the time we're not going to be doing that ourselves we're going to be using d3 to generate these strings for us but the takeaway points here that if we want to create more complex shapes we use a path to do that and the thing that controls the path is this D attribute right here and we'll be generating this D Tribute through d3 later on in the course so we've seen how we can directly create these different SVG's in the HTML file and we've seen rectangles circles lines and paths but to create more complex visualizations this way would be very hard to do imagine creating a really long string for one of these paths so instead of doing this we'll be using the d3 library to create our SVG s for us so d3 will allow us to easily create rectangles lines circles paths and much more complicated combinations of these things to produce really nice-looking data visualizations so let's get started by setting up this file to work with d3 now I'm going to head over to the d3 repository over here and scroll down so you get a link to the d3 library which is version 5 at the time of recorded so I'm going to copy this thing and I'm gonna come to the bottom on my body tag over here and I'm gonna paste that in now I also want to do all of our JavaScript inside an external file not just at the bottom of this file so I'm also going to create a new file over here and I'll call this index Jas ok so now what we'll do is create all of our d3 code in here to generate these different SVG elements but first of all we need to link up to this file from the index so let us do that now underneath the d3 file right here it has to be underneath because we're dependent on this library will do another script tag and the source is going to be equal to index is ok so now what we can do is delete this stuff inside here and save that so now we're set up so that in the next lesson what we can do is go ahead and start using the d3 library okay then so ultimately d3 is going to be communicating with our HTML page and it's going to be doing that to add SVG elements into the Dom the document object model or to remove SVG's from the Dom or to change SVG elements in the Dom so it needs a way to reach into the Dom and select certain elements now before we do that notice I've created two divs right here this is what we'll be selecting to test this out now in regular JavaScript if we wanted to reach into the DOM and grab an element we could do so using a method called query selector or query select all on the document object so for example I could say Const a is equal to documents dots query selector and then passing what I want to select from the page so it div and that would go out and select the first div it came to in the Dom which would be this top one right so I could do something similar in d3 by saying Const B is equal to b3 and we have access now to the d3 library because we've loaded this in above I could say d3 and then use a method called select and that is going to go out and do the same thing if we pass in the selector right there so I'm saying to select this element so again that's doing the same thing as this it will go out and select the first div it comes across which is this thing so the difference is that this select down here wraps the d of the returned object to us which is going to be stored in this constants in a d3 wrapper and gives us access to different methods and properties which we will ultimately use whereas this one doesn't okay so let me log these to the console and show you both of those console dot log and then in brackets a and B save that and let's just preview this in a browser so I'm going to inspect and then go to console and we can see right here the first one is log to the console that is the a which is this thing right here and then the second one which is B is this selection so it's wrapped our div in a selection object and we can see right here we have that div right so we'll talk about the different methods and properties we can use on this selection later on but I just wanted to show you how we can select an item from the Dom now if we wanted to select more than one item in regular JavaScript we'd say query selector all and then that would go out and grab all of the divs on the page so both of these and if we want to do the same thing in three we say select all so if I save this now and preview the difference is we can see that now this is a node list of two divs but this right here this is a selection of node lists so it's still wrapped inside that d3 wrapper so that we can do special things unique to d3 to these elements if we wanted to all right so then whenever we want to select something in d3 will either be using d3 select or d3 select all instead of this now then we want to place ultimately our SVG's on the page using d3 and we typically tell d3 where to place them in the page so we need a reference to place that so let's go over here we're going to delete the top div and instead give this a class of canvas and what we're going to do now is select this element in d3 because this in the future is where we're going to place or inject our SVG so let's go over here and we'll get rid of this stuff because we don't need that anymore and instead I'm going to create a Const called canvas and set that equal to D 3 dots select and then inside the selector is dot canvas much like we would select it in CSS we do the same kind of thing right here dot to say class then the class name so we have now a reference to this canvas element and in the next lesson we can append an SVG to this canvas alright then so we have our canvas selected right here using d3 select and what we'd like to do is append an SVG tag to it so the inside the canvas we have an SVG tag so to do that what we're going to do is take the canvas and we're going to use a method called append like so now remember when we select elements this way using d3 do select erupts those elements inside a d3 wrapper so we have access to these different methods on this element now and this is one of those methods and what it does is take this element and append another element to it now what we want to do is a and an SVG element to the canvas like so now what we can do is store the return value of this inside a constant as well so I could say const SVG is equal to canvas dot append SVG and what this does is return the actual SVG element to us the one we've just created so much like we have the canvas here we also now have the SVG stored in here so if I save this let's preview this in a browser obviously we don't see anything but if I go to elements then we can see the canvas and we can also see this SVG right here so we've appended now this SVG container and what I'd like to do is append different shapes to this SVG container so put different things inside it like a rectangle or a circle so let's go ahead and do that I'm gonna do a little comment first of all to say append shapes to SVG container and underneath I'll say SVG which is the returned element we got right here then we're going to append an element to that and that is going to be erect we're also going to do SVG dots append and we'll do a circle this time and then finally we'll do SVG dots append and then we'll do a line like so okay so let's save that now and view this in a browser and again we can't see anything but if we open up this div we can see the SVG and inside there now we have a rectangle circle and a line so that's good that's pretty simple to take this SVG container and these different shapes and append them to the Dom using this one method right here append and remember the append method returns the element we created so in this case it returns the SVG and we're storing that in a constant now we're not storing these in constants because we don't need to then append anything else to this right we don't need to say rect dot append something else so we don't really need to store those but if we were to store them this would store the rectangle which was just appended and by the way it's not just SVG elements and shapes that we can append to a page we can also append other - as well such as P tags or anchor tags but nearly all the time in this course we'll just be adding shapes so we have our shapes now appended to the SVG here but at the minute they don't have height a width a radius or fill color or anything like that and to add those in will be using method chaining and a method called etre or attribute if you like so we'll see that in the next video all right they're my friends so we have the canvas selected we've appended the SVG to the canvas and we've also appended these shapes to the SVG but at the minute these are not showing up on the page and that's because they have no attributes associated to them no coordinates no dimensions no fill color etc and we need to address this problem for example and this thing over here the SVG container that needs a wycked attribute and a height attribute to say how big this SVG container will be so then how do we add these different attributes to our elements well remember when we use this append method right here what we're doing is returning the element that we just created so then on this element we can use a different method called etre which stands for attribute and using that we can add an attribute to that element so we could say SVG then use the method called a trip and then this takes two arguments the first argument is the attribute that we want to apply to this element so we want to apply for example a height to this and the second argument is going to be the value that we want this to be so in this case it's going to be 600 pixels so now this is going to apply a height attribute of 600 to this SVG and if we save that and view it in a browser we can see that over here if we open up the canvas we can see the SVG now has a height of 600 pixels awesome so let's do the same thing for the height we can say SVG dots etre and then specify the width rather not the height we've already done the height and this will be 600 pixels as well so if we save that and view this in a browser then we can see now that this has a height and a width of 600 or 'some so we can do this over and over to add as many different attributes as we wanted to but if we wanted to do that for this thing as well then we'd have to say you know Const rect is equal to this and then we'd have to say like rec attr and then apply the different attributes over and over again now if we have seven or eight different attributes we want to apply to this rectangle then this is going to get quite tiresome and quite long now we don't have to do this we don't have to store it in a constant what we can do is just tack on the attribute method directly to these statements right here okay and this is called method chaining and we can do that because remember this thing returns the actual element that we append right this returns the rep this returns the circle so it's just the same as storing in a constant and then tacking on this method so what we could do instead is say dots attr after this thing right here and that does the same thing and we can do the same with the height we can tack it on right there and this is called method chaining because every time we use a method is returning the same value the return value here is the SVG we created so we're using the attribute method on that to apply an attribute the return value of this doesn't change it's still the SVG that we created so therefore we can tack on another otra mitad and so forth as many as we want now that's pretty cool but if we start attaching loads and loads of different etre methods then it's going to get very long so a better way to lay this out would be to get this on the next line like so and indent it so it's more readable and this is typically how we do it when we work with d3 to apply attributes so let's get rid of that and this my friends is going to do exactly the same thing so if we save this and view this in a browser we see that SVG with a height and width of 600 or 'some so then we can do the same things to these over here we can just apply the attribute method attr to apply different attributes to these shapes so first of all let's do the rectangle and let's do the width of this and we'll apply a width of 200 then we'll do a height so dot uh turret and then height and that will be 100 then we'll do a fill color so da otra fill and that is going to be blue and then we'll do finally an x and y coordinate so let's say dots attr and then the x coordinate is going to be 20 from the left and the y coordinate 20 it from the top alright so save that view this in a browser and we can see that rectangle right here and we can see those properties right here as well 200 100 blue 2020 or 'some so this is working and we can do the same thing for the circle so let's apply some different attributes to this the first one is going to be the radius and we'll give this a radius of 50 pixels then we'll do the CX and CY positions so atra and it's C X first of all and that is going to be 300 and then let's do C Y so dots etre and then cy and that will be about 70 from the top and then final it will do a fill color for this so dukh etre and then the fill color is going to be pink like so save hit preview and see this in the browser and we can see that circle now again we can see all those attributes apply to it and final it let's do the line so the first thing we need to do is an X 1 position so let's say attr and do X 1 and that is going to be 370 pixels from the left we also need an X 2 so let's say attr and do X 2 and that is going to be 400 pixels from the left then we need a Y 1 so Y 1 and that is going to be 20 pixels from the top then we need a why - so attr once more and Y 2 and that is going to be 120 pixels from the top and in fact finally we need to give this a stroke so atra and the stroke is going to be let's say red in color so there we go save it and preview this in a browser and we can see now we have this line over here as well so there we go my friends that is how we can chain on these different attribute methods to apply attributes to these elements and the trick here to understanding this is to realize what the return value is and the return value when we use this is the new element we just appended and it stays the same the return value every time we use an actual method like this and that is why we can chain them on to one another okay then so we've now seen how we can create rectangles circles and lines I'd like to now show you another type of element that we can add and that is text so we can create a text SVG using d3 so let's try appending a text element to the SVG much like we did with these different elements right here so underneath the line over here I'll say SVG then we'll use the append method again to append a new element and this is going to be a text element okay now much like the others up here we can add attribute methods to those so let's do that and the one I'd like to pass in first is the x-coordinate and this is saying well on the screen we want this text to appear along the x-direction so we're going to set 20 for that and then the next attribute attr is going to be the y-coordinate and that is going to be 200 so 200 pixels from the top and then also we'll apply a fill color which colors the text so let's say attr and then the fill attribute and we'll color this text great and then finally we want to say what text exactly we want to output because at the minute if we save this then although we're creating this text element and appending it to the Dom we don't see any text on the screen it's right here we can see this text element but there's no text inside it so to apply a particular string to this text we just say dot text and then in here type what we want to be output so I'll just say hello ninjas okay so if we save this now and view this in a browser we can see this text down here and this is an SVG it's a text element and we can see all of those different attributes have applied I also want to show you one more thing so another method we can use much like the attribute method and the text method down here another method is the style method and using the style method we can apply CSS styles so I could say something like style and then the property that we want to style cell fonts - family and then we'll say we want this to be Arial so this is going to apply in that CSS to this text element so if I save that now and view this we can see that it's now Arial okay so we can see that style over here on the left if we scoot this out we can see that style right there and we can also see it down here there it is the style the font family is Ariel so SVG text is useful when we want to do something that like add labels to a graph or to an axis and we'll be using them at certain stages in future lessons now there's one more type of element that I want to show you how to create in this chapter and that is a group now a group element isn't used to display a shape on the page like a rectangle or circle or a line or text word instead it just groups all the shapes or elements together now why would we do this well imagine we had some kind of chart like this and on that chart would have many different elements we'd have the bars the axes maybe some labels down here as well and legends now it makes sense to grip for example all the bars together in one group and then if we wanted to we could apply any kind of transformation to that group as a whole if we needed to for example if we needed to move all of the bars to the right or up or which have a direction we can move them together we just move that one group element instead of all of the individual bars so this could also be a group on the left the axis and that would be made up of this line all these lines and there may be some text as well next to the lines this could be a group like we discussed or the bars and then also this could be a group down here so we are going to be using groups quite a lot as we go forward just to group our different elements together but for what I'd like to do is just create one simple group and then group our shapes together in that group okay then so far we're appending all of our different shapes to the SVG directly now instead of that what I'd like to do is create a group and then place these three items inside that group so these sit in the group but the text doesn't okay so first of all let's create the group the way we do that is by first of all saying Const group we're storing this in a constant so we can reference it later and append other things to it and we're going to append this to the SVG so we'll say SVG dot append and the element is just G that stands for a group it's not group just G nice and sure okay then so we've created that now and then what we could do is instead of appending all of these shapes to the SVG append them to the group instead so let's try that I'm gonna select there I'll select there alt select there so I can delete them all at the same time and then say group instead and now we're appending each of these elements to the group and not directly to the SVG so if we check this out let's go inside the div then inside the SVG and now we can see this group element at the top and inside that group we have these three elements red circle and line put outside of the group still is the text directly in the SVG okay so like I said one of the benefits of using groups is so that we can maybe translate all of the items inside the group at once so what if we wanted to do that what if we wanted to perform some kind of transform to all of these items well we just perform the transform to the group itself so let's give this a whirl so under here what I'm gonna do is use the attribute method and the attribute I want to change or apply here is the transform attribute so much like in CSS we say translate and this is going to translate the whole group by so many pixels along the x-axis and so many pixels along the y-axis so how much do we want to translate this by well I'll say zero along the x-axis but 100 along the y-axis so translate this whole group down by 100 pixels so if we save that and view this in a browser now we can see that the whole group of shapes has been translated down by 100 pixels and if we wanted to move this to the right I could say 50 and then check this out again and now we can see it's been moved 50 pixels to the right as well so like I said this is really good if we're working with bar charts or axes if we want to move the whole group we can do using a group and transform like this