Table Chart

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>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
<script src="//rawgit.com/DarkMarmot/kodama/master/kodama.js"></script>
<script src="//rawgit.com/ramnathv/5c5181017a48b41beb9b/raw/2c76c805a657c22c2aae0c3dfa124dcaef0e9784/flatUIColors.js"></script>
<div class="container-fluid" id="main">
    <div class="row">
        <div class="col-xs-12 col-md-6">
           <div class="panel panel-default panel-light">
                   <div id="chart" class='tablechart'></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#main{
  margin-top: 20px;
}
.tablechart .x-axis-layer path,
.tablechart .x-axis-layer line{
  fill: none;
  stroke: #ccc;
}
.tablechart .y-axis-layer path,
.tablechart .y-axis-layer line{
  fill: none;
}
.tablechart svg text{
  font-size: 10px;
}
.tablechart rect.cell{
  /*fill: #eee; */
}
.tablechart rect.active{
  fill: steelblue;
}
body {
  font-family: "Open Sans", "Helvetica";
}
.tablechart .x-axis-layer text{
  text-anchor: start !important;
  font-size: 14px;
  cursor: pointer;
  fill: #B5B5B5;
}
.tablechart .y-axis-layer text{
  font-size: 14px ;
  fill: #B5B5B5;
  dominant-baseline: auto;
}
.tablechart .x-axis-layer text.sorted{
  fill: darkgreen;
  font-weight: bold;
}
.tablechart text.labelsF{
  fill: #aaa;
  font-size: 12px;
  alignment-baseline: auto;
}
.panel-light{
  background: rgb(251, 251, 251)
}
.tablechart .y-axis-layer .tick:first-child text{
   fill: darkgreen;
   font-weight: bold;
}

CoffeeScript

gridHeight = ["SVM", "Logistic", "Random Forest"]
numBins = ["ME", "RMSE", "MAPE"]

expand_grid = (x, y) ->
  d3.merge(x.map (x_) -> y.map (y_) -> {x: x_, y: y_, v: Math.random()})
    
data2 = [
 {y: "Survived", x: "Recall", v: 0.9},
 {y: "Survived", x: "Precision", v: 0.8},
 {y: "Survived", x: "F1-Score", v: 2*0.9*0.8/(0.9 + 0.8)},
 {y: "Died", x: "Recall", v: 0.7},
 {y: "Died", x: "Precision", v: 0.6},
 {y: "Died", x: "F1-Score", v: 2*0.7*0.6/(0.7 + 0.6)},
]
data2.forEach (d) ->
  d.v2 = d.v
data3 = expand_grid(numBins, gridHeight)

bestModels = {}
d3.uniq(data3, (d) -> d.x).forEach (k) ->
  d2 = data3
    .filter((d) -> d.x is k)
    .sort((a, b) -> d3.ascending(a.v, b.v))
  mm = d3.max(d2, (_) -> _.v)
  d2.forEach (p) ->
    p.v2 = p.v/mm
  console.log(JSON.stringify(d2))
  #  .map((d) -> d.y)
  #bestModels[k] = d2[0]
    
#console.log JSON.stringify(data)

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: Math.round(d.v*100)
    theme: "kodama-dark"
    distance: 0
  sel.call d3.kodama.tooltip().format(makeTipData)

circularGridConstructor = (skeleton) ->
  L = skeleton.getLayerOrganizer()
  S =
    x: d3.scale.ordinal()
    y: d3.scale.ordinal()
  A =
    x: (d) -> d.x
    y: (d) -> d.y
    c: (d) -> d.c
  L.create(['x-axis', 'y-axis', 'cells'])
  visualize = ->
 ...