D3 Examples - marginConvention

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .chart {
            background: lightgray;
      border: 1px solid black;
      width: 425px;
      height: 625px;
    }
  </style>
</head>
<body>
  <div class="chart"></div>
  <script>
    const margin = {top: 0, right: 0, bottom: 20, left: 25}
        const width = 425 - margin.left - margin.right;
    const height = 625 - margin.top - margin.bottom;
    const svg = d3.select('.chart')
        .append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.bottom + margin.top)
            .append('g')
            .attr('transform', `translate(${margin.left}, ${margin.top})`)
    
    svg.append('rect')
        .attr('width', width)
        .attr('height', height)
        .style('fill', 'lightblue')
        .style('stroke', 'green');
  </script>
</body>
​
    