D3 Examples - d3 margin thingy

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    var margin = { top: 10, right: 10, bottom: 10, left: 10};
    var padding = { top: 60, right: 60, bottom: 60, left: 60};
    
    var outerWidth = 900;
    var outerHeight = 500;
    var innerWidth = outerWidth - margin.left - margin.right;
    var innerHeight = outerHeight - margin.top - margin.bottom;
    var width = innerWidth - padding.left - padding.right;
    var height = innerHeight - padding.top - padding.bottom;
    
    var y = d3.scaleLinear()
        .domain([0, height])
        .range([0, height])
    ;
    
    var x = d3.scaleLinear()
        .domain([0, width])
        .range([0, width])
    ;
    
    var yAxis = d3.axisLeft()
        .scale(y)
    ;
    
    var xAxis = d3.axisBottom()
        .scale(x)
    ;
    
    var svg = d3.select("body")
        .append("svg")
        .style("border", "1px solid #ddd")
      .attr("width", outerWidth)
      .attr("height", outerHeight)
    .append('g')
        .attr('transform', `translate(${margin.left},${margin.top})`)
    ;
    
    svg.append('rect')
        .attr('width', innerWidth)
        .attr('height', innerHeight)
        .style('fill', '#f3f3f3')
    ;
    
    var g = svg.append('g')
        .attr('transform', `translate(${padding.left},${padding.top})`)
    ;
    
    g.append('rect')
        .attr('width', width)
        .attr('height', height)
        .style('fill', '#ffffff')
    ;
​
    svg.append("text")
      .text("padding: 30px, margin: 10px")
      .attr("y", 30)
      .attr("x", innerWidth/2)
        .attr('text-anchor', 'middle')
      .attr("font-size", 18)
      .attr("font-family", "Inconsolata, monospace")
    ;
    
    g.append('g')
        .attr('transform', `translate(0,0)`)
        .call(yAxis)
    ;
    
    g.append('g')
        .attr('transform', `translate(0,${height})`)
        .call(xAxis)
    ;
​
  </script>
</body>
​
    