d3 margin thingy

forked from anonymous's block: d3 margin thingy

<!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>

https://d3js.org/d3.v4.min.js