cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!DOCTYPE html>
<meta charset="utf-8">
<html>

<style>
      rect.tileborder {
        stroke: #E6E6E6;
        stroke-width:2px;   
      }

      text.legendlabels {
        font-size: 10pt;
        font-family: Consolas, courier;
        fill: #555555;
      }

      text.scorelabels {
        font-size: 10pt;
        fill: #000000;
      }

      text.gridlabels {
        font-size: 10pt;
        fill: #555555;
      }


</style>

<body>

<select id = "opts">
<option value="freq" selected="selected">Frequencies</option>
<option value="rowp">Percentage of Rows</option> 
<option value="colp">Percentage of Columns</option> 
</select>


<div id="chart"></div>
<div id="dataset-picker"></div>


<script src="https://d3js.org/d3.v3.js"></script>    
<script type="text/javascript">


//data inputs
var rows=['LT01','LT02','LT03','LT04','LT05','LT06','LT07','LT08','LT09','LT10','LT11','LT12','LT13','LT14','LT15','LT16','LT17','LT18','LT19','LT20','LT21','LT22','LT23','LT24','LT25'];

var cols=['MG01','MG02','MG03','MG04','MG05','MG06','MG07','MG08','MG09','MG10','MG11','MG12','MG13'];


var freq=[{value: 31, row: 1, col: 1},{value: 9, row: 1, col: 2},{value: 39, row: 1, col: 3},{value: 27, row: 1, col: 4},{value: 44, row: 1, col: 5},{value: 22, row: 1, col: 6},{value: 35, row: 1, col: 7},{value: 23, row: 1, col: 8},{value: 50, row: 1, col: 9},{value: 35, row: 1, col: 10},{value: 37, row: 1, col: 11},{value: 33, row: 1, col: 12},{value: 51, row: 1, col: 13},{value: 28, row: 2, col: 1},{value: 25, row: 2, col: 2},{value: 22, row: 2, col: 3},{value: 48, row: 2, col: 4},{value: 28, row: 2, col: 5},{value: 22, row: 2, col: 6},{value: 52, row: 2, col: 7},{value: 16, row: 2, col: 8},{value: 54, row: 2, col: 9},{value: 26, row: 2, col: 10},{value: 42, row: 2, col: 11},{value: 37, row: 2, col: 12},{value: 44, row: 2, col: 13},{value: 20, row: 3, col: 1},{value: 12, row: 3, col: 2},{value: 14, row: 3, col: 3},{value: 29, row: 3, col: 4},{value: 15, row: 3, col: 5},{value: 13, row: 3, col: 6},{value: 21, row: 3, col: 7},{value: 21, row: 3, col: 8},{value: 40, row: 3, col: 9},{value: 18, row: 3, col: 10},{value: 27, row: 3, col: 11},{value: 26, row: 3, col: 12},{value: 22, row: 3, col: 13},{value: 33, row: 4, col: 1},{value: 12, row: 4, col: 2},{value: 23, row: 4, col: 3},{value: 32, row: 4, col: 4},{value: 22, row: 4, col: 5},{value: 32, row: 4, col: 6},{value: 37, row: 4, col: 7},{value: 39, row: 4, col: 8},{value: 61, row: 4, col: 9},{value: 32, row: 4, col: 10},{value: 25, row: 4, col: 11},{value: 60, row: 4, col: 12},{value: 43, row: 4, col: 13},{value: 45, row: 5, col: 1},{value: 18, row: 5, col: 2},{value: 59, row: 5, col: 3},{value: 47, row: 5, col: 4},{value: 51, row: 5, col: 5},{value: 67, row: 5, col: 6},{value: 48, row: 5, col: 7},{value: 73, row: 5, col: 8},{value: 88, row: 5, col: 9},{value: 78, row: 5, col: 10},{value: 39, row: 5, col: 11},{value: 67, row: 5, col: 12},{value: 122, row: 5, col: 13},{value: 36, row: 6, col: 1},{value: 10, row: 6, col: 2},{value: 60, row: 6, col: 3},{value: 28, row: 6, col: 4},{value: 23, row: 6, col: 5},{value: 20, row: 6, col: 6},{value: 45, row: 6, col: 7},{value: 23, row: 6, col: 8},{value: 62, row: 6, col: 9},{value: 32, row: 6, col: 10},{value: 16, row: 6, col: 11},{value: 24, row: 6, col: 12},{value: 36, row: 6, col: 13},{value: 18, row: 7, col: 1},{value: 95, row: 7, col: 2},{value: 3, row: 7, col: 3},{value: 14, row: 7, col: 4},{value: 9, row: 7, col: 5},{value: 8, row: 7, col: 6},{value: 10, row: 7, col: 7},{value: 20, row: 7, col: 8},{value: 11, row: 7, col: 9},{value: 8, row: 7, col: 10},{value: 37, row: 7, col: 11},{value: 22, row: 7, col: 12},{value: 20, row: 7, col: 13},{value: 22, row: 8, col: 1},{value: 12, row: 8, col: 2},{value: 25, row: 8, col: 3},{value: 21, row: 8, col: 4},{value: 21, row: 8, col: 5},{value: 20, row: 8, col: 6},{value: 26, row: 8, col: 7},{value: 30, row: 8, col: 8},{value: 44, row: 8, col: 9},{value: 24, row: 8, col: 10},{value: 41, row: 8, col: 11},{value: 26, row: 8, col: 12},{value: 29, row: 8, col: 13},{value: 22, row: 9, col: 1},{value: 22, row: 9, col: 2},{value: 28, row: 9, col: 3},{value: 28, row: 9, col: 4},{value: 55, row: 9, col: 5},{value: 19, row: 9, col: 6},{value: 70, row: 9, col: 7},{value: 40, row: 9, col: 8},{value: 68, row: 9, col: 9},{value: 24, row: 9, col: 10},{value: 60, row: 9, col: 11},{value: 29, row: 9, col: 12},{value: 54, row: 9, col: 13},{value: 21, row: 10, col: 1},{value: 8, row: 10, col: 2},{value: 12, row: 10, col: 3},{value: 16, row: 10, col: 4},{value: 18, row: 10, col: 5},{value: 13, row: 10, col: 6},{value: 22, row: 10, col: 7},{value: 13, row: 10, col: 8},{value: 23, row: 10, col: 9},{value: 9, row: 10, col: 10},{value: 22, row: 10, col: 11},{value: 25, row: 10, col: 12},{value: 25, row: 10, col: 13},{value: 21, row: 11, col: 1},{value: 36, row: 11, col: 2},{value: 11, row: 11, col: 3},{value: 10, row: 11, col: 4},{value: 12, row: 11, col: 5},{value: 15, row: 11, col: 6},{value: 9, row: 11, col: 7},{value: 28, row: 11, col: 8},{value: 18, row: 11, col: 9},{value: 11, row: 11, col: 10},{value: 22, row: 11, col: 11},{value: 19, row: 11, col: 12},{value: 14, row: 11, col: 13},{value: 46, row: 12, col: 1},{value: 27, row: 12, col: 2},{value: 61, row: 12, col: 3},{value: 45, row: 12, col: 4},{value: 43, row: 12, col: 5},{value: 43, row: 12, col: 6},{value: 90, row: 12, col: 7},{value: 48, row: 12, col: 8},{value: 103, row: 12, col: 9},{value: 41, row: 12, col: 10},{value: 45, row: 12, col: 11},{value: 43, row: 12, col: 12},{value: 65, row: 12, col: 13},{value: 62, row: 13, col: 1},{value: 19, row: 13, col: 2},{value: 86, row: 13, col: 3},{value: 27, row: 13, col: 4},{value: 51, row: 13, col: 5},{value: 75, row: 13, col: 6},{value: 75, row: 13, col: 7},{value: 49, row: 13, col: 8},{value: 108, row: 13, col: 9},{value: 72, row: 13, col: 10},{value: 41, row: 13, col: 11},{value: 69, row: 13, col: 12},{value: 58, row: 13, col: 13},{value: 32, row: 14, col: 1},{value: 34, row: 14, col: 2},{value: 16, row: 14, col: 3},{value: 37, row: 14, col: 4},{value: 28, row: 14, col: 5},{value: 17, row: 14, col: 6},{value: 44, row: 14, col: 7},{value: 36, row: 14, col: 8},{value: 53, row: 14, col: 9},{value: 19, row: 14, col: 10},{value: 43, row: 14, col: 11},{value: 31, row: 14, col: 12},{value: 58, row: 14, col: 13},{value: 70, row: 15, col: 1},{value: 25, row: 15, col: 2},{value: 59, row: 15, col: 3},{value: 42, row: 15, col: 4},{value: 54, row: 15, col: 5},{value: 64, row: 15, col: 6},{value: 58, row: 15, col: 7},{value: 68, row: 15, col: 8},{value: 89, row: 15, col: 9},{value: 73, row: 15, col: 10},{value: 61, row: 15, col: 11},{value: 87, row: 15, col: 12},{value: 89, row: 15, col: 13},{value: 68, row: 16, col: 1},{value: 18, row: 16, col: 2},{value: 100, row: 16, col: 3},{value: 38, row: 16, col: 4},{value: 46, row: 16, col: 5},{value: 65, row: 16, col: 6},{value: 90, row: 16, col: 7},{value: 45, row: 16, col: 8},{value: 111, row: 16, col: 9},{value: 81, row: 16, col: 10},{value: 33, row: 16, col: 11},{value: 61, row: 16, col: 12},{value: 72, row: 16, col: 13},{value: 57, row: 17, col: 1},{value: 15, row: 17, col: 2},{value: 55, row: 17, col: 3},{value: 39, row: 17, col: 4},{value: 37, row: 17, col: 5},{value: 47, row: 17, col: 6},{value: 35, row: 17, col: 7},{value: 39, row: 17, col: 8},{value: 67, row: 17, col: 9},{value: 54, row: 17, col: 10},{value: 25, row: 17, col: 11},{value: 78, row: 17, col: 12},{value: 40, row: 17, col: 13},{value: 18, row: 18, col: 1},{value: 17, row: 18, col: 2},{value: 25, row: 18, col: 3},{value: 25, row: 18, col: 4},{value: 22, row: 18, col: 5},{value: 18, row: 18, col: 6},{value: 25, row: 18, col: 7},{value: 22, row: 18, col: 8},{value: 45, row: 18, col: 9},{value: 20, row: 18, col: 10},{value: 23, row: 18, col: 11},{value: 32, row: 18, col: 12},{value: 40, row: 18, col: 13},{value: 132, row: 19, col: 1},{value: 45, row: 19, col: 2},{value: 176, row: 19, col: 3},{value: 66, row: 19, col: 4},{value: 105, row: 19, col: 5},{value: 116, row: 19, col: 6},{value: 146, row: 19, col: 7},{value: 123, row: 19, col: 8},{value: 223, row: 19, col: 9},{value: 182, row: 19, col: 10},{value: 92, row: 19, col: 11},{value: 151, row: 19, col: 12},{value: 229, row: 19, col: 13},{value: 14, row: 20, col: 1},{value: 13, row: 20, col: 2},{value: 17, row: 20, col: 3},{value: 27, row: 20, col: 4},{value: 12, row: 20, col: 5},{value: 16, row: 20, col: 6},{value: 17, row: 20, col: 7},{value: 15, row: 20, col: 8},{value: 23, row: 20, col: 9},{value: 14, row: 20, col: 10},{value: 37, row: 20, col: 11},{value: 19, row: 20, col: 12},{value: 20, row: 20, col: 13},{value: 42, row: 21, col: 1},{value: 30, row: 21, col: 2},{value: 14, row: 21, col: 3},{value: 23, row: 21, col: 4},{value: 27, row: 21, col: 5},{value: 32, row: 21, col: 6},{value: 20, row: 21, col: 7},{value: 40, row: 21, col: 8},{value: 32, row: 21, col: 9},{value: 26, row: 21, col: 10},{value: 29, row: 21, col: 11},{value: 55, row: 21, col: 12},{value: 47, row: 21, col: 13},{value: 19, row: 22, col: 1},{value: 10, row: 22, col: 2},{value: 19, row: 22, col: 3},{value: 14, row: 22, col: 4},{value: 24, row: 22, col: 5},{value: 21, row: 22, col: 6},{value: 25, row: 22, col: 7},{value: 26, row: 22, col: 8},{value: 33, row: 22, col: 9},{value: 27, row: 22, col: 10},{value: 19, row: 22, col: 11},{value: 26, row: 22, col: 12},{value: 26, row: 22, col: 13},{value: 77, row: 23, col: 1},{value: 69, row: 23, col: 2},{value: 84, row: 23, col: 3},{value: 73, row: 23, col: 4},{value: 29, row: 23, col: 5},{value: 65, row: 23, col: 6},{value: 82, row: 23, col: 7},{value: 50, row: 23, col: 8},{value: 104, row: 23, col: 9},{value: 71, row: 23, col: 10},{value: 60, row: 23, col: 11},{value: 80, row: 23, col: 12},{value: 66, row: 23, col: 13},{value: 69, row: 24, col: 1},{value: 346, row: 24, col: 2},{value: 3, row: 24, col: 3},{value: 3, row: 24, col: 4},{value: 9, row: 24, col: 5},{value: 19, row: 24, col: 6},{value: 11, row: 24, col: 7},{value: 11, row: 24, col: 8},{value: 8, row: 24, col: 9},{value: 10, row: 24, col: 10},{value: 72, row: 24, col: 11},{value: 43, row: 24, col: 12},{value: 11, row: 24, col: 13},{value: 33, row: 25, col: 1},{value: 11, row: 25, col: 2},{value: 22, row: 25, col: 3},{value: 23, row: 25, col: 4},{value: 17, row: 25, col: 5},{value: 19, row: 25, col: 6},{value: 16, row: 25, col: 7},{value: 28, row: 25, col: 8},{value: 29, row: 25, col: 9},{value: 26, row: 25, col: 10},{value: 20, row: 25, col: 11},{value: 22, row: 25, col: 12},{value: 26, row: 25, col: 13}];



