Create Chart Axes with D3 v4

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

    </div>

    <script>
      
      var margin = { top: 10, right: 20, bottom: 60, 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)
  .attr('height', height)
  .style('fill', 'lightblue')
  .style('stroke', 'green');

  /**
   * Create Y axis
   */
  // Set scale
  const yScale = d3.scaleLinear()
                    .domain([0, 100])
                    .range([height, 0]);
  // add y-axis  
  const yAxis = d3.axisLeft(yScale);
  // const yAxis = d3.axisLeft(yScale).ticks(10, '.1s');
  // If you want to add fine control about the ticks:
  // const yAxis = d3.axisLeft(yScale).tickValues([5,10,30,50,80,100]);
  // add to the svg
  svg.call(yAxis);    


  /**
   * Create X axis
   */
  const xScale = d3.scaleTime()
    .domain([new Date(2017, 6, 1),  new Date(2017, 7, 1)])
    .range([0, width]);

    //https://github.com/d3/d3-time
  const xAxis = d3.axisBottom(xScale)
    .ticks(d3.timeDay.every(4))
    .tickSize(10)
    .tickPadding(15);

  svg.append('g')
        .attr('transform', `translate(0, ${height})`)
     .call(xAxis);   
  

  

    </script>
</body>

</html>

// Code goes here

/* Styles go here */