Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="//d3js.org/d3.v4.min.js"></script>
    <style>
        .chart {
            background: lightgray;
            border: 1px solid black;
            width: 425px;
            height: 625px;
        }

    </style>
    <title>D3V4</title>
</head>

<body>

    <div class="chart">
      var margin = { top: 10, right: 20, bottom: 25, left: 25 };
      var width = 425 - margin.left - margin.right;
      var height = 625 - margin.top - margin.bottom;
      
      var svg = d3.select('.chart')
        .append('svg')
          .attr('width', width + margin.left + margin.right)
          .attr('height', height + margin.top + margin.bottom)
        .append('g')
          .attr('transform', `translate(${margin.left}, ${margin.top})`);
      
      svg.append('rect')
        .attr('width', width / 2)
        .attr('height', height)
        .style('fill', 'lightblue')
        .style('stroke', 'green');
      
      svg.append('rect')
        .attr('x', width / 2)
        .attr('width', width / 2)
        .attr('height', height)
        .style('fill', 'lightblue')
        .style('stroke', 'green');

    </div>

    <script>
      
    </script>
</body>

</html>

// Code goes here

/* Styles go here */