Margin calculation with D3 JavaScript

I'm drawing couple of graphics on a webpage. Let's say I have 4 graphics (A-B-C-D). I would like to lay them out as follows:

A B
C D

But currently they appear like this:

A
B
C
D

I set the margin, width, and height for A as follows:

var margin = {top: 20, right: 20, bottom: 30, left: 40},
            width = 500 - margin.left - margin.right,
            height = 270 - margin.top - margin.bottom;

Any ideas on how to set these properties for B, C and D so that they appear as intended?

Thanks!