Self Organizing Map - Heatmap - D3v4

Modified Nadieh code to cover the whole svg (adding an extra hexbin on even rows) and computing the sizes based only on the columns.

Original Readme:

The end result of my blog on SOM - Creating hexagonal heatmaps with D3.js in which the one heatmap of a Self Organizing Map is displayed with D3 with a small hover event

A version with line boundaries to separate the segments can be found here

forked from nbremer's block: Self Organizing Map - Heatmap - D3

<!DOCTYPE html>
<html>
  <head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>Self Organizing Maps</title>
		
		<script type="text/javascript" src="https://d3js.org/d3.v4.js"></script>
		<script src="https://d3js.org/d3-hexbin.v0.2.min.js">
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js"></script>

.header {
				margin-top: 20px;
				margin-left: 20px;
				font-size: 36px; 
				font-weight: 300; 
				display: block; 
				z-index: 1; 
				text-shadow: 0 1px 0 #fff;
			}
			.hint {
				width: 1280px; 
				right: 0px; 
				color: rgb(153, 153, 153); 
				font-size: 12px;
				padding-bottom: 20px;
			}
      
      #chart{
        text-align: center;
      }

.hr-style {
			   border: 0;
			   height: 2px;
			   width: 80%;
			   color: #E8E8E8;
			   background-color: #E8E8E8;
			}
		</style>
	</head>
	<body>
	    <div class="header">
			Self Organizing Maps
			<div class="hint">Heatmaps showing distributions per variable</div>
		</div>
		<div id="chart"></div>
		
		<script type="text/javascript" src="script.js"></script>

</body>
</html>

Modified http://d3js.org/d3.v4.js to a secure url

https://d3js.org/d3.v4.js

https://d3js.org/d3-hexbin.v0.2.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js