 Hey everybody, welcome back. In this lesson, we're going to be creating our first pie chart and this pie chart is going to have the shape of a peace sign. So let's get started. Let's first create a new list item here in index.hbs and call this peace-sign. Now let's go over to pages.js and create a new object and we're going to also call this peace-sign. Once you have that, go to your JavaScript and CSS folders and create a new file called peace-sign.js and peace-sign.css. Okay, so we can now close index.hbs and pages.js. Let's go into peace-sign.css and adjust some of the body. So we're going to remove the padding and the margin and give it a background color of 111141C. Okay, so we can actually close this because this is all we're going to do in here. So before we start writing our code, let's go to the browser and make sure your server is running. Go to localhost 3000 and let's open up the peace sign page. Okay, so now that we have that, let's go to our code editor and start writing some code. For this example, I've already figured out the data because it's a certain type of data that we need in order to create the shape of a peace sign. So just copy after me, we're going to set this to data and it's really just an array of four numbers, 35, 15, 15 and 35. Now that we have that, let's set our width and height. And then we're also going to have to set our radius as well. So let's first get access to the body. So div equals d3 dot select body. And now let's set our width and height, but we're only going to set it to window dot inner width and window dot inner height. Okay, so being that we're dealing with a pie chart, we need to know the radius. So how big do we want this circle essentially to be, let's find the smallest number out of the width and the height and then just divide that by two. So we're going to create our radius like this. We're going to set this to radius. And then we're going to use math dot min. And then we're going to find whether or not the width or the height is the smallest and then divide that number down. After we've done that, we're going to create a color scale. So in order to do this, we're actually going to use scale ordinal. And the reason is because we have four data points here. And we're going to create an ordinal scale with exactly four colors in it. So the first value here is going to map to the first color. The second value is going to map to the second color and so on. So let's assign this to a variable called color scale. And like I said, I'm using D threes scale ordinal and giving it an array of colors. So what should these colors be? Well, I already created the colors elsewhere. So I'm just going to copy them into this array and you can do the same. Now that we have that we're ready to create our SVG. So assign this to a variable called SVG. And then append an SVG to this div element or rather, it's really the body, but I just call it div. We're going to now set the width and the height. And then we're going to append a group element. After we've appended the group element, we're going to transform this. And what we've been doing in previous lessons is translating it by the margin left and then the margin bottom. What we're going to do here is actually translated by the width divided by two and the height divided by two. So with this, we can now be sure that our pie chart is going to be centered in our SVG. So now that we're at this point, what do we need? Well, we're going to use something that we're coming across for the first time in the course. And it's D threes pie layout. So the pie layout basically just creates the angle data from our data array here. So it does all of that for us. So let's give this a try. We're going to call this pie. And then we're going to use D three dot pie. Pretty simple, right? I love D threes very intuitive naming conventions for things. We're now going to set where we're getting our value from. So how should it know what to calculate these angles from? Well, we are getting access to our data. So why not just use the data values themselves. And then lastly, we're going to set this sort function to null, because by default D three automatically sorts the value for pie charts. So we're going to have to put it to null so that the data is not sorted. And we're going to get it exactly in this order that we specify 35 15 15 and 35. Otherwise, D three would end up sorting it to be 15 15 35 35. The next thing that we need when creating pie charts is actually something called an arc generator. And the arc generators are functions that produce path data from the angles and the radius values. So this is where we're going to set something like a start angle and an end angle or an inner radius and an outer radius. After we create this, we're going to play around with a couple of things just to show you what some of these methods actually do in order to change certain attributes about this pie chart. However, right now, let's just create a variable called arc and set this to D three dot arc. And what we're going to do first is set the outer radius. So let's set this to the radius that we had set above. And then the next thing is the inner radius. Let's just set this to zero. So the inner and outer radius, what's the main difference? So this outer radius is what you would expect to be the radius of the whole entire pie chart. However, the inner radius is what you would adjust if you're creating something like a donut chart. So if you want an open circle in the middle, then you would adjust this accordingly, the inner radius. If the inner radius is at zero, then it's going to be your average pie chart. It's just going to be a circle and there's not going to be what looks like a hollow center in the middle of it. Okay, so now that we have these two created, we can move on and start to actually create our paths. So let's create a variable called G. And let's select all arc from the SVG. So select all dot ARC. And let's set our data. So we're going to use our pie layout and give it our data. Next, we're going to enter and append a G element, because each one of these is going to be its own separate group element. And then finally, let's give it the class of ARC. The next thing that we need to do is actually append our path. And this is what's going to end up creating our arcs themselves. So G dot append path. Oops. And we're going to set our D attribute. So attribute D is going to be the arc generator. And at this point, we can give it a class of ARC. And then we're ready to set some styling. So how about we use our color scale to give it some color scale? Okay, so we have our color scale. We want to map each value in our data array to one of these colors in the ordinal scale. So if we want to match the first element to the first color and the second to the second color, what we're going to have to do is get access to the index itself. So the number is less important to us, which would actually be this D right here, which is actually the data in the data array. But we want the index because we want the zeroth index of data to match the zeroth index essentially of our color scale. So what we're going to do is use color scale and give it the index. The next thing that we're going to do is set a stroke style and stroke. And we're going to set this to a dark color. How about the same color that we had set our background? So let's go over to peace sign CSS and copy that. Okay, and now let's set a stroke width of four. Okay, so now that we have that, we're ready to go to our browser, refresh the page and see what's rendered. Wow. So as you can see, we have this huge peace sign in the center of our image. And also, it seems a little large, which means the radius, the outer radius is a little large. So how about we basically just multiply it by 0.75 and get like 75% of the radius that we had set. Let's see if that changes it. Okay, that's a lot better. Now that we have that, we've created our first pie chart. And it's as easy as using D three is pie layout generator and setting a couple of attributes inside of them. So at this point, let's play around. So the radius as I just did before, I multiplied it by 0.75 because it was a little large. If you can remember, it was kind of going out of our view. So I multiply it to be a little bit smaller so that it's only 75% of the width that I had originally set it. So the inner radius, what is this? Well, if you remember, I said that this is what makes your pie chart end up looking like a donut chart. So if you set it to something like the radius that I have here, multiplied by actually, this is divided by two for now. Refresh the page. And now we're going to see that there's this big black circle in the middle of it. Essentially, the inner radius is what's being expanded here. The outer radius being how far from the center to the outside, and then the inner radius how far from the center to here. What happens if we set them to be the same? Well, then we get nothing because that means the center of the pie chart to the outer radius is the same as the center of the pie chart to the inner radius. Therefore, we're not going to have any other things to see. So that's why it wouldn't be wise to actually set it to the same number. You're not going to see anything. But if you set it to other numbers, you're going to be able to adjust the shape and look of your pie chart. So let's put this back to zero, because it no longer looks like the peace sign. And let's start adding a couple of other things to play around with. So for the arc, what we can actually do is add a start and end angle. So let's try that. How about we set it to something like negative 0.5 multiplied by math.pi. And then the end angle to 0.5 multiplied by math.pi. Let's see what that does. So now we're getting half of a circle. So as you can see, I'm just playing around here. I didn't really have this planned out exactly. And the reason that I'm playing around with this is because this, I think, is one of the best ways to learn. You're basically just putting in random numbers inside of a couple of these methods that D3 has for different types of generators. Just play around with the data visualizations that you create while you're learning. Because when you do this, you're actually going to find out some really interesting things. Let's just set it to math.pi. Let's see if that changes anything. That's interesting. So we get half a circle, and then we get a much smaller part of the circle right over here. So as you can see, we've created our pie chart. And it really isn't even that much code to do so. Okay, so in the next lesson, what we're going to do is further expand going over pie charts, but we're now going to have some different data, and we're going to have labels so that we know what each arc is actually representing in relation to our data. So that's it for this lesson. I'll see you in the next lesson. Hey, everybody, welcome back. In this lesson, we're going to continue on with pie charts. But this time, we're going to use some real data. So I have data here in bills.csv, which you can get in the resources. So download this file and put that in your data folder. The first thing that we're going to do is create a new list item. And we're going to call this monthly bills. Next, go to pages.js, and create a new object and set these to monthly dash bills. Okay, and then after you're done with that, go to your CSS folder and your JavaScript folder and create new files called monthly dash bills dot j s and monthly dash bills dot CSS. Okay, so before we move on, let's set the body's padding and margin to zero and give it a background color. Let's set this to a very dark color almost black. So let's set this to zero E zero B 16. Okay, and we can actually close this file now. And we can also close pages dot j s and index dot HBS. So let's go to our browser, go to local host 3000, refresh the page and go to monthly bills. Alright, so we have our blank page here. Let's go back to our code editor and start writing some code. So we know that this is in a CSV file. So just as we've done in previous lessons, let's use D three dot CSV, and we're going to get this as data and bills dot CSV. And now we have access to our data like so. First things first, let's get access to our body. So we'll call this div. I've been calling this div the whole course so far, even though it's the body, but it's okay, we're just going to set this to a variable called div. And we're going to select the body. And then we're going to set width and height to window dot inner width and window dot inner height. The next thing that we're going to set is the radius. So just like in the previous lesson, the peace sign pie chart lesson, we're going to use math dot min and give it the width and the radius. And then divide that by two. Okay, and finally, let's create our color scale. We're going to use D three dot scale ordinal just as we did in the last lesson. And actually, let's just take those same colors. So we'll go to peace sign. And we'll all of those colors. And let's just check to make sure that we have the same amount of colors as we do values. So we have one, two, three, four, and five. This has four. So we're going to need to add another color in here. Let's just set that to one C nine F E nine. I think that'll do it. The next thing that we need to do is add our SVG. So we're going to append an SVG and set the width and the height. And then we're going to append a group element. And we're going to translate the positioning of this by the width divided by two, and then the height divided by two. So now that we have that, let's create our pie layout and our arc generator. Let's start with the pie layout. We're going to call this pie and use D three dot pie. So in this example, let's take a look at bills dot CSV. And being that all this sums to 100, each of these numbers is a percentage of 100, which means that this will be 14.5% of the pie chart. This will be 28% of the pie chart 17% of the pie chart and so on. So we actually want to get the cost percent to be where we have our data. So value is actually obtained from D dot cost percent. And just like in the last lesson, we are not going to sort this. So let's set sort to null. So moving on, the next one is our arc generator. And we're going to use D three dot arc. And then we're just going to set the inner and outer radius. So let's set the inner radius first to zero, because we do not want it to look like a donut. And the outer radius to our radius. And just as we did in the last example, let's just multiply this by 0.75. And we can always adjust it later if it turns out it's too small or too big. So with that, we're ready to append our paths. So let's create a variable called g. And we're going to type SVG dot select all dot arc, because we're going to give it a class name of arc, we're going to set our data and we're going to use our pie function here and give it our data. Next, we're going to enter and append a g element, and then give it a class of arc. The next thing that we're going to do is append a path to the g element, and then set the D attribute. And that is going to be our arc generator. We're also going to give this a class. We're going to set that to arc. And now we can adjust some styling. So this is where we're going to use our color scale. We're going to set the fill in our style. And we're going to get access to our index because just like in the peace sign example, we want to get these colors based on the index of this current datum inside of our data array. Okay, so color scale, and we're going to give it the index, the first element in this data array is going to get the color of this purple. The second is going to get this blue and so on. The next one that we're going to set is the fill opacity. And we can set this to something like 0.8 or whatever you like. The next one that we're going to set is the stroke. And we're just going to set this to the color that we have in our monthly bills.CSS file for the background color. Okay, and then we're going to set the stroke width to how about 10. Okay, so now that we have that, let's check our browser, refresh the page, and make sure everything is being rendered correctly. Okay, so now we have our pie chart. And granted, there are no labels on it, but we do have the pie chart. And it is representing our data correctly. So now let's add a couple of extra features. Let's add labels on these arcs. And then let's add mouse over and mouse out events, so that when we hover over each of these arcs, they grow a little bit in size. So let's go back to our editor. So what we're going to do now is append the labels for each of our arcs. And what we're going to do is really just append text. And what we're going to do is transform the positioning based on something called Centroid. So we're going to set the transform attribute. And we're going to translate it. So we have the data that we're going to get our Centroid from translate. And what we're going to do is get our arc generator and call a function called Centroid. And this gives us the center of that arc. Okay, so now that we have that, let's set the text itself. So I think this should be D dot data dot type, because we want to display the name or the type of the bill itself, such as auto or food. And then we're also going to use D dot data dot cost percent. And let's just give it a little percent sign. So let's next set some styling. So style, we'll set the font size. And how about we set this to 14 for now? We'll set the fill to white. And we'll give it a text anchor of the middle. Let's see what that looks like. See if it renders correctly. Okay, so there it is. So now you have labels on your arcs. And of course, we can adjust the positioning if we want to let's add a couple of extra styling things. How about we add a text shadow. And we'll set this to something like two pixels, two pixels, and then a color like zero E zero B one six. Okay, so let's see what that does. Okay, so you can see a little bit of a text shadow right here. And of course, like I said, you can make this higher or lower if you like, I'm going to just keep it there for now. However, I am going to adjust the size a little bit. And then I'm going to add a font weight to see if that makes it a little nice looking. So it's a 16 style and font weight, let's say 800. See what that looks like. Alright, that looks a little better. So with that, we're ready to go on to the event listeners, which is the mouse over and mouse out. So let's do that right now. What we're going to do is upon mouse over on the path, which is this one, we're going to set the arc to actually increase in size over a transition. We're also going to set the fill opacity to be one. And then on mouse out, we'll set it back to 0.8. So how do we do this? Well, we actually have to create another arc. So we have our regular arc right here. Well, we actually want to create a hover arc. So it's very easy to just create a separate arc that we then set the D attribute to upon mouse over. So this is how we do it. It's really the same thing as we have here. However, we're just going to adjust the radius instead of times 0.075. It is something like times 0.85 or something along those lines. So it just grows a little bit. Then we go to our path and use D3's on method. And we set it to mouse over. And of course get access to the this keyword. So D3.select this. And then let's first change the opacity. So fill opacity set that to one. And then let's set a transition. So transition duration set it to 500 milliseconds. And then we're going to be adjusting this right here. So the arc is not going to be the arc that we have originally set. It's going to be the hover arc. And then of course on the mouse out, what we're going to do is the opposite. So we're basically going to just copy this over. Put the fill opacity back to 0.8. And then instead of hover arc, we're going to set it back to the arc. So that's all we need for our mouse over and mouse out event listeners. Let's go to the browser, refresh the page and try it out. Cool. So there it is. So now it's way more interactive. Cool, right? We have created our second pie chart this time with event listeners, but also with labels on the arcs. As an assignment, I want you to add a chart title, and then also play around with the different types of arcs, such as the inner radius for the regular arc right up here. So adjust the inner radius, but also adjust the inner radius for the hover arc as well. Maybe upon hovering it becomes a little bit of a pie chart. See, it does adjust it down here a little bit. The point is to play around and just simply see what happens when you adjust something. So that's it for this lesson. Have fun playing around with it. I'll see you in the next lesson. Hey, everybody, welcome back. In this lesson, we're going to be creating something pretty interesting. This is going to be another pie chart. However, we're going to style it so that it actually looks kind of like a flower with flower petals. It's just going to be a really kind of strange, but I think cool looking pie chart. And it's really going to allow you to see the result of playing around with a couple of the methods that come with d3.arc. We're going to end up setting some very exaggerated radii for our arcs, which is going to give the arcs themselves a pedal like look as if they were flower petals. Let's first start by creating a new list item in index dot HBS. And how about we call this crazy pie chart. And we're going to do the same thing in pages dot JS. So go right over there and call this crazy pie chart. And then of course, let's create crazy pie chart dot CSS and crazy pie chart dot JS. Okay, so first things first, let's remove the padding and margin for the body and then also give it a dark background color. And that's all we're going to do in our CSS file. All right, so let's go to the browser make sure your server is running and go to local host 3000. And let's go to the crazy pie chart page. Okay, so back to our code editor, and let's think about how we're going to build this. Well for one, I have some data already set up. So we're just going to create an array. And basically just put in the following numbers 1265428514475. Okay, and the reason I chose those numbers is because I kind of like the way it ended up looking at the end. And it's really just a visual thing. It's nothing specific to any type of data that I want. However, they all do equal up to 100 when summed together. And I just thought that the end result would look pretty cool. So I figured out the different values for this array. Okay, so let's move forward. And let's create a variable called div and set this to D three dot select body. And let's set our width and height to window dot inner width and window dot inner height. Okay, so now we're ready to create our radius. And just like in earlier examples, we're going to use math dot min and input the height and the width and then divide that number by two. The next thing that we're going to do is create our color scale. So let's set this to a variable called color scale. And we're going to use D three scale, ordinal, and we're going to use one of D threes color schemes. So we're going to use D three dot scheme set three with a capital S for set. So D three dot scheme set three. And this is basically an array of colors. So just as we have done, let's bring up the peace sign example. Here, we set the array of colors. So it's the same thing that we're doing here. However, we're just using one of D threes color sets. Now that we have that, let's create our SVG. We're going to do this in the same way that we've done in previous pie chart lessons. So we're going to basically only translate it by the width divided by two and the height divided by two. Okay, so now we're at the point where we can start creating our pie generator. So we're going to set this to a variable called pie. And what we're going to do is use D three dot pie. And the value is going to be obtained from this data array. And each of those data elements is going to be our value. So we're just going to use D, being that it's an object where we have to use D dot, and then the corresponding attribute of that object, we're just using these numbers. So all we need is that number itself, which is D. And then of course, we are not going to sort this. So we're going to set the sort method to have a parameter of null. So before we move on and create an arc, let's actually talk about this because we may have to do something a little different because of all the different features that we're putting into this visualization. So one of those things is we want each of the arcs to actually pop up in order. So that means we have to have a starting point. Remember, we want to transition from nothing basically into this fully rendered arc. So we have to include a zero point, so to speak. And being that we're dealing with a pie chart, we're going to have to create an arc for that. How about we create a zero arc? We're just going to call it that zero arc. And basically, this is going to be the arc that everything begins at. It's zero point. If you remember from our lesson on transitions, we have point A and point B, and we're going to transition from point A to point B. Essentially, this zero arc is our point A. So we're going to use d3.arc. But then we're just going to set the inner radius to zero, the outer radius to one, and the corner radius to one as well. And we'll get to the corner radius as we move on in this lesson so you can see what that does. Okay, so now that we have this point A, let's create our point B. We're going to call this arc. And we're going to also use d3.arc. And basically, this arc is what we would have just created if we were not doing some sort of transition. So this would just be the arc with the outer radius and corner radius being the radius that we had set up here. We're also, though, going to use inner radius of zero, because we don't want this to be a donut chart with the center hollowed out. So let's set the outer radius to the radius that we had defined above, and then also the corner radius to that as well. Okay, so now that we have that arc, let's move on with our arcs and create a hover arc and a label arc. Because we already know that we're going to add a mouse over event and a mouse out event, we need to create an arc for that. So just as we did in monthly bills with a hover arc over here, we're going to do the exact same thing. So let's create that right now. We're going to call this hover arc. And again, we're going to be using d3.arc. We're going to set the corner radius to zero and the outer radius to the radius that we had set above plus 30. And we're actually going to do the exact same thing with the corner radius. Okay, so now when we have a mouse over event, the arc itself is going to grow. We're going to transition from this arc into this arc. Finally, the last arc that we have to create is our label arc. This is for where we're going to place our labels. So we're going to get the centroid of our label arc. So let's create a variable called label arc and set this to d3.arc. And then we're just going to have an inner radius and an outer radius. So the inner radius is actually going to be our radius divided by 1.4. And then our outer radius is going to be our radius. Now I have set this to radius divided by 1.4. However, if it's not in the position that we want it to be at, we can always adjust this number. I'm just putting this in here for now. Okay, so now we're finished creating our arc generators. The next thing that we need to do is create a variable called g. And this is where we are going to basically render our arcs. We're going to get the SVG and select all dot arc. Okay, now we are going to give it our data. We're going to use our pi function and give it our data that we defined up here. Next we're going to enter and append a g element. And then finally give it a class of arc. As you could see, almost everything with the exception of the fact that we have multiple arcs is basically the same thing that we have been doing in the other lessons on pie charts. So now let's append the path. We're going to get access to this group element and append a path, and then set the d attribute. And we're going to set that to the zero arc. Now why are we setting that to the zero arc? Well, like I said, we're going to be transitioning from a point a to a point b for our arc. So we have to start at the zero arc. And then in a moment, we're going to add a transition and then reassign the attribute d to arc. So we're starting here. And then we're going here. We're setting it to zero arc. And then now let's add a class as well and call that arc. Now let's adjust some styling. So we want it to have a fill. And we want to use that color scale, right? So we need to access the data and the index of the data. And then use the index as the parameter to our color scale. We're also going to set the fill opacity to point seven, and the stroke width to five. Next, we're going to set the stroke. And that's going to be the same color that we have set the background. So I'm going to go to crazy pie chart CSS, and just copy that color. So at this point, we're going to put our event listeners. So just as a reminder, from an earlier lesson, we're putting our event listeners first. And then we're putting our transition of the d attribute. And if you don't remember, it's because if we put the transition first, then when we add those event listeners for mouse over and mouse out, we're actually going to be adding the event listeners on the transition itself. And that's not what we want. Okay, so let's type on and mouse over. Let's just set this up. And then we're going to copy this and change mouse over to mouse out. Okay. So what are we updating on the mouse over, we're updating the fill opacity to be one. And then we're transitioning the d attribute to be the hover arc. That's why we created the hover arc. So d three dot select this. And now let's adjust the fill opacity to one, and then create our transition. How about we set this duration to 500 milliseconds. And then finally, let's adjust the d attribute to be the hover arc. And really, that's all there is to it for the mouse over, we're just going to copy that over to the mouse out. And then return the fill opacity to 0.7. And then instead of using a hover arc, we're just going to go back to the regular arc. Finally, we're at the point where we can add our transition of our normal arcs as they are first rendered to the regular arc instead of zero arc. Remember, this is our point a and then this is going to be our point B. So we're going to transition over a duration of one second or 1000 milliseconds. How about we add a delay? So delay. And we have access to D and I, which is the index, and we're going to do it in order. And I'm just going to multiply that index number by 300. And finally, let's set our point B. So we want to change the d attribute to arc. So how about we go back to the browser, refresh the page and make sure everything looks correct. Awesome. So let's see if our hovering works. It does. Cool. So the only thing that I would want to change here is I think it's the radius. So let's multiply this by 0.9. Make it a little bit smaller. Let's see if that works. Okay. So now it fits a little bit more nicely in the screen. So as you could see, we have our hover arc when we do a mouse over event. But we also have this animation when you first load the page, it pops up each different arc pops up upon loading it. So how did we do that? Well, this is because of our zero arc, and then transitioning into our arc. So let's go back to our code and analyze what's going on to end up making what we just rendered here. Let's run the animation again. Here is where we actually are able to do this type of growth in our arc via this transition right here. So let's first comment this out and see what happens if we don't include that. Okay. So nothing is there. And that's because we just have this zero arc. And just as the name implies, with the outer radius as one, the corner radius as one and the inner radius at zero, it's really not going to display anything at all. Let's then change this zero arc to just arc. Let's see what that does. Okay. So now we just see the point B side of the transition. So in order to create that transition from the blank page to this end result, we then transition it. And this being our starting point. And then finally down here, when we set this D attribute to arc being our ending point, we get the following. Okay, so I hope that's clear about how it's being done, how it's coming up from a zero all the way to the current arc. And of course, we know how the event listeners work, we have a mouse over, and we're just creating a transition, which is transitioning the D attribute to a different type of arc. So with that, let's create our labels. We're going to use the label arc for that. So let's go down here and create our labels. What we're going to do is call this text, and we're going to get the G element and append text. We're then going to transform and just as we did in monthly bills, I think, yep, just as we did here, we're actually going to do the exact same thing. We're going to transform by the centroid. However, let's copy this over really quick. We're not going to translate the arc centroid. We're going to translate the label arc. So let's actually see what happens if we use this one. It's not going to break. It is going to technically be correct. However, I want it to be placed a little bit more towards the edge. Therefore, I want the arc to be a little larger. And that's why I created a different arc for that. However, like I said, this is technically correct. There's nothing wrong with that. We're just creating a different arc for a different size. So with that being said, let's adjust a few things. First, let's set the text. So we get access to our data. So we can actually just set it up as so d dot data. And we can put a percentage here if we want. Also, let's adjust some styling. Let's adjust the font size. We'll set this to how about 24. We're also going to adjust the font family. How about we'll change it up. Try cursive. The fill. We'll set that to white. The fill opacity to one. We'll set a text shadow. And we'll set that to two pixels, two pixels, and then zero E zero B 16. And then a text anchor. We'll set that to the middle. Okay, so that's all that we need for our text. Let's refresh the browser and see if it renders. Okay, so as you can see, we have our labels now and they're over our arcs. Just as I mentioned before, this is a fine placement, and there's nothing wrong with it. And we could use the regular arc if we wanted to. The reason that I created label arc is because I actually want them to be placed elsewhere. I want them to be placed a little bit further out. So if you actually prefer the way it looks now, you can erase label arc and you'll be fine. I'm going to use label arc. And let's see what that looks like. Okay, so now it looks like they're way more towards the edge of the arc itself. It's almost like the labels are sitting right at the edge of a flower pedal. The only other thing that I would like to do at this point is a small transition of the text. So let's set the fill opacity to zero instead. And let's actually create a transition here. Let's have it go over a duration of three seconds. So 3000 milliseconds. And we're going to give it the same delay that we have here. And then the only thing that we're going to change here is the fill opacity. And we're going to set that to one. So now let's refresh the page and see what happens. So now we're waiting for the arcs to end up being rendered fully. And then the fill opacity is being transitioned from zero to one. And that's when we're seeing the labels. I didn't really like it when you saw the labels before you saw the arcs. So I decided, let's add a little bit of a transition so that you only see the labels once the arcs are actually rendered. So before we end this lesson, let's quickly go over the corner radius. Just as it is called corner radius, this affects the radius of the corners of the arcs themselves. So we're setting this right now to the radius itself. What if we set it to zero? Let's see what happens. Okay, so by setting it to zero, we get a very normal looking pie chart because we're not curving the radii of the corners of the arc itself. If we set it to something like 30, it'll be a little bit more exaggerated but not by much. Something like this enables you to add a little bit of styling into what would normally be just a plain pie chart. Now when I was first creating this lesson, I thought it would be really cool to create something just wild looking because oftentimes when you're looking at a very wild looking data visualization, you don't realize that maybe that was achieved very, very simply. So really, you're setting a pie chart. However, you're adjusting the styling of the corner radius to be exaggerated. So if we put it back to radius, you're going to see that now it looks like essentially flower petals or something like that. So that's all I have for you for this lesson. I'll see you in the next lesson. Hey everybody, welcome to D3JS from Beginner to Understanding. My name is Nicholas Gaddy and I'm the instructor for this course. First, let me introduce myself before we go over what this course is all about. I work as a full stack web developer at an educational technology startup and I've been using D3JS for over four years. I generally program in JavaScript, PHP and Python. However, recently I'm also learning a little bit of Haskell and C. Other than technology, I have a degree in music composition and I compose music for films. I also play guitar and piano and I really love coffee. So what is D3JS? D3JS is a JavaScript library for manipulating documents based on data. With D3JS, you can create beautiful data visualizations with smooth transitions and interactions. What is the goal of this course? Well, this course is intended for beginners. We go step by step over small features in D3 so that when we are finally ready to build a data visualization, you will have already learned the bulk of what you need to know. While we will be creating many charts throughout the course, the goal of this course is to teach you how the many small pieces work and why they end up creating the visualizations that they do when put together. We focus on the small pieces and work through them independently of a data visualization. The ultimate goal here is to bring you from beginner to understanding. What will you learn? Well, first, we're going to learn what a data visualization is and how to make a great one. We're then going to set up D3JS in Node and create a simple web server with Express. We're then going to talk about selections and data joins. We're going to go over a brief introduction to the selections and data joins and how they are used in D3. Next, we're going to get introduced to SVGs and learn what you can do with them. We also go over shapes such as lines, circles, rectangles and ellipses and create them with and without D3JS. Moving on, we learn more about shapes from circles to lines and we learn how to utilize D3 to create a collection of shapes and work our way to eventually creating charts. Next, we're going to talk about transitions and easing. Once we know how to create some basic shapes, we're going to add transitions and also talk about the different easing functions D3 has to offer. Next, we're going to learn about events. Learn how to add event listeners and callback functions to your elements in D3. We mainly go over click, mouseover and mouseout events. However, we also touch on the change event. Moving forward, we talk about some common scales. In this section, I introduce some of the common scales you'll see in many visualizations such as the linear, ordinal, scale band and time scales. Finally, for the remainder of the course, we combine the pieces that we've learned so far. This is where we find out how the small pieces, when combined, create interactive data visualizations. So, what are you waiting for? Let's get started.