Linear SVG Gradient - Traffic accidents per Day & Hour combination

This is the main 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 based on a similar dataset that I used for my Traffic Accidents project, but with data from 2014 instead of 2013. Looking at the data from a different angle than I did in my previous project, I now made a simple heatmap (based on Miles McCrocklin's Heatmap block) showing the number of traffic accidents that occur on each given hour throughout the week. No surprise to see the numbers jump up during the morning and evening rush hours (but the evenings are worse than the mornings).

You can other SVG legend gradient examples here:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	
	
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
	
	<script src="accidents.js"></script>
	
	<style>
		html { font-size: 62.5%; }

body {
		  	font-size: 1rem;
		  	font-family: 'Open Sans', sans-serif;
		  	font-weight: 400;
		  	fill: #8C8C8C;
		  	text-align: center;
		}

.timeLabel, .dayLabel {
		    font-size: 1.6rem;
		    fill: #AAAAAA;
		    font-weight: 300;
		}

text.axis-workweek, text.axis-worktime {
		    fill: #404040;
		    font-weight: 400;
		}

.title {
		    font-size: 2.8rem;
		    fill: #4F4F4F;
		    font-weight: 300;
		}

.subtitle {
		    font-size: 1.4rem;
		    fill: #AAAAAA;
		    font-weight: 300;
		}
		  
		.credit {
		    font-size: 1.2rem;
		    fill: #AAAAAA;
		    font-weight: 400;
		}

.axis path, .axis tick, .axis line {
		      fill: none;
		      stroke: none;
		  }

text {
		      font-size: 1.2rem;
		      fill: #AAAAAA;
		      font-weight: 400;
		}

.legendTitle {
		      font-size: 1.6rem;
		      fill: #4F4F4F;
		      font-weight: 300;
		}
	</style>
	
</head>	
<body>
	
	<div id="trafficAccidents"></div>
	<script src="script.js"></script>

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js