polygons behind text mask

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">

.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>
	<svg viewBox="0 0 200 100">
    <defs>
        <clipPath id="clip">
            <style>
            circle {
                fill: black;
            }
            </style>
      <circle cx="79" cy="39" r="27"/>
      <text x="0" y="52" stroke="black" fill="none" stroke-width="30px">G</text>  
      </clipPath>
    </defs>
 
<image height="100%" preserveAspectRatio="xMinYMin slice" width"100%" href="https://i.redd.it/ldc74ii7t7o11.jpg" clip-path="url(#clip)" />
<circle cx="47" cy="72" r="5" clip-path="url(#clip)"/>

</svg>
<script type="text/javascript" src="script.js"></script>

</body>
</html>

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

Modified http://d3js.org/d3.hexbin.v0.min.js to a secure url

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

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

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