D3 Duplicate X Axis ticks

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    
  </head>

  <body>
    <div id="myLineChart"></div>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="lib/script.js"></script>
  </body>
</html>

/* Add your styles here */


// Dimensions and margins
var margin = {top: 10, right: 100, bottom: 100, left: 30},
    width = 450 - margin.left - margin.right,
    height = 350 - margin.top - margin.bottom;

// Append to body
var svg = d3.select("#myLineChart")
  .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 + ")");

//R Read the data
d3.json("data.json", function(data) { 

    // A color scale: one color for each group
    var myColor = d3.scaleOrdinal()
      .domain(["Akeela", "Jamal"])
      .range(d3.schemeCategory10);

    // parse the date / time
    var parseTime = d3.timeParse("%Y-%m-%d");

    // set the ranges
    var x = d3.scaleTime().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);

    // define the first line
    var line1 = d3.line()
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.Akeela); })
        .curve(d3.curveMonotoneX) ;
    // define the second line
    var line2 = d3.line()
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.Jamal); })
        .curve(d3.curveMonotoneX) ;

    // format the data
    data.forEach(function(d) {
        d.date = parseTime(d.date);
        d.Akeela = +d.Akeela;
        d.Jamal = +d.Jamal;
    });

    // sort years ascending
    data.sort(function(a, b){
      return a["date"]-b["date"]; 
    })

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; })); //list of all dates
    y.domain([0, d3.max(data, function(d) {
      return Math.max(d.Akeela, d.Jamal); })]); 

    // Add first line
    svg.append("path")
        .data([data])
        .attr("class", "line")
        .attr("d", line1)
        .attr("fill", "none")
        .attr("stroke", "#8CD3DD");

    // Add second line
    svg.append("path")
        .data([data])
        .attr("class", "line")
        .attr("d", line2)
        .attr("fill", "none")
        .attr("stroke", "#69b3a2");

    // Add Y Axis
    svg.append("g")
        .attr("class", "axis")
        .call(d3.axisLeft(y));

    // Add X Axis
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x)
          .tickFormat(d3.timeFormat("%a %b %d"))
          .tickValues(data.map(function(d){return d.date})))
        .selectAll("text") 
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", ".15em")
          .attr("transform", "rotate(-65)");

    // Add line labels
    svg.append("text")
        .data([data])
        .text("Akeela")
        .attr("transform", "translate(" + width + "," + y(data[data.length-1].Akeela) + ")")
        .style("fill","#8CD3DD")
        .attr("x", 12)
        .attr("y", -8)//move up a bit;
    svg.append("text")
        .data([data])
        .text("Jamal")
        .attr("transform", "translate(" + width + "," + y(data[data.length-1].Jamal) + ")")
        .style("fill","#69b3a2")
        .attr("x", 12)
        .attr("y", 8);
}
)

[
	{
		"date": "2020-09-05",
		"Akeela": 3, 
		"Jamal": 5 	
	},{
		"date": "2020-09-06",
		"Akeela": 2, 
		"Jamal": 3 	
	},{
		"date": "2020-09-02",
		"Akeela": 3, 
		"Jamal": 4 	
	},{
		"date": "2020-09-04",
		"Akeela": 6, 
		"Jamal": 4 	
	},{
		"date": "2020-09-03",
		"Akeela": 6, 
		"Jamal": 3 	
	},{
		"date": "2020-09-07",
		"Akeela": 5, 
		"Jamal": 2 	
	},{
		"date": "2020-09-01",
		"Akeela": 2, 
		"Jamal": 3 	
	}
]