Why subtract margins only add them back in when setting svg width - d3.js

Question

In the following d3 line graph the author created a margin object with the properties top, right, bottom, and left.
var margin = {top: 20, right: 20, bottom: 60, left: 80}
Then sets the width variable in the following way.
width = 700 - margin.left - margin.right // 700 - 80 - 20 = 600
// So, width variable is 600
Only to then, add the margins back in when setting the width of the svg.
attr('width', width + margin.left + margin.right) // 600 + 80 + 20 = 700
// So, width attr of the svg is 700
Why not just set width 700 without having to subtract the margins? That what the svg ends up being set to. What is the purpose of this pattern I've seen it before and trying to understand the purpose of doing it this way. Thank you.
Full code below.
var margin = {top: 20, right: 20, bottom: 60, left: 80},
width = 700 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;
var svg = d3.select("body") //create Svg element
.append("svg")
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.style("border", "solid 1px red")
.attr("transform","translate(100,0)"); // To align svg at the center in the output tab.
var data = [
{ date:"2020/01/01 00:00:00", patients: 600 },
{ date:"2020/02/01 00:00:00", patients: 500 },
{ date:"2020/03/01 00:00:00", patients: 400 },
{ date:"2020/04/01 00:00:00", patients: 500 },
{ date:"2020/05/01 00:00:00", patients: 300 },
{ date:"2020/06/01 00:00:00", patients: 100 },
{ date:"2020/07/01 00:00:00", patients: 50 },
{ date:"2020/08/01 00:00:00", patients: 500 },
{ date:"2020/09/01 00:00:00", patients: 550 },
{ date:"2020/10/01 00:00:00", patients: 550 },
];
data=data.map(d => ({
date: new Date(d.date),
patients: d.patients
}))
var xscale = d3.scaleTime()
.domain(d3.extent(data, d=>d.date))
.range([0,width]);
var yscale= d3.scaleLinear() // drawing y scale
.domain([0,600])
.range([height,0])
var chart=svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
chart.append('g')
.call(d3.axisBottom(xscale).tickFormat(d3.timeFormat("%b")))
.attr('transform', 'translate(0,' + height + ')')
chart.append('g')
.call(d3.axisLeft(yscale))
svg.append("text") // labelling x-axis
.text("Month")
.attr("transform","translate(350,680)");
svg.append("text") // labelling y-axis
.text("Number of patients")
.attr('transform', "translate(40,400) rotate(-90)");
var generator = d3.line()
.x(function (d) { return xscale(d.date); })
.y(function (d) { return yscale(d.patients); });
chart.append('path')
.datum(data)
.attr("d", generator)
.attr("fill","none")
.attr("stroke","blue");

Answer 1

This was standard practice with D3, since as far back as at least version 3. Mike Bostock uses this convention in his examples. I've always found it useful. You cite a fairly simple example, but as your d3 code gets more complicated you'll need to be referencing that plot width more often than you total svg width.