To make your graphic look better, you'll have to take a look at how to add margins. You could try to figure this out by yourself, but there's actually a convention people use when working with D3 graphics and it works pretty well.
- [Instructor] To make our graphic look better,…we'll have to take a look at how to add margins.…Now you could try to figure this out by yourself…but there's actually a convention…that people use when working with d3 graphics…and it's pretty cool.…You can take a look at it at this URL…and essentially what you need to do is translate…the chart that you want to sort of display…and then add an object that has the margins…that you want to set on each side.…So let's take a look at how this works…in our project.…
First, I'm going to right underneath temperatures,…add an object that is going to hold…the values for our margins.…So we'll call this margin and it's going to be…an object and we'll use top, we'll set that to zero,…right, we'll set that to 30.…Actually, let's go ahead and clear them out…and have them all just be zero for right now.…Bottom, zero, and left, zero.…And then we'll also need to modify this height…so that it now takes into account our margins.…
So we'll say the height minus margin top minus margin…and bottom, actually should be period here.…
- What is D3.js?
- Controlling HTML within selections
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data