Skip to main content
SimilarExport ZIP
100%

Calendar View v4

✓ Published0🌍 Public
TThanaporn-sk
Last edited May 11, 2017
Created on Mar 9, 2017

A calendar view displays daily Dow Jones Industrial Average returns from 2010, with each day colored by the percent change between opening and closing prices. The visualization arranges days into a grid of weeks and months across multiple SVG charts, one per year, using a diverging RdYlGn color scale from Cynthia Brewer. The code loads CSV data via `d3.csv`, processes it with `d3.nest` and `rollup` to compute daily returns, and maps values through `d3.scaleQuantize` to eleven color classes. Layout uses `d3.timeDays`, `d3.timeMonths`, and custom path generation to delineate month boundaries.

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.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4063318'>Calendar View</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/5e6f5a72b9c3677d72cb14b70b7a4bf5'>Calendar View v4</a>

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
93% 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
91% 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
84% 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
79% 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…

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
77% 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
76% match
Loading thumbnail…

Calendar-YearHour view

This calendar-year hour view displays a 12-month grid of hourly cells for the year 2017, with each month rendered as a separate SVG panel. Days run vertically and hours horizontally, with date and hour labels along the axes. The code uses D3 v4’s `d3.timeHours` and `d3.timeDays` to generate the time intervals, and `d3.timeFormat` to format the data for tooltips. Each rectangular cell is appended with a `title` element showing the full timestamp, while month outlines and borders are drawn via SVG `rect` elements. The visualization relies on D3 data joins and SVG rendering to compose the compact grid layout.

TThanaporn-sk
74% match