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>
<div class="container-fluid">
  <div class="row" id='main'></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{
}

.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;
    
}

.details
{
    color:#777;        
    line-height:1.5em;    
    background:#fff;    
    border:solid 1px #ddd;      
    position:absolute;
    width:300px;
    border-radius:3px;        
    left: -5px;
    top:-10px;
    z-index:50;
    padding:2em 10px 10px;
    box-shadow:5px 5px 5px #888;
    opacity: 0;
}

div.chart-stage{
  text-align: center;
}

span.measure2{
  display: block;
  opacity: 0.6;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0px;
}
.measure{
  cursor: pointer;
}
.active small{
}
.active {
  background: steelblue;
  border-radius: 5px;
  color: whitesmoke;
}
.active:hover{
  color: black;
}
.chart-wrapper .chart-stage{
  text-align: center;
  padding-left: 15px;
}
.metrics{
  margin-top: 8px;
}
.chart-wrapper .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
            

 
foo = (sel, data) ->
   sel.append('ul.list-inline.metrics')
    .selectAll('li')
    .data(data).enter()
    .append('li.preview')
      .style('position', 'relative')
      .classed("active", (d, i) -> i is 0)
    .append('small').style('position', 'relative')
    .attr
      class: (d, i) -> "measure item-#{d}"
      measure: (d) -> d
    .text (d) -> d

    
d3u = d3u || {}
d3u.hovercard = ->
  exports = (selection) ->
    selection.each (data) ->
      main = d3.select(this)
      det = main
        .selectAll('.details').data([data])
      d3.select(this).on "mouseover", ->
        main.select(".measure")
          .style('z-index', 100)
        det.enter().append("span")
          .attr("class", "details")
        det.html((d) -> d)
        det.transition().duration(500)
          .style('opacity', 1)
      d3.select(this).on "mouseout", ->
         main.select(".measure")
           .style('z-index', 1)
         det.transition().duration(500)
           .style('opacity', 0)
         det.remove()
         
    
error =
  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...