var colp=[{value: 3, row: 1, col: 1},{value: 1, row: 1, col: 2},{value: 4, row: 1, col: 3},{value: 3, row: 1, col: 4},{value: 5, row: 1, col: 5},{value: 3, row: 1, col: 6},{value: 3, row: 1, col: 7},{value: 2, row: 1, col: 8},{value: 3, row: 1, col: 9},{value: 3, row: 1, col: 10},{value: 4, row: 1, col: 11},{value: 3, row: 1, col: 12},{value: 4, row: 1, col: 13},{value: 3, row: 2, col: 1},{value: 3, row: 2, col: 2},{value: 2, row: 2, col: 3},{value: 6, row: 2, col: 4},{value: 3, row: 2, col: 5},{value: 3, row: 2, col: 6},{value: 5, row: 2, col: 7},{value: 2, row: 2, col: 8},{value: 3, row: 2, col: 9},{value: 3, row: 2, col: 10},{value: 4, row: 2, col: 11},{value: 3, row: 2, col: 12},{value: 3, row: 2, col: 13},{value: 2, row: 3, col: 1},{value: 1, row: 3, col: 2},{value: 1, row: 3, col: 3},{value: 4, row: 3, col: 4},{value: 2, row: 3, col: 5},{value: 1, row: 3, col: 6},{value: 2, row: 3, col: 7},{value: 2, row: 3, col: 8},{value: 3, row: 3, col: 9},{value: 2, row: 3, col: 10},{value: 3, row: 3, col: 11},{value: 2, row: 3, col: 12},{value: 2, row: 3, col: 13},{value: 3, row: 4, col: 1},{value: 1, row: 4, col: 2},{value: 2, row: 4, col: 3},{value: 4, row: 4, col: 4},{value: 3, row: 4, col: 5},{value: 4, row: 4, col: 6},{value: 3, row: 4, col: 7},{value: 4, row: 4, col: 8},{value: 4, row: 4, col: 9},{value: 3, row: 4, col: 10},{value: 3, row: 4, col: 11},{value: 5, row: 4, col: 12},{value: 3, row: 4, col: 13},{value: 4, row: 5, col: 1},{value: 2, row: 5, col: 2},{value: 6, row: 5, col: 3},{value: 6, row: 5, col: 4},{value: 6, row: 5, col: 5},{value: 8, row: 5, col: 6},{value: 4, row: 5, col: 7},{value: 8, row: 5, col: 8},{value: 6, row: 5, col: 9},{value: 8, row: 5, col: 10},{value: 4, row: 5, col: 11},{value: 6, row: 5, col: 12},{value: 9, row: 5, col: 13},{value: 3, row: 6, col: 1},{value: 1, row: 6, col: 2},{value: 6, row: 6, col: 3},{value: 4, row: 6, col: 4},{value: 3, row: 6, col: 5},{value: 2, row: 6, col: 6},{value: 4, row: 6, col: 7},{value: 2, row: 6, col: 8},{value: 4, row: 6, col: 9},{value: 3, row: 6, col: 10},{value: 2, row: 6, col: 11},{value: 2, row: 6, col: 12},{value: 3, row: 6, col: 13},{value: 2, row: 7, col: 1},{value: 10, row: 7, col: 2},{value: 0, row: 7, col: 3},{value: 2, row: 7, col: 4},{value: 1, row: 7, col: 5},{value: 1, row: 7, col: 6},{value: 1, row: 7, col: 7},{value: 2, row: 7, col: 8},{value: 1, row: 7, col: 9},{value: 1, row: 7, col: 10},{value: 4, row: 7, col: 11},{value: 2, row: 7, col: 12},{value: 2, row: 7, col: 13},{value: 2, row: 8, col: 1},{value: 1, row: 8, col: 2},{value: 2, row: 8, col: 3},{value: 3, row: 8, col: 4},{value: 3, row: 8, col: 5},{value: 2, row: 8, col: 6},{value: 2, row: 8, col: 7},{value: 3, row: 8, col: 8},{value: 3, row: 8, col: 9},{value: 2, row: 8, col: 10},{value: 4, row: 8, col: 11},{value: 2, row: 8, col: 12},{value: 2, row: 8, col: 13},{value: 2, row: 9, col: 1},{value: 2, row: 9, col: 2},{value: 3, row: 9, col: 3},{value: 4, row: 9, col: 4},{value: 7, row: 9, col: 5},{value: 2, row: 9, col: 6},{value: 6, row: 9, col: 7},{value: 4, row: 9, col: 8},{value: 4, row: 9, col: 9},{value: 2, row: 9, col: 10},{value: 6, row: 9, col: 11},{value: 2, row: 9, col: 12},{value: 4, row: 9, col: 13},{value: 2, row: 10, col: 1},{value: 1, row: 10, col: 2},{value: 1, row: 10, col: 3},{value: 2, row: 10, col: 4},{value: 2, row: 10, col: 5},{value: 1, row: 10, col: 6},{value: 2, row: 10, col: 7},{value: 1, row: 10, col: 8},{value: 1, row: 10, col: 9},{value: 1, row: 10, col: 10},{value: 2, row: 10, col: 11},{value: 2, row: 10, col: 12},{value: 2, row: 10, col: 13},{value: 2, row: 11, col: 1},{value: 4, row: 11, col: 2},{value: 1, row: 11, col: 3},{value: 1, row: 11, col: 4},{value: 1, row: 11, col: 5},{value: 2, row: 11, col: 6},{value: 1, row: 11, col: 7},{value: 3, row: 11, col: 8},{value: 1, row: 11, col: 9},{value: 1, row: 11, col: 10},{value: 2, row: 11, col: 11},{value: 2, row: 11, col: 12},{value: 1, row: 11, col: 13},{value: 4, row: 12, col: 1},{value: 3, row: 12, col: 2},{value: 6, row: 12, col: 3},{value: 6, row: 12, col: 4},{value: 5, row: 12, col: 5},{value: 5, row: 12, col: 6},{value: 8, row: 12, col: 7},{value: 5, row: 12, col: 8},{value: 7, row: 12, col: 9},{value: 4, row: 12, col: 10},{value: 5, row: 12, col: 11},{value: 4, row: 12, col: 12},{value: 5, row: 12, col: 13},{value: 6, row: 13, col: 1},{value: 2, row: 13, col: 2},{value: 8, row: 13, col: 3},{value: 3, row: 13, col: 4},{value: 6, row: 13, col: 5},{value: 9, row: 13, col: 6},{value: 7, row: 13, col: 7},{value: 5, row: 13, col: 8},{value: 7, row: 13, col: 9},{value: 7, row: 13, col: 10},{value: 4, row: 13, col: 11},{value: 6, row: 13, col: 12},{value: 4, row: 13, col: 13},{value: 3, row: 14, col: 1},{value: 4, row: 14, col: 2},{value: 2, row: 14, col: 3},{value: 5, row: 14, col: 4},{value: 3, row: 14, col: 5},{value: 2, row: 14, col: 6},{value: 4, row: 14, col: 7},{value: 4, row: 14, col: 8},{value: 3, row: 14, col: 9},{value: 2, row: 14, col: 10},{value: 4, row: 14, col: 11},{value: 3, row: 14, col: 12},{value: 4, row: 14, col: 13},{value: 7, row: 15, col: 1},{value: 3, row: 15, col: 2},{value: 6, row: 15, col: 3},{value: 5, row: 15, col: 4},{value: 7, row: 15, col: 5},{value: 7, row: 15, col: 6},{value: 5, row: 15, col: 7},{value: 7, row: 15, col: 8},{value: 6, row: 15, col: 9},{value: 7, row: 15, col: 10},{value: 6, row: 15, col: 11},{value: 7, row: 15, col: 12},{value: 7, row: 15, col: 13},{value: 7, row: 16, col: 1},{value: 2, row: 16, col: 2},{value: 10, row: 16, col: 3},{value: 5, row: 16, col: 4},{value: 6, row: 16, col: 5},{value: 7, row: 16, col: 6},{value: 8, row: 16, col: 7},{value: 5, row: 16, col: 8},{value: 7, row: 16, col: 9},{value: 8, row: 16, col: 10},{value: 3, row: 16, col: 11},{value: 5, row: 16, col: 12},{value: 6, row: 16, col: 13},{value: 6, row: 17, col: 1},{value: 2, row: 17, col: 2},{value: 5, row: 17, col: 3},{value: 5, row: 17, col: 4},{value: 5, row: 17, col: 5},{value: 5, row: 17, col: 6},{value: 3, row: 17, col: 7},{value: 4, row: 17, col: 8},{value: 4, row: 17, col: 9},{value: 5, row: 17, col: 10},{value: 3, row: 17, col: 11},{value: 7, row: 17, col: 12},{value: 3, row: 17, col: 13},{value: 2, row: 18, col: 1},{value: 2, row: 18, col: 2},{value: 2, row: 18, col: 3},{value: 3, row: 18, col: 4},{value: 3, row: 18, col: 5},{value: 2, row: 18, col: 6},{value: 2, row: 18, col: 7},{value: 2, row: 18, col: 8},{value: 3, row: 18, col: 9},{value: 2, row: 18, col: 10},{value: 2, row: 18, col: 11},{value: 3, row: 18, col: 12},{value: 3, row: 18, col: 13},{value: 13, row: 19, col: 1},{value: 5, row: 19, col: 2},{value: 17, row: 19, col: 3},{value: 8, row: 19, col: 4},{value: 13, row: 19, col: 5},{value: 13, row: 19, col: 6},{value: 13, row: 19, col: 7},{value: 13, row: 19, col: 8},{value: 14, row: 19, col: 9},{value: 18, row: 19, col: 10},{value: 10, row: 19, col: 11},{value: 13, row: 19, col: 12},{value: 18, row: 19, col: 13},{value: 1, row: 20, col: 1},{value: 1, row: 20, col: 2},{value: 2, row: 20, col: 3},{value: 3, row: 20, col: 4},{value: 1, row: 20, col: 5},{value: 2, row: 20, col: 6},{value: 2, row: 20, col: 7},{value: 2, row: 20, col: 8},{value: 1, row: 20, col: 9},{value: 1, row: 20, col: 10},{value: 4, row: 20, col: 11},{value: 2, row: 20, col: 12},{value: 2, row: 20, col: 13},{value: 4, row: 21, col: 1},{value: 3, row: 21, col: 2},{value: 1, row: 21, col: 3},{value: 3, row: 21, col: 4},{value: 3, row: 21, col: 5},{value: 4, row: 21, col: 6},{value: 2, row: 21, col: 7},{value: 4, row: 21, col: 8},{value: 2, row: 21, col: 9},{value: 3, row: 21, col: 10},{value: 3, row: 21, col: 11},{value: 5, row: 21, col: 12},{value: 4, row: 21, col: 13},{value: 2, row: 22, col: 1},{value: 1, row: 22, col: 2},{value: 2, row: 22, col: 3},{value: 2, row: 22, col: 4},{value: 3, row: 22, col: 5},{value: 2, row: 22, col: 6},{value: 2, row: 22, col: 7},{value: 3, row: 22, col: 8},{value: 2, row: 22, col: 9},{value: 3, row: 22, col: 10},{value: 2, row: 22, col: 11},{value: 2, row: 22, col: 12},{value: 2, row: 22, col: 13},{value: 7, row: 23, col: 1},{value: 7, row: 23, col: 2},{value: 8, row: 23, col: 3},{value: 9, row: 23, col: 4},{value: 4, row: 23, col: 5},{value: 7, row: 23, col: 6},{value: 7, row: 23, col: 7},{value: 5, row: 23, col: 8},{value: 7, row: 23, col: 9},{value: 7, row: 23, col: 10},{value: 6, row: 23, col: 11},{value: 7, row: 23, col: 12},{value: 5, row: 23, col: 13},{value: 7, row: 24, col: 1},{value: 37, row: 24, col: 2},{value: 0, row: 24, col: 3},{value: 0, row: 24, col: 4},{value: 1, row: 24, col: 5},{value: 2, row: 24, col: 6},{value: 1, row: 24, col: 7},{value: 1, row: 24, col: 8},{value: 1, row: 24, col: 9},{value: 1, row: 24, col: 10},{value: 7, row: 24, col: 11},{value: 4, row: 24, col: 12},{value: 1, row: 24, col: 13},{value: 3, row: 25, col: 1},{value: 1, row: 25, col: 2},{value: 2, row: 25, col: 3},{value: 3, row: 25, col: 4},{value: 2, row: 25, col: 5},{value: 2, row: 25, col: 6},{value: 1, row: 25, col: 7},{value: 3, row: 25, col: 8},{value: 2, row: 25, col: 9},{value: 3, row: 25, col: 10},{value: 2, row: 25, col: 11},{value: 2, row: 25, col: 12},{value: 2, row: 25, col: 13}];



