Nocturnal Pajama Mutants

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

    1.0.16 • Public • Published

    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
    Name Type Description default
    settings Object Object which holds all settings for the SimpleD3Heatmap {} Optional
    settings.minColor color Color of the lowest datapoint in the heatmap - as HEX, RGB or CSS color code "#ECF5E2" Optional
    settings.maxColor color Color of the highest datapoint in the heatmap - as HEX, RGB or CSS color code "#222081" Optional
    settings.colorMode int Selects the way the colors are generated (1 => linear, 2 => sqrt or 3 => cubehelix) 2 Optional
    settings.gutterSize float Defines the space inbetween the square (0 - 1) (not for yearly) 0.1 Optional
    settings.outerSize float Defines the space inbetween the axis and the square (0 - 1) (not for yearly) 0.35 Optional
    settings.scale float Defines the size of the heatmap 1 Optional
    settings.showLines boolean Show axis lines? (not for yearly) false Optional
    settings.showTicks boolean Show axis ticks? (not for yearly) true Optional
    settings.locale String Locale - language used for months, weekdays and date formats "en-US" Optional
    settings.dayNameLength String Defines the weekday format (long => "Friday", short => "Fri" or narrow => "F") "long" Optional
    settings.showMonth boolean Show the months? true Optional
    settings.includeWeekend boolean Show saturday and sunday? Only for weekly calendar heatmap true Optional
    settings.tooltipClass String CSS class for the tooltip "d3-calendar-tooltip" Optional
    settings.mobileViewPx Number At how many pixels (width) change to mobile view? 1200 Optional
    settings.enableAnimations boolean Enable animations when rendering the calendar heatmaps true Optional
    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
    Name Type Description
    container_id String ID of the container where the heatmap should be appended to  
    data heatmapData Data for the heatmap  
    Returns
    • Void

    SimpleD3Heatmap.monthly(container_id, data)

    Creates a heatmap calendar of one month

    Parameters
    Name Type Description
    container_id String ID of the container where the heatmap should be appended to  
    data heatmapData Data for the heatmap  
    Returns
    • Void

    SimpleD3Heatmap.yearly(container_id, data)

    Creates a heatmap calendar of one year

    Parameters
    Name Type Description
    container_id String ID of the container where the heatmap should be appended to  
    data heatmapData Data for the heatmap  
    Returns
    • Void

    Data Format: heatmapData

    {
    	timestamp: value,
    	...
    }

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    4

    Version

    1.0.16

    License

    ISC

    Unpacked Size

    49.1 kB

    Total Files

    4

    Last publish

    Collaborators

    • daluf
    • erdii