# pa7/heatmap.js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/pa7-heatmap-js).**

6,373 stars · 1,318 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/pa7/heatmap.js
- Homepage: https://www.patrick-wied.at/static/heatmapjs/
- awesome-repositories: https://awesome-repositories.com/repository/pa7-heatmap-js.md

## Description

heatmap.js is a JavaScript data visualization library used to render data density visualizations on a web page. It functions as an HTML5 canvas heatmap library that represents the intensity of data points across a coordinate system using color gradients.

The library provides tools for geospatial distribution mapping and user behavior analysis, such as mapping click patterns and interaction hotspots. It is also used to add visual intensity layers to interactive data dashboards to identify trends and anomalies.

## Tags

### Part of an Awesome List

- [Heatmap Visualization](https://awesome-repositories.com/f/awesome-lists/data/heatmap-visualization.md) — Provides a library to create visual representations of data density on a canvas. ([source](https://www.patrick-wied.at/static/heatmapjs/))
- [Geospatial Mapping](https://awesome-repositories.com/f/awesome-lists/data/geospatial-mapping.md) — Represents the concentration of events or objects across a coordinate system or map interface.
- [Game Engines](https://awesome-repositories.com/f/awesome-lists/devtools/game-engines.md) — Canvas-based library for generating heatmaps.

### Graphics & Multimedia

- [Canvas Rendering](https://awesome-repositories.com/f/graphics-multimedia/canvas-rendering.md) — Utilizes direct pixel manipulation on an HTML5 canvas to render high-performance density maps.
- [Data-to-Pixel Coordinate Transforms](https://awesome-repositories.com/f/graphics-multimedia/coordinate-transformations/data-to-pixel-coordinate-transforms.md) — Translates abstract data coordinates into specific pixel offsets to accurately place heat intensity markers.
- [Data Visualization Libraries](https://awesome-repositories.com/f/graphics-multimedia/data-visualization-libraries.md) — Provides a set of tools for drawing dynamic graphical representations of datasets directly in the browser.
- [Heatmap Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/colors/gradient-renderers/heatmap-renderers.md) — Generates density-based color overlays using weighted points to visualize data distribution. ([source](http://www.patrick-wied.at/static/heatmapjs/))
- [HTML5 Canvas Libraries](https://awesome-repositories.com/f/graphics-multimedia/html5-canvas-libraries.md) — Functions as a JavaScript library specifically designed for rendering 2D density visualizations using the HTML5 Canvas API.
- [Radial Gradient Overlays](https://awesome-repositories.com/f/graphics-multimedia/radial-gradient-overlays.md) — Uses circular gradient overlays at each data point to simulate heat intensity and organic blending.

### User Interface & Experience

- [Data Visualization Tools](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools.md) — Provides a tool for transforming raw data into graphical representations of intensity using color gradients.
- [Heatmap Visualizations](https://awesome-repositories.com/f/user-interface-experience/heatmap-visualizations.md) — Creates visual overlays representing the concentration and intensity of data points on web pages.
- [Color Blending](https://awesome-repositories.com/f/user-interface-experience/color-spaces/color-blending.md) — Implements additive color blending to represent increasing data density through shifts in color.
- [User Behavioral Mapping](https://awesome-repositories.com/f/user-interface-experience/user-behavioral-mapping.md) — Maps user click patterns and interaction hotspots to analyze and improve interface design.
- [Offscreen Rendering](https://awesome-repositories.com/f/user-interface-experience/web-based-rendering-engines/embedded-web-renderers/offscreen-rendering.md) — Renders density maps to a hidden offscreen canvas before transferring the final result to the visible screen.

### Software Engineering & Architecture

- [Color Lookup Tables](https://awesome-repositories.com/f/software-engineering-architecture/lookup-table-mappings/color-lookup-tables.md) — Maps grayscale intensity values to a predefined color palette using a transition table to generate the heat effect.