D3 + Keen Dashboard

by ramnathv

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">
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<script src="//rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
<script src="//imsky.github.io/holder/holder.js"></script>
<script src="//dl.dropbox.com/u/40036711/jquery.hovercard.min.js"></script>
<div class="container-fluid">
  <div class="row" id='main'>
  </div>
  <div class="row">
      <div class="col-sm-3 col-xs-8">
          <div class="chart-wrapper">
              <div class="chart-stage">
                  <span class="metric">60</span>
              </div>
              <div class="items">
                      <div class="col-xs-4"><span class="title">Num Trees</span></div>
                      <div class="col-xs-4"><span class="title">Num Errors</span></div>
                      <div class="col-xs-4"><span class="title">OOB</span></div>
                  </div>
          </div>
      </div>
  </div>
</div>

CSS

.container-fluid {
  margin-top: 10px;
}

.chart-notes ul{
  margin-bottom: 0px;
}
.chart-stage h1,
.chart-stage b{
  text-align: center;   
}
.statistic{
  font-size: 5em;
  line-height: 1em;
  text-align: center;
  color: steelblue;
  font-weight: normal;
}
.glyphicon, span.number{
   vertical-align: middle;
}
span.measure{
  display: block;
  opacity: 0.6;
  font-size: 0.9em;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
}
.hc-name{
  font-weight: normal !important;
}
div.chart-notes{
  text-align: center;
}

.metric{
  text-align: center;
  display: block;
  font-size: 3em;
  margin-bottom: 20px;
}
.items{
  padding-top: 10px;
  min-height: 60px;
  background: #eee;
}
.items span.title{
    font-size: 0.7em;
    text-transform: uppercase;
}
.items .col-xs-4{
    border-right: 1px solid lightgray;
    
}

CoffeeScript

d3k = d3k || {}
d3k.panel = ->
  defaults = 
    panels: ["title", "stage", "notes"]
    title: ""
    stage: ""
    notes: ""
    
  opts = extend(arguments[0], defaults)
  exports = (selection) ->
    selection.each (data) ->
      panel = d3.select(@)
        .selectAll("div.chart-wrapper")
        .data(data)
      panelEnter = panel.enter()
        .append("div.chart-wrapper")
      opts.panels.forEach (d) ->
          panelEnter
            .append("div.chart-#{d}")
            .html opts[d]
      
   exports.opts = opts; createAccessors(exports)
   exports
            
cols = d3.select('#main').selectAll("div.col-sm-4.col-xs-4.col-md-4")
  .data([1, 2])
    
cols.enter().append("div.col-sm-4.col-xs-4.col-md-4")
 

foo = (sel, data) ->
   sel.append('ul.list-inline.metrics')
    .selectAll('li')
    .data(data).enter()
    .append('li')
    .append('small')
    .attr
      class: (d, i) -> "item-#{d}"
      measure: (d) -> d
    .text (d) -> d
    
detail =
  MAE:
    value: 45
    title: "Mean Absolute Error"
    definition: '<p style="text-align:justify">Mean Absolute Error is the average over the verification sample of the absolute values of the differences between forecast and the corresponding observation. The MAE is a linear score which means that all the individual differences are weighted equally in the average.</p>'
  MAPE:
    value: 20
    title: "Mean Abs Perc Error"
    definition: '<p style="text-align:justify">Mean Absolute Percentage Error is the average over the verification sample of the absolute values of the <b>percent</b> differences between forecast and the corresponding observation.</p>'
  MASE:
    value: 30
    title: "Mean Abs Scaled Error"
    definition: '<p style="text-align:justify;"> Mean Absolute Scaled Error is the average over the verification sample of the absolute values of the ratio of the forecast error to the average forecast error of the one-step naive forecast<p>'

    
detail =
  MAE: "Mean Abs Error"
  MAPE: "Mean...