A smooth color legend for a more general heatmap And if you look longer, you’ll see more interesting trends. With the evenings being even worse than the mornings. No surprise to see the numbers jump up during the morning and evening rush hours. Looking at the data from a different angle than I did in my previous project, this visual (based on Miles McCrocklin’s Heatmap block) shows the number of traffic accidents that occur on each given hour throughout the week. The one below is based on a similar dataset that I used for my Traffic Accidents project, but with data from 2014 instead of 2013. I think a heatmap is a very good example where you can use a smooth color legend. From SVG gradients that can be based on data, dynamic, animated gradients and more, to SVG filters for creating glow, gooey, and fuzzy effects. You can find links to all the other blogs in my kick-off article here. Even for a subject as narrow as SVG filters and gradients, there are more things possible than you might think. My goal with the talk was to inspire people to experiment with the norm, to create new ways of making a visual more effective or fun. This blog is part of the SVGs beyond mere shapes tutorial series. It was more about seeing trends and getting a general sense of the numbers, so chopping the colors up into 5 or 6 bins wasn’t what I wanted. It wasn’t really necessary to read the exact value each color represented.

I was looking for a way to create a legend that would smoothly go from one color in my color scale to another. My first deviation from just using SVGs merely for their shapes came while trying to create a color legend. Posted on Creating a smooth color legend with an SVG gradient

Inkscape arrow with gradient