This is an example from my blog on Creating a smooth color legend with an SVG gradient. The color legend below is just a simple rectangle filled with an SVG gradient. But in for this particular data it works well, because you are mostly interested in trends, to get a general sense of then numbers. Therefore, it is not imperative to be able to read the exact value that each color represents. And in those cases, when you work with a quantitative color scale, I prefer to use smooth color legends.
This visual is a recreation of a weather radial of Boston temperatures in 2015. The original idea (and beautiful poster) can be found on weather-radials.com. I took the data from wunderground.com and took out the minimum, average and maximum temperature. Each bar represents one day and the bar runs from the minimum to maximum temperature. The bar is colored according to the average temperature of that day and this is what the legend below the weather radial refers to.
You can other SVG legend gradient examples here: