viewBox attribute with svg height and width attributes set

If you look at this jsbin svg image which has width and height attributes and a viewBox attribute set:

var width = width + margin.left + margin.right;
var height = height + margin.top + margin.bottom;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr('viewBox', '0 0 ' + width + ' ' + height)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Then the svg does not scale at all.

But if I then comment out the width and height attributes then it does appear to scale like in this bin.

I am very confused by the viewBox attribute, I see lots of examples online with a width, height and viewBox attribute all set. I see the viewBox attribute as negated when there is a width and height attribute.

I am also puzzled by the width and height properties of the viewBox actually correspond to the actual space.

The docs say that you are specifying your own coordinate system but I don't understand what this means and how the width and height correspond to the actual width and height of the document.