100%

Alternative Calendar View

✓ Published0🌍 Public

Last edited Dec 29, 2016

Created on Dec 29, 2016

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.

AI-generated description

d3.js Calendar View Heatmap

d3.js visualization of a calendar heatmap.

Demo can be viewed here

A new layout compared with the original d3.js calendar. The visualization in this repository is better suited for data that span over a couple years, as opposed to decades.

Features:

tooltip hover
month and year labels

Running the visualization

Simply cd into the directory and run a localhost from there.

I recommend using this command: python -m SimpleHTTPServer

Credits

Mike Bostock for creating d3.js and the original calendar visualization. Cynthia Brewer for the color pattern. Yahoo! finance for historical data.

About

Kathy Zhou, software developer and d3 enthusiast :)

twitter: @kaffkaff

homepage: kathyzhou.com

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

81% match

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

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

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

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

70% match

Loading thumbnail…

Yahoo Finance Chart

This example visualizes intraday stock price data from Yahoo Finance using a combination of D3 and d3fc components. The chart displays high, low, open, and close prices, along with trading volume and a moving average, over a discontinuous time scale that skips non-trading hours. A crosshair tooltip shows detailed values for the hovered data point, while callout annotations highlight the most recent high and moving-average values. Trading hours are marked with vertical annotations and shaded bands, and the chart includes a legend summarizing the OHLC and volume data. The visualization uses an SVG renderer and is built with d3.v5, demonstrating how to compose multiple series and annotations using the d3fc library.

CColinEberhardt

70% match

Loading thumbnail…

VIX

This interactive calendar heatmap visualizes the VIX (volatility index) across multiple years, rendered as horizontal time strips using D3.js. Based on the original VIX calendar example, it encodes daily values using a YlGn color scale, with each day colored according to its value. The years are placed side-by-side, with intelligent year label placement that accounts for week boundaries. A mouse-driven horizontal scrollbar effect is implemented: hovering near the left or right edge (within a 150-pixel zone) smoothly scrolls the strip, with the scrolling speed proportional to the mouse's proximity to the edge. The animation is achieved with setTimeout-based timing rather than setInterval. SVG rendering with crisp edges and colorbrewer palettes completes the visualization.

GGerHobbelt

68% match