D3 Heatmap

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/lib/bootstrap/dist/css/bootstrap.min.css">
<script src="//rawgit.com/Caged/d3-tip/master/index.js"></script>
<link rel="stylesheet" href="//rawgit.com/Caged/d3-tip/master/examples/example-styles.css">
<script src="//rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div id="chart1"></div>
        </div>
    </div>
</div>

CoffeeScript

data = [[1,-0.8522,-0.8476,-0.7762,0.6812,-0.8677,0.4187,0.664,0.5998,0.4803,-0.5509],[-0.8522,1,0.902,0.8324,-0.6999,0.7825,-0.5912,-0.8108,-0.5226,-0.4927,0.527],[-0.8476,0.902,1,0.7909,-0.7102,0.888,-0.4337,-0.7104,-0.5912,-0.5556,0.395],[-0.7762,0.8324,0.7909,1,-0.4488,0.6587,-0.7082,-0.7231,-0.2432,-0.1257,0.7498],[0.6812,-0.6999,-0.7102,-0.4488,1,-0.7124,0.0912,0.4403,0.7127,0.6996,-0.0908],[-0.8677,0.7825,0.888,0.6587,-0.7124,1,-0.1747,-0.5549,-0.6925,-0.5833,0.4276],[0.4187,-0.5912,-0.4337,-0.7082,0.0912,-0.1747,1,0.7445,-0.2299,-0.2127,-0.6562],[0.664,-0.8108,-0.7104,-0.7231,0.4403,-0.5549,0.7445,1,0.1683,0.206,-0.5696],[0.5998,-0.5226,-0.5912,-0.2432,0.7127,-0.6925,-0.2299,0.1683,1,0.7941,0.0575],[0.4803,-0.4927,-0.5556,-0.1257,0.6996,-0.5833,-0.2127,0.206,0.7941,1,0.2741],[-0.5509,0.527,0.395,0.7498,-0.0908,0.4276,-0.6562,-0.5696,0.0575,0.2741,1]]


data2 = d3.merge(data)


row = (i, ncol) ->
  Math.floor(i/ncol)

col = (i, nrow) ->
  i % nrow

ncol = data.length
nrow = data[0].length

  
dim = 20
gap = 0
O =
  margin: {top: 40, left: 40, right: 20, bottom: 20}
  width: dim*ncol
  height: dim*nrow
    
O.m = {t: 40, l: 40, r: 0, b: 20}
  
O.W = O.width + O.margin.left + O.margin.right
O.H = O.height + O.margin.top + O.margin.bottom


A =
  x: (d, i) -> col(i, nrow)
  y: (d, i) -> row(i, ncol)
  
  
  
S = 
  x: d3.scale.ordinal()
  y: d3.scale.ordinal()
  c: d3.scale.linear().range(["slateblue", "white", "crimson"])




display = d3.select('#display')
#display.append("div").attr("id", "chart1")
#display.append("div").attr("id", "chart2")


S.x.domain d3.range(ncol)
S.y.domain d3.range(nrow)
S.c.domain([-1, 0, 1]).interpolate(d3.interpolateHsl)

###
svg = d3.select('#chart1').append('svg')
  .attr({width: O.W, height: O.H})
  .append("g")
  .attr("transform", "translate(#{O.margin.left}, #{O.margin.top})")
###

console.log O
sel = d3.select("#chart1")
svg = createSVG(sel, '100%', parseInt(d3.select("#chart1").innerWidth()))
  .call(updateOpts, O)
 ...