var rowp=[{value: 7, row: 1, col: 1},{value: 2, row: 1, col: 2},{value: 9, row: 1, col: 3},{value: 6, row: 1, col: 4},{value: 10, row: 1, col: 5},{value: 5, row: 1, col: 6},{value: 8, row: 1, col: 7},{value: 5, row: 1, col: 8},{value: 11, row: 1, col: 9},{value: 8, row: 1, col: 10},{value: 8, row: 1, col: 11},{value: 8, row: 1, col: 12},{value: 12, row: 1, col: 13},{value: 6, row: 2, col: 1},{value: 6, row: 2, col: 2},{value: 5, row: 2, col: 3},{value: 11, row: 2, col: 4},{value: 6, row: 2, col: 5},{value: 5, row: 2, col: 6},{value: 12, row: 2, col: 7},{value: 4, row: 2, col: 8},{value: 12, row: 2, col: 9},{value: 6, row: 2, col: 10},{value: 9, row: 2, col: 11},{value: 8, row: 2, col: 12},{value: 10, row: 2, col: 13},{value: 7, row: 3, col: 1},{value: 4, row: 3, col: 2},{value: 5, row: 3, col: 3},{value: 10, row: 3, col: 4},{value: 5, row: 3, col: 5},{value: 5, row: 3, col: 6},{value: 8, row: 3, col: 7},{value: 8, row: 3, col: 8},{value: 14, row: 3, col: 9},{value: 6, row: 3, col: 10},{value: 10, row: 3, col: 11},{value: 9, row: 3, col: 12},{value: 8, row: 3, col: 13},{value: 7, row: 4, col: 1},{value: 3, row: 4, col: 2},{value: 5, row: 4, col: 3},{value: 7, row: 4, col: 4},{value: 5, row: 4, col: 5},{value: 7, row: 4, col: 6},{value: 8, row: 4, col: 7},{value: 9, row: 4, col: 8},{value: 14, row: 4, col: 9},{value: 7, row: 4, col: 10},{value: 6, row: 4, col: 11},{value: 13, row: 4, col: 12},{value: 10, row: 4, col: 13},{value: 6, row: 5, col: 1},{value: 2, row: 5, col: 2},{value: 7, row: 5, col: 3},{value: 6, row: 5, col: 4},{value: 6, row: 5, col: 5},{value: 8, row: 5, col: 6},{value: 6, row: 5, col: 7},{value: 9, row: 5, col: 8},{value: 11, row: 5, col: 9},{value: 10, row: 5, col: 10},{value: 5, row: 5, col: 11},{value: 8, row: 5, col: 12},{value: 15, row: 5, col: 13},{value: 9, row: 6, col: 1},{value: 2, row: 6, col: 2},{value: 14, row: 6, col: 3},{value: 7, row: 6, col: 4},{value: 6, row: 6, col: 5},{value: 5, row: 6, col: 6},{value: 11, row: 6, col: 7},{value: 6, row: 6, col: 8},{value: 15, row: 6, col: 9},{value: 8, row: 6, col: 10},{value: 4, row: 6, col: 11},{value: 6, row: 6, col: 12},{value: 9, row: 6, col: 13},{value: 7, row: 7, col: 1},{value: 35, row: 7, col: 2},{value: 1, row: 7, col: 3},{value: 5, row: 7, col: 4},{value: 3, row: 7, col: 5},{value: 3, row: 7, col: 6},{value: 4, row: 7, col: 7},{value: 7, row: 7, col: 8},{value: 4, row: 7, col: 9},{value: 3, row: 7, col: 10},{value: 13, row: 7, col: 11},{value: 8, row: 7, col: 12},{value: 7, row: 7, col: 13},{value: 6, row: 8, col: 1},{value: 4, row: 8, col: 2},{value: 7, row: 8, col: 3},{value: 6, row: 8, col: 4},{value: 6, row: 8, col: 5},{value: 6, row: 8, col: 6},{value: 8, row: 8, col: 7},{value: 9, row: 8, col: 8},{value: 13, row: 8, col: 9},{value: 7, row: 8, col: 10},{value: 12, row: 8, col: 11},{value: 8, row: 8, col: 12},{value: 9, row: 8, col: 13},{value: 4, row: 9, col: 1},{value: 4, row: 9, col: 2},{value: 5, row: 9, col: 3},{value: 5, row: 9, col: 4},{value: 11, row: 9, col: 5},{value: 4, row: 9, col: 6},{value: 13, row: 9, col: 7},{value: 8, row: 9, col: 8},{value: 13, row: 9, col: 9},{value: 5, row: 9, col: 10},{value: 12, row: 9, col: 11},{value: 6, row: 9, col: 12},{value: 10, row: 9, col: 13},{value: 9, row: 10, col: 1},{value: 4, row: 10, col: 2},{value: 5, row: 10, col: 3},{value: 7, row: 10, col: 4},{value: 8, row: 10, col: 5},{value: 6, row: 10, col: 6},{value: 10, row: 10, col: 7},{value: 6, row: 10, col: 8},{value: 10, row: 10, col: 9},{value: 4, row: 10, col: 10},{value: 10, row: 10, col: 11},{value: 11, row: 10, col: 12},{value: 11, row: 10, col: 13},{value: 9, row: 11, col: 1},{value: 16, row: 11, col: 2},{value: 5, row: 11, col: 3},{value: 4, row: 11, col: 4},{value: 5, row: 11, col: 5},{value: 7, row: 11, col: 6},{value: 4, row: 11, col: 7},{value: 12, row: 11, col: 8},{value: 8, row: 11, col: 9},{value: 5, row: 11, col: 10},{value: 10, row: 11, col: 11},{value: 8, row: 11, col: 12},{value: 6, row: 11, col: 13},{value: 7, row: 12, col: 1},{value: 4, row: 12, col: 2},{value: 9, row: 12, col: 3},{value: 6, row: 12, col: 4},{value: 6, row: 12, col: 5},{value: 6, row: 12, col: 6},{value: 13, row: 12, col: 7},{value: 7, row: 12, col: 8},{value: 15, row: 12, col: 9},{value: 6, row: 12, col: 10},{value: 6, row: 12, col: 11},{value: 6, row: 12, col: 12},{value: 9, row: 12, col: 13},{value: 8, row: 13, col: 1},{value: 2, row: 13, col: 2},{value: 11, row: 13, col: 3},{value: 3, row: 13, col: 4},{value: 6, row: 13, col: 5},{value: 9, row: 13, col: 6},{value: 9, row: 13, col: 7},{value: 6, row: 13, col: 8},{value: 14, row: 13, col: 9},{value: 9, row: 13, col: 10},{value: 5, row: 13, col: 11},{value: 9, row: 13, col: 12},{value: 7, row: 13, col: 13},{value: 7, row: 14, col: 1},{value: 8, row: 14, col: 2},{value: 4, row: 14, col: 3},{value: 8, row: 14, col: 4},{value: 6, row: 14, col: 5},{value: 4, row: 14, col: 6},{value: 10, row: 14, col: 7},{value: 8, row: 14, col: 8},{value: 12, row: 14, col: 9},{value: 4, row: 14, col: 10},{value: 10, row: 14, col: 11},{value: 7, row: 14, col: 12},{value: 13, row: 14, col: 13},{value: 8, row: 15, col: 1},{value: 3, row: 15, col: 2},{value: 7, row: 15, col: 3},{value: 5, row: 15, col: 4},{value: 6, row: 15, col: 5},{value: 8, row: 15, col: 6},{value: 7, row: 15, col: 7},{value: 8, row: 15, col: 8},{value: 11, row: 15, col: 9},{value: 9, row: 15, col: 10},{value: 7, row: 15, col: 11},{value: 10, row: 15, col: 12},{value: 11, row: 15, col: 13},{value: 8, row: 16, col: 1},{value: 2, row: 16, col: 2},{value: 12, row: 16, col: 3},{value: 5, row: 16, col: 4},{value: 6, row: 16, col: 5},{value: 8, row: 16, col: 6},{value: 11, row: 16, col: 7},{value: 5, row: 16, col: 8},{value: 13, row: 16, col: 9},{value: 10, row: 16, col: 10},{value: 4, row: 16, col: 11},{value: 7, row: 16, col: 12},{value: 9, row: 16, col: 13},{value: 10, row: 17, col: 1},{value: 3, row: 17, col: 2},{value: 9, row: 17, col: 3},{value: 7, row: 17, col: 4},{value: 6, row: 17, col: 5},{value: 8, row: 17, col: 6},{value: 6, row: 17, col: 7},{value: 7, row: 17, col: 8},{value: 11, row: 17, col: 9},{value: 9, row: 17, col: 10},{value: 4, row: 17, col: 11},{value: 13, row: 17, col: 12},{value: 7, row: 17, col: 13},{value: 5, row: 18, col: 1},{value: 5, row: 18, col: 2},{value: 8, row: 18, col: 3},{value: 8, row: 18, col: 4},{value: 7, row: 18, col: 5},{value: 5, row: 18, col: 6},{value: 8, row: 18, col: 7},{value: 7, row: 18, col: 8},{value: 14, row: 18, col: 9},{value: 6, row: 18, col: 10},{value: 7, row: 18, col: 11},{value: 10, row: 18, col: 12},{value: 12, row: 18, col: 13},{value: 7, row: 19, col: 1},{value: 3, row: 19, col: 2},{value: 10, row: 19, col: 3},{value: 4, row: 19, col: 4},{value: 6, row: 19, col: 5},{value: 6, row: 19, col: 6},{value: 8, row: 19, col: 7},{value: 7, row: 19, col: 8},{value: 12, row: 19, col: 9},{value: 10, row: 19, col: 10},{value: 5, row: 19, col: 11},{value: 8, row: 19, col: 12},{value: 13, row: 19, col: 13},{value: 6, row: 20, col: 1},{value: 5, row: 20, col: 2},{value: 7, row: 20, col: 3},{value: 11, row: 20, col: 4},{value: 5, row: 20, col: 5},{value: 7, row: 20, col: 6},{value: 7, row: 20, col: 7},{value: 6, row: 20, col: 8},{value: 9, row: 20, col: 9},{value: 6, row: 20, col: 10},{value: 15, row: 20, col: 11},{value: 8, row: 20, col: 12},{value: 8, row: 20, col: 13},{value: 10, row: 21, col: 1},{value: 7, row: 21, col: 2},{value: 3, row: 21, col: 3},{value: 6, row: 21, col: 4},{value: 6, row: 21, col: 5},{value: 8, row: 21, col: 6},{value: 5, row: 21, col: 7},{value: 10, row: 21, col: 8},{value: 8, row: 21, col: 9},{value: 6, row: 21, col: 10},{value: 7, row: 21, col: 11},{value: 13, row: 21, col: 12},{value: 11, row: 21, col: 13},{value: 7, row: 22, col: 1},{value: 3, row: 22, col: 2},{value: 7, row: 22, col: 3},{value: 5, row: 22, col: 4},{value: 8, row: 22, col: 5},{value: 7, row: 22, col: 6},{value: 9, row: 22, col: 7},{value: 9, row: 22, col: 8},{value: 11, row: 22, col: 9},{value: 9, row: 22, col: 10},{value: 7, row: 22, col: 11},{value: 9, row: 22, col: 12},{value: 9, row: 22, col: 13},{value: 8, row: 23, col: 1},{value: 8, row: 23, col: 2},{value: 9, row: 23, col: 3},{value: 8, row: 23, col: 4},{value: 3, row: 23, col: 5},{value: 7, row: 23, col: 6},{value: 9, row: 23, col: 7},{value: 5, row: 23, col: 8},{value: 11, row: 23, col: 9},{value: 8, row: 23, col: 10},{value: 7, row: 23, col: 11},{value: 9, row: 23, col: 12},{value: 7, row: 23, col: 13},{value: 11, row: 24, col: 1},{value: 56, row: 24, col: 2},{value: 0, row: 24, col: 3},{value: 0, row: 24, col: 4},{value: 1, row: 24, col: 5},{value: 3, row: 24, col: 6},{value: 2, row: 24, col: 7},{value: 2, row: 24, col: 8},{value: 1, row: 24, col: 9},{value: 2, row: 24, col: 10},{value: 12, row: 24, col: 11},{value: 7, row: 24, col: 12},{value: 2, row: 24, col: 13},{value: 11, row: 25, col: 1},{value: 4, row: 25, col: 2},{value: 8, row: 25, col: 3},{value: 8, row: 25, col: 4},{value: 6, row: 25, col: 5},{value: 7, row: 25, col: 6},{value: 5, row: 25, col: 7},{value: 10, row: 25, col: 8},{value: 10, row: 25, col: 9},{value: 9, row: 25, col: 10},{value: 7, row: 25, col: 11},{value: 8, row: 25, col: 12},{value: 9, row: 25, col: 13}];




