Monday-based Calendar

100%

Monday-based Calendar

✓ Published0🌍 Public

Last edited Jan 6, 2018

Created on Jan 6, 2018

An annual heatmap displays traffic accident counts for each day of 2016, arranged in a single calendar grid. The visualization uses a color scale to encode the number of accidents per day, with the year laid out in columns of weeks and rows for days of the week. The code adapts a D3 calendar view to start weeks on Monday, using the `d3.time.format` function with the `%W` directive to compute week numbers. It loads daily accident data from a CSV file and renders the calendar as SVG, with month outlines drawn via the `monthPath` function.

AI-generated description

An 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");

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1648635'>Monday-based Calendar</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3 v4 Calendar View

This example shows a calendar heatmap of daily accident counts in 2016, visualized as colored cells arranged by week, month, and year. Using D3 v4 with Vue, it loads CSV data via `d3.csv`, converts dates into a nested map, and applies a quantized `d3.scaleQuantize` with an RdYlGn diverging color scale. Data is rendered as SVG rectangles, with month boundaries drawn using custom path logic and legend labels added separately.

EElisaDnr

83% match

Loading thumbnail…

d3 | reusable heatmap calendar

This calendar heatmap visualizes daily activity amounts across multiple years using a reusable D3.js component. The chart displays years in separate horizontal bands, with each column representing a week and each cell a day, colored by a diverging linear scale from light pink to red based on the amount value. Month boundaries are marked with paths, and weekday/month labels support orientation. Data is loaded from JSON, mapped to calendar days, and rendered as SVG rectangles within a margin-based layout. The chart supports interactivity via a hover dispatch event.

CCBasis

75% match

Loading thumbnail…

Calendar Heatmap

This calendar heatmap combines a yearly calendar view with a day-hour heatmap, showing monthly data across 24-hour segments with color-coded values. The visualization renders two SVG charts: a calendar grid for each month and a detailed hour-by-day matrix, both using D3 v3 with quantile color scales and d3-tip tooltips. Sample data includes daily amounts for January 2017, color-coded through custom color schemes and animated transitions for interactive exploration.

MMagicTK

74% match

Loading thumbnail…

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.

Mmbostock

74% match

Loading thumbnail…

Calendar Visualization

This calendar visualization displays two-dimensional data as a color-coded heatmap over daily dates from March to July 2020, with each day’s count encoded by cell fill intensity. The SVG rendering uses D3 v5 to bind the JSON data array, while moment.js parses the date strings for positioning. Rect elements receive a class for hover styling, and tooltips are implemented via a custom div that appears on mouseover, relying on D3’s event handling to show the specific count for each day.

Ffloresh

72% match

Loading thumbnail…

Calendar Alternate Orientation v4 update

This calendar visualization displays daily fact counts for 2016 as an exploded month grid, with each day colored on a red-to-green scale based on value intensity using a d3.scaleQuantize and a polylinear color gradient. The code uses d3.timeDays, d3.timeMonths, and d3.timeYears to structure the layout, while d3.timeFormat handles date parsing and week/month calculations. A hover tooltip appears via d3.csv-loaded data, and the animation-ready SVG layout arranges months in rows with white grid lines separating cells.

BBBischof

72% match

Loading thumbnail…

Line Chart

This line chart displays the number of road accidents per hour of the day, based on data from a CSV file of accident records. The x-axis encodes time in 15-minute increments over a 24-hour period, while the y-axis shows the accident count. The visualization uses d3.csv to parse the data, d3.timeParse to convert hour strings, and d3.scaleTime, d3.scaleLinear, and d3.line to render the SVG path with a steelblue stroke. The counts are aggregated by sorting and grouping hour values.

EElisaDnr

72% match

Loading thumbnail…

Simple GitHub Calendar

This visualization displays a year of commit activity in a GitHub-style heatmap calendar. It uses a grid of small cells to represent individual days, with each cell’s color intensity mapped to a random daily value via a linear scale. The code leverages d3.v3 time utilities such as `d3.time.weeks` and `d3.time.days` to structure weeks and days, while SVG rectangles render the grid. Hovering over a cell triggers a tooltip showing the full date and value, highlighting the cell with a black outline.

663anp3ca

72% match