Adding Margins
It is considered good practice to add spacing to your charts to prevent shapes from being cut off.
We'll cover the following...
We are going to modify our chart by adding margins. Margins are a great way to add spacing to a chart. It gives our chart breathing room. To better understand why margins may be necessary, let’s look at how margins are used in documents.
Newsletter articles, books, contracts, almost any kind of document you can think of, has margins. Margins are the space between the text and the edge of the paper. This image shows an example of what margins look like. There are several reasons why margins are added to documents.
One of the reasons for adding margins is to prevent text from sitting on the edge. It looks weird and can be difficult to read. Spacing helps a lot in making text readable.
For similar reasons, we will want to add spacing to our chart. As we have learned, shapes drawn outside of an image are hidden from view. We do not want that to happen. One way of preventing a shape from being cut off is by adding margins to our chart. So, even if a shape is on the edge, it would not be cut off.
The problem
Let’s look at an example.
In the widget above, we are drawing a circle with a radius of 15. Under the JavaScript tab, we are adding the circle after creating the svg selection. The circle is being added to the svg selection with the append() method.
The circle appears in the top left corner because the default coordinates for shapes are 0, 0. It is not being ...