Margins

Introduction

In this lesson, we will dive into the last fundamental concept of drawing a chart, margins. Margins are important when we draw charts in D3.js. Without defining margins, our axis will lie on the SVG’s boundaries, and we will have to use translate() to make it visible. To make drawing charts in D3.js more convenient, we will be using margins in the upcoming lessons.

Although D3.js doesn’t provide an explicit margin component, we will use the translate() function to draw margins.

Example

Let’s demonstrate margins by going through the following example.