Linear SVG Gradient - A hexagonal SOM heatmap with color legend

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.

The map you see is the visual output from a Machine Learning Technique to cluster data called Self-Organizing Maps. If you want to learn more about this fabolous technique, see my SOM blog series

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,700' rel='stylesheet' type='text/css'>
	
	
	<style>
		html { font-size: 62.5%; }

body {
		  	font-size: 1.6rem;
		  	font-family: 'Open Sans', sans-serif;
		  	font-weight: 300;
		  	fill: #7A7A7A;
		  	text-align: center;
		}

.title {
	      font-size: 3.6rem;
	      fill: #4F4F4F;
	      font-weight: 300;
	      text-anchor: middle;
	    }

.subtitle {
	      font-size: 1.6rem;
	      fill: #AAAAAA;
	      font-weight: 300;
	      text-anchor: middle;
	    }

.legendTitle {
	        text-anchor: middle;
	        font-size: 2.2rem;
	        fill: #4F4F4F;
	        font-weight: 300;
	    }

.axis path,
	  	.axis tick,
	    .axis line {
	  		fill: none;
	  		stroke: none;
	  	}
	</style>
	
</head>	
<body>
	
	<div id="chart"></div>
	<script src="script.js"></script>

</script>

</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    
    <!-- D3.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    
    <!-- Google Font -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
    
    
    <style>
        html { font-size: 62.5%; } 
​
        body {
            font-size: 1.6rem;
            font-family: 'Open Sans', sans-serif;
            font-weight: 300;
            fill: #7A7A7A;
            text-align: center;
        }
​
        .title {
          font-size: 3.6rem;
          fill: #4F4F4F;
          font-weight: 300;
          text-anchor: middle;
        }
​
        .subtitle {
          font-size: 1.6rem;
          fill: #AAAAAA;
          font-weight: 300;
          text-anchor: middle;
        }
​
        .legendTitle {
            text-anchor: middle;
            font-size: 2.2rem;
            fill: #4F4F4F;
            font-weight: 300;
        }
​
        .axis path,
        .axis tick,
        .axis line {
            fill: none;
            stroke: none;
        }
    </style>
    
</head> 
<body>
    
    <div id="chart"></div>
    <script src="script.js"></script>
​
</script>
​
</body>
</html>
    

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