Clickable Cells

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>
<script src="//rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//gka.github.io/chroma.js/vendor/chroma-js/chroma.min.js"></script>
<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/DarkMarmot/kodama/master/kodama.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container-fluid" id="main">
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <div id="chart"></div>
            <p>Total Number of Chips Placed is <span id='chips'>0</span></p>
            <button class="btn btn-default" id='getData'>Get Data</button>
        </div>
    </div>
</div>

CSS

#main{
  margin-top: 20px;
}
.x-axis-layer path,
.x-axis-layer line{
  fill: none;
}
.y-axis-layer path,
.y-axis-layer line{
  fill: none;
}
svg text{
  font-size: 10px;
}
rect.cell{
  fill: #eee;
}
rect.active{
  fill: steelblue;
}
body {
  font-family: "Open Sans", "Helvetica";
}

CoffeeScript

url = '//rawgit.com/bricedev/f80fdbc2c03dbc1ae4e8/raw/9299fb40cb4b59f2b9abd4ace0fd6ca534f8890e/data.csv'

gridHeight = d3.range(10)
numBins = d3.range(10)

defaultThemeConfig = 
  frame: 
    padding: "6px",
    #background: 'linear-gradient(to top, rgb(16, 74, 105) 0%, rgb(14, 96, 125) 90%)',
    background: "black",
    'font-family': '"Helvetica Neue", Helvetica, Arial, sans-serif',
    #'border': '1px solid rgb(57, 208, 204)',
    color: 'rgb(245,240,220)',
    'border-radius': '4px',
    'font-size': '12px',
    'box-shadow': '0px 1px 3px rgba(0,20,40,.5)'
    title: {'text-align': 'center', 'padding': '4px'},
    item_title: {'text-align': 'right', 'color': 'rgb(220,200,120)'},
    item_value: {'padding': '1px 2px 1px 10px', 'color': 'rgb(234, 224, 184)'}
    options: null

d3.kodama.themeRegistry('kodama-dark', defaultThemeConfig)

attachKodamaTip = (sel) ->
  makeTipData = (d) ->
    title: """
       #{d.y} values between
       #{vals[d.x]} and #{vals[d.x + 1]}
    """
    theme: "kodama-dark"
    distance: 10
  sel.call d3.kodama.tooltip().format(makeTipData)

vals = d3.range(10).map (d) -> d*10


expand_grid = (x, y) ->
  d3.merge(x.map (x_) -> y.map (y_) -> {x: x_, y: y_})

data = expand_grid(numBins, gridHeight)

getData = (layers) ->
   dat = layers.get('cells')
     .selectAll('.active')
     .data()
   dat2 = d3.nest()
     .key((d) -> d.x)
     .rollup((d) -> d3.max(d, (d_) -> d_.y) + 1)
     .map(dat)  
        
renderAxes = (L, S, O) ->
  xAxis = d3.svg.axis()
    .scale(S.x.domain(vals))
    .orient('bottom')

  L.get('x-axis')
    .translate([-S.x.rangeBand()/2, O.H])
    .call(xAxis)
  yAxis = d3.svg.axis()
    .scale(S.y)
    .orient('left')
  L.get('y-axis')
    .translate([0, S.y.rangeBand()/2])
    .call(yAxis)    

circularGridConstructor = (skeleton) ->
  layers = skeleton.getLayerOrganizer()
  S =
    x: d3.scale.ordinal()
    y: d3.scale.ordinal()
    c: d3.scale.linear().range(["lightyellow", "orange"])
        .domain([0, 1])
    ...