D3 Tips and Tricks: Interactive Data Visualization/

...

/

Setting Up the Margins and the Graph Area

Setting Up the Margins and the Graph Area

Learn how to set-up the margins and graph area in D3.

We'll cover the following...

Let’s understand the JavaScript (JS) of the code first by breaking it into the various components that comprise the graph.

The code for the margins

The part of the code responsible for defining the area where the graph and associated bits and pieces are placed is this part:

Press + to interact
var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

Explanation of the code

Line 1: Defines the four margins which surround the block where the graph (as an object) is positioned.

So, there will be a border of: ...