GeezerVison

GeezerVison is showing d3-graph-gallery.com — Area Chart | the D3 Graph Gallery

Step by step

Most basic

The most basic heatmap you can do in d3.js. Keeping only the core code.

Add tooltip to heatmap

Add a tooltip that displays the exact value of a cell and whatever other text.

Ready to go heatmap

A customized heatmap, include hover effect, custom axis, title, fancy color palette, tooltip and more

Template

The following heatmap is my starting template for my personal work. It offers most of the feature you need for a good heatmap: colorBrewer colorscale, hover effect, tooltip, title and custom axis. The input dataset has 3 columns: row, column and value. Get the code here.

Interesting block

Visualization of Les Misérables

Interactive heatmap with possible switch in group order

Related chart types

Scatter

Heatmap

Correlogram

Bubble

Connected scatter

Density 2d