I wanted the little year-of-squares heatmap for an activity page, but the versions I got either misaligned the weekday rows or started the week on the wrong day, so the whole grid was shifted by one and the month labels didn't line up.
The fix was being explicit that columns are ISO weeks and rows are weekdays, and forcing the model to compute the first column's offset from the starting weekday rather than assuming the year starts on a Monday. The month labels then had to be placed at the first week where the month changes.
Just sharing the prompt, it's fiddly date math the model gets wrong unless you spell it out.
Generate a GitHub-style contribution heatmap as a single inline SVG (no libraries, no canvas). Input: array of {date: 'YYYY-MM-DD', count} for a rolling 53-week window ending {END_DATE}.
Layout: columns = weeks (up to 53), rows = weekdays. Decide the week-start via opts.weekStart (0=Sunday default). The FIRST column is partial: compute the vertical offset from the start date's weekday, do not assume the range begins on the week-start day. Squares 11x11 with a 2px gap, 3px rounded corners.
Color: 5 buckets by count using quantile thresholds computed from the non-zero values (not fixed magic numbers), from a light 'empty' (#ebedf0) to the darkest brand shade; zero-count days use the empty color. State the computed thresholds in a comment.
Labels: month abbreviations placed above the FIRST week whose month differs from the previous week's month; weekday labels (Mon/Wed/Fri) on the left. All text 9px, #767676.
Accessibility: each rect has a <title> like '3 contributions on 2024-06-14'. Provide a legend 'Less [] [] [] [] [] More'. Return the SVG-generating function plus one rendered example.