Monday-based Calendar
This example shows daily stock price changes for the Dow Jones Industrial Average from 2010, displayed in a calendar view where each cell represents a day and color intensity reflects the percent change between open and close prices. The visualization uses D3.js version 3 with SVG rendering, drawing one calendar per year from 1990 to 2010. Unlike the standard Sunday-based calendar, this adaptation modifies the `day` and `week` functions—using `%W` for Monday-based week numbering and shifting `getDay()` by six—so that weeks begin on Monday. The code uses `d3.time.days` and `d3.time.months` to generate the grid, `d3.scale.quantize` to map returns to colors, and `d3.nest` to aggregate the CSV data by date.
AI-generated descriptionAn example adaption of D3’s calendar-view using weeks that start on Monday. The only change is the definition of the day number and week number methods. For a Sunday-based week, use:
var day = function(d) { return d.getDay(); },
week = d3.time.format("%U");
For a Monday-based week, use:
var day = function(d) { return (d.getDay() + 6) % 7; },
week = d3.time.format("%W");