D3 Components for Field Summary

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.2/yeti/bootstrap.min.css">
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="//rawgit.com/ramnathv/7c38c8374c0f8c1090c9/raw/da87ea1a52ac0efc97aef684aa7209b4532ffb16/iris.js"></script>
<div class="container">
    <div class="col-xs-5" id="sidebar">
        
    </div>
</div>

CSS

.container {
  margin-top: 40px;
}

.panel {
  margin-bottom: 0px;
  min-height: 100px;
  min-width: 250px;
}

CoffeeScript

createAccessors = (visExport) ->
  for n of visExport.opts
    continue  unless visExport.opts.hasOwnProperty(n)
    visExport[n] = ((n) ->
      (v) ->
        (if arguments.length then (visExport.opts[n] = v
        this
        ) else visExport.opts[n])
    )(n)
  return

# http://gomakethings.com/vanilla-javascript-version-of-jquery-extend/
extend = (defaults, options) ->
  extended = {}
  prop = undefined
  for prop of defaults
    `prop = prop`
    if Object::hasOwnProperty.call(defaults, prop)
      extended[prop] = defaults[prop]
  for prop of options
    `prop = prop`
    if Object::hasOwnProperty.call(options, prop)
      extended[prop] = options[prop]
  extended
        
d3.table = (data) ->
  table = ["<b>", data.state, "</b>", "<table style='line-height:2em;'>"]
  d3.entries(data).forEach (d) ->
    table.push("<tr><td>" + d.key + "</td><td>&nbsp</td><td>" + d.value + "</td></tr>")
  table.join("") + "</table>"


d3.uniq = (data, fun) ->
  if typeof fun is 'function'
    v_ = data.map(fun)
  else
    v_ = data.map (d) -> d[fun]
  d3.set(v_).values()

d3.ui = d3.ui || {}
d3.ui.panel = () ->
  defaults = {panels: ["heading", "body"], type: "default"}
  opts = arguments[0] || defaults
  exports = (selection) ->
    selection.each (data) ->
      panel = d3.select(@)
        .selectAll("div.panel.panel-#{opts.type}").data([{}])
      panelEnter = panel.enter()
        .append("div.panel.panel-#{opts.type}")
        
      subPanels = panelEnter.selectAll("div")
        .data(opts.panels)
      subPanels.enter().append("div")
      subPanels.attr
        class: (d) -> "panel-#{d}"
      panel
  exports.opts = opts; createAccessors(exports)
  exports
            
dashboard = {}
dashboard.sidebar = ->
  exports = (selection) ->
    selection.each (data) ->
      panelUI = d3.ui.panel().panels(['body'])
      panels = d3.select(this)
        .selectAll(".panels")
        .data(d3.entries(data))
     
      panels.enter().append("div.panels")
     ...