D3 Heat Map Retrospective


The D3 heat map project shows the monthly global land surface temperature average. This project was the first D3 project where I didn't have an exact tutorial to follow along with so I was pushed out of the nest a little bit and forced to fly on my own.

The colors of the chart cells is controlled by how much above or below average the temperature was for that month. I took the conditional coloring I did in the bicycling scatterplot a step further and had more than just two color options.

The thing I remember having the most trouble with was figuring out how to center the months axis on the left hand side of the chart to the middle of each block rather than at the top.

Code Review

In some ways, this chart is much simpler than the previous two. The trick was getting the cells for each month to line up horizontally rather than vertically and getting them smooshed together rather than having empty space between them.

Future Improvements

There are a couple things I could do to improve my heat map:

  • I left in a console.log, so I should remove that
  • The code to color the cells is a big if...else if block that could be cleaner as a switch