Let's break down why your heatmap is showing dates in reverse order and fix it step by step:

Core Issues #

1. X-coordinate calculation uses calendar year weeks: Right now, you're calculating the horizontal position based on the week number within the date's calendar year. This means 2021 dates start at week 0 (left side) while 2020 dates are in later weeks (right side), reversing the chronological flow.
2. Unnecessary reversal of values: You're calling values.reverse() when binding data to rectangles, which messes up the date order within each year group.
3. Year groups are rendered in overlapping positions: While this isn't the main order issue, having both year groups translated to the same Y position causes overlap.

Step 1: Calculate X Position Based on the Start Date (Not Calendar Year) #

Instead of counting weeks from the start of the date's calendar year, count weeks from your one-year-ago start date. This ensures a continuous timeline from left (past) to right (present).

Replace your existing x attribute calculation with this:

.attr(
  "x",
  (d) => timeWeek.count(new Date(yearBackFromNow), new Date(d.date)) * cellSize + 0.5
)

This calculates how many weeks have passed between your start date (yearBackFromNow) and the current date d.date, giving you a sequential X position for every date in your range.

Step 2: Remove the Unnecessary values.reverse() #

In the section where you bind data to rectangles, you're reversing the values array, which flips the order of dates within each year group. Delete that line:

Before:

.data(([, values]) => {
  console.log(values.reverse());
  return values.reverse();
})

After:

.data(([, values]) => values)

Step 3: Ensure Year Groups Are Processed in Chronological Order #

Your d3.groups call already groups dates by year, but we need to make sure the older year (2020) is rendered first (though with the fixed X position, this won't affect horizontal order anymore, but it's good practice):

If your fullYearData is already in chronological order (from 2020-08 to 2021-08), d3.groups will return the 2020 group first, then 2021. But if you want to explicitly enforce order, you can reverse the groups if needed:

const years = d3.groups(fullYearData, (d) => new Date(d.date).getUTCFullYear());
// Uncomment below if groups are in reverse order
// years.reverse();

Step 4: Fix Overlapping Year Groups (Optional but Clean) #

Right now, both year groups are translated to the same Y position (translate(40.5,30)), which causes them to overlap. Since we're making a single-year continuous heatmap (like GitHub), we can actually remove the grouping by year entirely and render all dates as a single dataset. Here's how:

Replace:

const years = d3.groups(fullYearData, (d) => new Date(d.date).getUTCFullYear());

const year = svg
  .selectAll("g")
  .data(years)
  .join("g")
  .attr("transform", (d, i) => `translate(40.5,30)`);

With:

// Treat all data as a single group for the continuous timeline
const year = svg
  .append("g")
  .attr("transform", `translate(40.5,30)`);

Then, when binding data to rectangles and months, adjust to use the full dataset instead of grouped values:

For rectangles:

year
  .append("g")
  .style("position", "relative")
  .selectAll("rect")
  .data(fullYearData) // Use full dataset directly
  .join("rect")
  // ... keep the rest of your rectangle attributes and event listeners

For month labels:

const month = year
  .append("g")
  .selectAll("g")
  .data(d3.utcMonths(new Date(yearBackFromNow), new Date(today)))
  .join("g");

This simplifies the code and ensures no overlapping elements.

Final Notes #

• Double-check that your fullYearData is indeed in chronological order (from yearBackFromNow to today). Your current date-filling code should already handle this, but you can verify with a console.log(fullYearData) to be sure.
• The weekday labels (formatDay) in your code currently uses "MWFS" which only shows 4 days – you might want to adjust that to "SMTWTFS" to match GitHub's full weekday labels.

After making these changes, your heatmap should display dates from one year ago (left) to today (right), just like GitHub's contribution graph.

内容的提问来源于stack exchange，提问作者Shubham Kumar