Calendar View

100%

✓ Published0🌍 Public

Last edited Feb 26, 2019

Created on Nov 13, 2012

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.

AI-generated description

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.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Calendar View v4

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`.

BBBischof

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

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

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

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

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

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

74% match