Calendar View v4

100%

Calendar View v4

✓ Published0🌍 Public

Last edited Jul 24, 2016

Created on Jul 23, 2016

A calendar view displays the daily opening-to-closing price change of the Dow Jones Industrial Average as a heatmap, with each day’s percentage change mapped to an eleven-class RdYlGn color scale from Cynthia Brewer. Data from a CSV file is processed using `d3.nest` and `d3.rollup` to compute the daily change, which then colors each cell. The layout arranges days into weeks, months, and years, with SVG rectangles and paths rendered via D3 v4 APIs like `d3.timeDays`, `d3.timeWeek`, and `d3.scaleQuantize`.

AI-generated description

Updated the standard cal to v4. Micah Stubbs with a big assist on finding my bug(s) <a href="https://bl.ocks.org/micahstubbs/89c6bd879d64aa511372064c6cf85711">his version here.</a>

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/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4063318'>Calendar View</a>

gpl-3.0 Licensed

Similar vizzes

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

89% 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

83% match

Loading thumbnail…

Alternative Calendar View

This alternative calendar heatmap displays the daily percentage change in the Dow Jones Industrial Average (DJI) from Yahoo Finance, where each day is a colored cell. Unlike the original D3 calendar layout, it arranges multiple months per row to better suit data spanning a few years. The visualization uses D3 version 3 to render SVG rectangles, with tooltips for hover details. A quantized color scale applies an RdYlGn color scheme, and the layout includes month and year labels.

FFrozenfire92

81% 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

77% match

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

75% 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

75% 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

72% 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

72% match