D3 Examples - polygons behind text mask

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

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
​
        
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <script type="text/javascript" src="https://d3js.org/d3.hexbin.v0.min.js"></script> 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js"></script>
​
        <style type="text/css">
            text { font: bold 62px sans-serif; }
      
      body {
                margin: 0px; 
                overflow: hidden; 
                font-family: "Helvetica Neue", Helvetica; 
                font-size: 14px;
            }
​
            .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>
    