D3 Examples - Self Organizing Map - Heatmap

xxxxxxxxxx
 
<!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.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">
            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>
        <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>
    