[D3] Create Chart Axes with D3 v4

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);