Heat maps are a great way to display correlations between two sets of data or quickly communicating progress on a project (think node.green).

I recently had to draw up some heat maps at work to track progress on some projects I am working on with the power of D3. We are going to implement a short look at generating one with D3.

Note: we are not going to use any frameworks today.

Prerequisites

We are going to use Vercel’s serve package to serve our static files.

Follow the link to read more about it.

# Install serve globally
	npm i -g serve

Getting Started

mkdir d3-heatmap
	cd d3-heatmap
	touch index.html main.css main.js

The styles file

Let’s add some CSS to our main.css file.

text {
	  font-size: 10px;
	  font-family: "Roboto Mono", monospace;
	  font-weight: 700;
	}

	line,
	path {
	  fill: none;
	  stroke: #000;
	  shape-rendering: crispEdges;
	}

As this is a trivial example, we are going to target the HTML. Normally, applying a class is a better idea.

This sets the font to be Roboto Mono (which we will bring in from the Google Fonts CDN) and sets some CSS property values for the line and path SVG elements.

#d3 #javascript #tutorial #programming