//bucket definitions for heat map
// how many splits
var buckets = 9;
// colors for splits
//blues
//var colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]; 
//oranges
var colors = ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"];


      //layout space for d3
      var margin = { top: 50, right: 0, bottom: 50, left: 50 },
          width = 600 - margin.left - margin.right,
          height = 1500 - margin.top - margin.bottom
      
      //figure out gridsize based on number of rows and cols and layout space     
      var gridmax;
        if (width/cols.length < height/rows.length) { 
            gridmax = width/cols.length;
        } else {
            gridmax = height/rows.length;
        }


      //create tile grid size
      var gridSize = Math.floor(gridmax);
     
      //size of legend elements
      var legendElementWidth = gridSize*2  ;  

      //create svg and position
      var svg = d3.select("#chart").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      //place row labels for grid
      var rowLabels = svg.selectAll(".rowLabel")
          .data(rows)
          .enter().append("text")
            .text(function (d) { return d; })
            .attr("x", 0)
            .attr("y", function (d, i) { return i * gridSize; })
            .style("text-anchor", "end")
            .attr("transform", "translate(-6," + gridSize / 1.5 + ")")
            .attr("class", "gridlabels");

      //place col labels for grid
      var colLabels = svg.selectAll(".colLabel")
          .data(cols)
          .enter().append("text")
            .text(function(d) { return d; })
            .attr("x", function(d, i) { return i * gridSize; })
            .attr("y", 0)
            .style("text-anchor", "middle")
            .attr("transform", "translate(" + gridSize / 2 + ", -6)")
            .attr("class", "gridlabels");

     

     //create function for execution in transition between datasets
     var heatmapChart = function(newdata) {

          //set up color scaling for dataset
          var colorScale = d3.scale.quantile()
              .domain([0, buckets - 1, d3.max(newdata, function (d) { return d.value; })])
              .range(colors);


          //assign new data to tiles
          var tiles = svg.selectAll(".tiles").data(newdata);

          //enter tiles to d3
          tiles.enter().append("rect")
              .attr("x", function(d) { return (d.col - 1) * gridSize; })
              .attr("y", function(d) { return (d.row - 1) * gridSize; })
              .attr("rx", 4)
              .attr("ry", 4)
              .attr("class", "tileborder")
              .attr("width", gridSize)
              .attr("height", gridSize)
              .style("fill", colors[0]);

          //transition tiles
          tiles.transition().duration(1000)
              .style("fill", function(d) { return colorScale(d.value); });
         
          //remove tiles
          tiles.exit().remove();



          //repeat tile block but for values
          var values = svg.selectAll(".values").data(newdata);

          values.enter().append("text")
              .attr("x", function(d) { return (d.col - 1) * gridSize; })
              .attr("y", function(d) { return (d.row - 1) * gridSize; })
              .attr("rx", 4)
              .attr("ry", 4)
              .attr("class", "scorelabels")
              .text(function (d) { return d.value; })
              .style("text-anchor", "middle")
              .attr("transform", "translate(" + (gridSize) / 2 + "," + (gridSize) / 1.5 + ")")

              ;
    
          values.transition().duration(1000);
         
          values.exit().remove();



          //repeat tile block but for legend
          var legend = svg.selectAll(".legend")
              .data([0].concat(colorScale.quantiles()), function(d) { return d; });

          legend.enter().append("g")
              .attr("class", "legend");

          legend.append("rect")
            .attr("x", function(d, i) { return legendElementWidth * i; })
            .attr("y", gridSize*(rows.length+1))
            .attr("width", legendElementWidth)
            .attr("height", gridSize / 2)
            .style("fill", function(d, i) { return colors[i]; });

          legend.append("text")
            .attr("class", "legendlabels")
            .text(function(d) { return "≥ " + Math.round(d); })
            .attr("x", function(d, i) { return legendElementWidth * i; })
            .attr("y", gridSize*(rows.length+2));

          legend.exit().remove();
    };


    //initial run of the function
    heatmapChart(freq);

    //run function depending on input selected in drop down list
    d3.select('#opts').
        on('change', function() {
            var newData = eval(d3.select(this).property('value'));
            heatmapChart(newData);
    }); 

      

    </script>
  </body>
</html>
            
          
!
999px
Loading ..................

Console