.timeFormat(%b %Y) not giving me the right dates - date

Question

I'm a beginner with d3.js. The goal for now is to take the date column from "2018-11-01" to "Nov 18".
The dates start from "2016-11-01" to "2020-08-01" and each date in between is only the first of each month.
For example:
"2016-11-01",
"2016-12-01",
"2017-01-01",
"2017-02-01",
"2017-03-01",
"2017-04-01",
"2017-05-01",
The code I've used is below:
var format = d3.timeFormat("%b %Y");
var data = d3.dsv(",", dsvPath, function (d) {
return {
//Year : getYear(new Date(+d.year,0,1)),
date: format(new Date(d.date)),
['Catan=count']:+d['Catan=count'],
['Dominion=count']:+d['Dominion=count'],
['Codenames=count']:+d['Codenames=count'],
['Terraforming Mars=count']:+d['Terraforming Mars=count'],
['Gloomhaven=count']:+d['Gloomhaven=count'],
['Magic: The Gathering=count']:+d['Magic: The Gathering=count'],
['Dixit=count']:+d['Dixit=count'],
['Monopoly=count']:+d['Monopoly=count']
//['Running Total'] : +d["running_total"]
};
}).then(function (data) {
console.log(data[0]);
minDate = d3.min(data,function(d){console.log(d); return d.date;});
maxDate = d3.max(data,function(d){console.log(d); return d.date;});
console.log(minDate);
However, for the minimum date, I get April 2017 instead of November 2016. The max date is May 2020 instead of September 2020.
When I read in the data as is without the data formatting, the minDate and maxDate are correct. As soon as I format, however, Oct 2016, which doesn't exist in the dataset, is somehow logged twice.
Furthermore, the data in the console stops at "July 2020": there's no August and Sept 2020. I'm honestly very puzzled.
Any help would be much appreciated!
Thank you!

Answer 1

Converting to a Date via the Date() constructor is notoriously tricky. Thankfully, since D3 gives us methods to go from a date to a string, it also has the reverse, going from a string to a date.
Our process will be twofold:
For each string in a certain format, convert to Date with d3.timeParse().
Convert each date to your desired string format.
(1.) (2.)
"2016-01-01" 🡒 Date<2016-01-01T00:0O> 🡒 "January 2016"
d3.timeParse d3.timeFormat
You already have (2.) in your code, so we need (1.):
var toDate = d3.timeParse("%Y-%M-%d");
var format = d3.timeFormat("%b %Y"); // (2.)
var data = d3.dsv(",", dsvPath, function (d) {
return {
date: format(toDate(d.date)),
};
})