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">
  </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;
}

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.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: "Mean Abs Error"
  MAPE: "Mean Abs Perc Error"
  MASE: "Mean Abs Scaled Error"
    
cols.each (d, i) ->
  main = d3.select(@)
  myPanel = d3k.panel()
    .panels(['stage', 'notes'])
    .stage('<span class="measure">MAE</span><div class="statistic"><span class="glyphicon glyphicon-exclamation-sign"></span> <span class="number">45</span></div>')
  d3.select(@)
    .datum([d])
    .call myPanel
    
  d3.select(@)
    .select(".chart-notes")
    .call(foo, ['MAE', 'MAPE', 'MASE'])
    
  d3.select(@)
    .selectAll(".chart-notes li small")
    .on "mouseover", (d_, i_) ->
       txt = d3.select(@).attr('measure')
       main.select(".measure")
        .text detail[txt]
###
d3.select(".chart-title")
  .append("select.form-control")
  .selectAll("option").data(['MAE', 'MAPE'])
  .enter()
  .append('option')
  .text (d) -> d
###
# These should be in a json file or a js file so that they can be updated independently. I could wrap them up in a function so that they don't pollute namespace
hcard = {}
hcard.MAE = '<p...