So I’m using the javascript window on codepen and the d3.js tool for a brushable timeline to query my data based on year. I have it where it does work, but the timeline labels are decimals instead of the years. The data being query is a geojson about wildlife poaching reports, attributes including animal product, poaching estimate value, reporting country, and the year.

I tried to use the new date command for the date range of the data and that was successful in changing the labels. The downside though was then I lost all functionality, selecting anything on the timeline would eliminate all the points from view. Below I included the code block that I believe is the appropriate location to change the labels, I just don’t know the correct command/implementation.

  var x = d3
   .scaleTime()
    .domain(
      // ([new Date(1994, 1, 1), new Date(2023, 12, 31) -1 ]),
      d3.extent(data.features, function(d) {
      return d.properties.Year;
    x.ticks(d3.timeYear.every(1));
 }))
   .rangeRound([0, width]); 

  var svg = container
    .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("g") // https://github.com/d3/d3-time-format
    .attr("class", "axis axis--grid")
    .attr("transform", "translate(0," + height + ")")
    .call(
      d3
        .axisBottom(x)
        .ticks(d3.timeYear, 1)
        .tickSize(-height)
        .tickFormat(function() {
          return null;
        })
    )
    .selectAll(".tick")
    .classed("tick--minor", function(d) {
      return d.getFullYear();
    });

If that’s not sufficient, this is the link to the codepen: https://codepen.io/ecsizmad/pen/ZEZqXOe

Thank you in advance!!