Drilldown Calendar Heatmap | ReactJS | D3

This d3.js heatmap representing time series data is used to visualize the frequency of an entity over time.

Includes a global overview of multiple years and visualizations of year, month and day overviews.

Inspired by

• Calendar by Mike Bostock
• ReactJS Calendar Heatmap by Gleb

Demo

Live Link

Global overview

Year overview

Month overview

Day overview

Install

1. Install @manufac/reactjs-calendar-heatmap with yarn (or npm):

yarn add @manufac/reactjs-calendar-heatmap

NPM Location

2. Import DrilldownCalendar in your component

import {
    DrilldownCalendar
} from '@manufac/reactjs-calendar-heatmap';

3. Render DrilldownCalendar component

<DrilldownCalendar
  color={color}
  data={data}
  overview={overview}
  response={response}
  showDayXAxisLabels={showDayXAxisLabels}
  onTooltip={show}
  onHideTooltip={hide}
  fetchGlobalData={fetchGlobalData}
  fetchDayData={fetchDayData}
/>

CDN

Available via JSDelivr.

Interfaces

export interface CalendarHeatmapDetail {
  date: string;
  value: number;
}

interface CalendarHeatmapDatum {
  date: string;
  total: number;
  details?: CalendarHeatmapDetail[];
}

Properties

| Property | Type | Usage | Default | Required | |:-------------------|:-------------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------|:-----------:|:--------:| | data | CalendarHeatmapDatum[] | Time series data spanning over 1 year or more years | none | yes | | color | color hex code, valid css color name or color scheme names ( 'spectral' , 'hsl' , or 'hslModified' ) | Theme color for the visual elements | '#ff4500' | no | | overview | 'global' \| 'year' \| 'month' \| 'week' \| 'day' | Initial overview for the map | 'year' | no | | response | 'hide' \| 'rotate' \| 'offset' | Responsiveness strategy for handling overlapping axis labels | 'hide' | no | | showDayXAxisLabels | boolean | To show X Axis labels for day overview heatmap | none | no | | onTooltip | (datum: { value: unknown }) => void; | onTooltip function is fired on "mouseover" over a visual element | none | no | | onHideTooltip | () => void; | onHideTooltip function is fired on "mouseout" over a visual element | none | no | | fetchGlobalData | () => Promise<CalendarHeatmapDatum[]>; | To fetch data for 'global', 'year' or 'month' overview heatmap from a REST API | none | no | fetchDayData | (dateTime: string) => Promise<CalendarHeatmapDatum['details']>; | To fetch data for 'day' overview heatmap from a REST API | none | no

Example data

The data contains:

• Day-by-day frequency of an arbitrary event spaninng across 1 or more years
• For each data point, the intra-day frequency is also optionally listed in details

var data = [{
        "date": "2016-01-01",
        "total": 17164,
        "details": [{
                "date": "2016-01-01 12:30:45",
                "value": 9192
            },
            ...{
                "date": "2016-01-01 17:52:41",
                "value": 1219
            }
        ]
    },
    {
        "date": "2016-01-02",
        "total": 17100,
        "details": [{
                "date": "2016-01-02 11:30:00",
                "value": 9132
            },
            ...{
                "date": "2016-01-02 15:52:00",
                "value": 1219
            }
        ]
    }
]