@tcs-open-source/simple-d3-heatmap
npm i @tcs-open-source/simple-d3-heatmap

@tcs-open-source/simple-d3-heatmap

A javascript module to create heatmap calendars

by team-centric-software

1.0.16 (see all)License:ISCTypeScript:Not Found
npm i @tcs-open-source/simple-d3-heatmap
Readme

simple-d3-heatmap

A javascript module to create heatmap calendars\ Demo: https://team-centric-software.github.io/simple-d3-heatmap/

Description

This module allows you to create nicely looking heatmap calendars with ease. You can choose between yearly, monthly and weekly format.

Preview

Yearly:

yearly calendar

Monthly:

monthly calendar

Weekly:

weekly calendar

Getting Started

Installation

Embed the d3-heatmap.js as well as d3.js in your HTML

<script src="https://cdn.jsdelivr.net/npm/d3@5.9.2/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tcs-open-source/simple-d3-heatmap@latest/simple-d3-heatmap.min.js"></script>

Basic Usage

<!-- Create div to append the calendar to -->
<div id="calendarContainer"></div>

<script>
    // time series data with the format `timestamp: value` as object
    const data = {
        1546254000000: 29,
        1546257600000: 41,
        1546261200000: 50,
        1546264800000: 13,
        1546268400000: 5,
    };

    // create a new instance of SimpleD3Heatmap
    const heatmap = new SimpleD3Heatmap();
    
    // create a weekly calendar which we will append to `calendarContainer` with the data `data`
    heatmap.weekly("calendarContainer", data);
</script>

<!-- Styling for the Tooltip -->
<style>
    .d3-calendar-tooltip {
        background-color: white;
        border: 2px solid #111;
        color: black;
        width: max-content;
        padding: 3px 12px;
    }

    .d3-calendar-tooltip::after {
        box-sizing: border-box;
        display: inline;
        font-size: 12px;
        width: 100%;
        line-height: 1;
        color: #111;
        content: "\25BC";
        position: absolute;
        left: 0px;
        top: 24px;
        text-align: center;
    }
</style>

Heatmap calendar live preview and playground: Click here

Documentation

new SimpleD3Heatmap([settings])

Creates an instance of SimpleD3Heatmap.

Parameters
NameTypeDescriptiondefault
settingsObjectObject which holds all settings for the SimpleD3Heatmap{}Optional
settings.minColorcolorColor of the lowest datapoint in the heatmap - as HEX, RGB or CSS color code"#ECF5E2"Optional
settings.maxColorcolorColor of the highest datapoint in the heatmap - as HEX, RGB or CSS color code"#222081"Optional
settings.colorModeintSelects the way the colors are generated (1 => linear, 2 => sqrt or 3 => cubehelix)2Optional
settings.gutterSizefloatDefines the space inbetween the square (0 - 1) (not for yearly)0.1Optional
settings.outerSizefloatDefines the space inbetween the axis and the square (0 - 1) (not for yearly)0.35Optional
settings.scalefloatDefines the size of the heatmap1Optional
settings.showLinesbooleanShow axis lines? (not for yearly)falseOptional
settings.showTicksbooleanShow axis ticks? (not for yearly)trueOptional
settings.localeStringLocale - language used for months, weekdays and date formats"en-US"Optional
settings.dayNameLengthStringDefines the weekday format (long => "Friday", short => "Fri" or narrow => "F")"long"Optional
settings.showMonthbooleanShow the months?trueOptional
settings.includeWeekendbooleanShow saturday and sunday? Only for weekly calendar heatmaptrueOptional
settings.tooltipClassStringCSS class for the tooltip"d3-calendar-tooltip"Optional
settings.mobileViewPxNumberAt how many pixels (width) change to mobile view?1200Optional
settings.enableAnimationsbooleanEnable animations when rendering the calendar heatmapstrueOptional
Example
const heatmap = new SimpleD3Heatmap({
    minColor: "#ECF5E2", // lowest datapoint's color in the heatmap - e.g. rgb(0, 255, 0) or #00ff00
    maxColor: "#222081", // highest datapoint's color in the heatmap - e.g. rgb(255, 255, 0) or #ffff00
    colorMode: 2, // switches between color scales (1: linear, 2: sqrt and 3: cubehelix)
    
    gutterSize: 0.1, // distance inbetween the squares (range: 0-1)
    outerSize: 0.35, // distance inbetween axis x, y and the squares
    scale: 0.8, // scale of the heatmap
    
    showLines: false, // show the axis line
    showTicks: true, // show the axis ticks
    locale: "de-DE", // defines the format of the date in the axis
    dayNameLength: "short", // style of the displayed weekday, options => long: "Friday", short: "Fri", narrow: "F" (uses locale)
    showMonth: true, // displays the months (uses locale)
    includeWeekend: true, // include the weekend in weekly calendar or only monday till friday?

    tooltipClass: "d3-calendar-tooltip", // class of the tooltip
    mobileViewPx: 1200, // at which width change to mobileview?
    enableAnimations: true, // enable animations when rendering calendar?
})
Returns
  • Void

SimpleD3Heatmap.weekly(container_id, data)

Creates a heatmap calendar of one week

Parameters
NameTypeDescription
container_idStringID of the container where the heatmap should be appended to 
dataheatmapDataData for the heatmap 
Returns
  • Void

SimpleD3Heatmap.monthly(container_id, data)

Creates a heatmap calendar of one month

Parameters
NameTypeDescription
container_idStringID of the container where the heatmap should be appended to 
dataheatmapDataData for the heatmap 
Returns
  • Void

SimpleD3Heatmap.yearly(container_id, data)

Creates a heatmap calendar of one year

Parameters
NameTypeDescription
container_idStringID of the container where the heatmap should be appended to 
dataheatmapDataData for the heatmap 
Returns
  • Void

Data Format: heatmapData

{
    timestamp: value,
    ...
}

Downloads/wk

37

GitHub Stars

24

LAST COMMIT

3yrs ago

MAINTAINERS

2

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.0.16
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial