Join Ray Villalobos for an in-depth discussion in this video Adjusting margins, part of D3.js: Data Visualization.
…To make our graphic look a little better,…we're going to have to take a look at adding margins.…Now you could try to figure this out yourself, but…there's actually a convention that people use when working with D3 Graphics and…you can read more about it at this URL.…So essentially what you do is you create a margin object, just like this and…then you redefine the width and the height using the dimensions of these margins.…And then when you create the SVG element,…you add the margins to the width and the height.…
You sort of add back in what you took out, and then you move the element,…in this case the chart by translating it from the margin to the left and…to the right and then we have to adjust the guides.…Here's an example right here but…it's actually better if we look at it on our project.…So I'm going to switch over and first thing we're going to do is go ahead and…create the object.…We'll do that right here before we do the width and height.…So that will be a new variable called margin, and I'm going to set that up to be…
- What is D3.js?
- Creating a basic document structure
- Controlling HTML DOM elements
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data
- Creating and adjusting layouts