Data-Driven Linear Gradients with D3 - Making a Heat Map Legend

The other day, I wanted to create a heat map legend for a visualization, where the colors used would be dynamically set.  I initially was going to do this via  divs and css linear gradients.  However, this quickly started to turn into a browser prefix mess, even though there is a cool online tool to help you with that.  So, since this was a D3 visualization anyway, I looked at what it would take with D3.  After reading this stack overflow post, it hit me just how simple this is.  And it is simple.

You can see an example with the associated D3 code here (

I used this technique recently as part of putting together a searchable real-time tweet map of the US.

No comments:

Post a Comment

Popular Posts