Skip to main content
SimilarExport ZIP
100%

D3 v4 Calendar View

✓ Published0🌍 Public
EElisaDnr
Last edited Jan 9, 2018
Created on Jan 6, 2018

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.

AI-generated description

a d3 version 4 calendar heatmap

a fork of the Calendar View bl.ock from @mbostock

created in response to the question from @BEBischof on the d3js slack

did anyone fix the calendar view to v4 yet?

(curious about this slack thing? you can get yourself an invite over at https://d3-slackin.herokuapp.com/)

a special thanks to @mbostock, who showed us just where to use d3 v4's new map.has(key) and map.get(key) in this twitter thread

incidentally, this is the first d3 example I've created from VR.

my current stack for d3 development in VR is Sublime Text 3 + Terminator + zsh + Chrome. this is pretty similar to the Mac environment I normally work from. from there, it's:

Ubuntu 16.04 <- VirtualBox <- Windows 10 <- BigScreen <- HTC Vive

Original README.md

This example demonstrates loading of CSV data, which is then quantized into a diverging color scale. The values are visualized as colored cells per day. Days are arranged into columns by week, then grouped by month and years. Colors by Cynthia Brewer. Layout inspired by Rick Wicklin and Robert Allison. Dow Jones historical data copyright Yahoo! Finance or independent data provider; fair use for educational purposes.

forked from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s block: <a href='http://bl.ocks.org/micahstubbs/89c6bd879d64aa511372064c6cf85711'>D3 v4 Calendar View</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Monday-based Calendar

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.

EElisaDnr
83% 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
80% 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
80% 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
79% match
Loading thumbnail…

Calendar View

A calendar heatmap displays the frequency of food inspection violations per day, using a diverging color scale from red to green across a year. The visualization loads CSV data via `d3.csv`, quantizes values, and renders SVG rectangles positioned by week and month. It uses D3 v4 APIs including `d3.timeParse`, `d3.scaleQuantize`, and `d3.timeDays` to build the calendar grid, with a tooltip showing details on hover. The layout and Brewer color scheme follow examples from stat-computing and ColorBrewer.

BBBischof
79% 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
79% match
Loading thumbnail…

D3 - Heatmap

This heatmap visualizes impact magnitudes across locations and months from January to September 2016, using color intensity to convey variation. The D3.js v7 code loads CSV data via `d3.csv`, maps locations and months to x- and y-axes using `d3.scaleBand`, and fills rectangles with the sequential `d3.interpolateViridis` color scale. The SVG rendering includes axis labels, a chart title, and a grey background, with the heatmap cells styled with rounded corners and white strokes.

CChandana Srinivas
76% match
Loading thumbnail…

Calendar View

This calendar view visualizes daily Dow Jones index changes from 1990 to 2010 as colored cells arranged by week, month, and year. Each day’s percentage change between open and close is quantized into an eleven-step diverging color scale from Cynthia Brewer. The code loads CSV data with d3.csv, nests it by date using d3.nest, and renders SVG rectangles positioned by d3.timeWeek and d3.timeDay calculations, with month outlines drawn via d3.timeMonths paths.

Mmbostock
76% match