Responsive Experiments D3 Part 2

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/yeti/bootstrap.min.css">
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="//rawgit.com/Caged/d3-tip/master/index.js"></script>
<link rel="stylesheet" href="//rawgit.com/Caged/d3-tip/master/examples/example-styles.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//rawgit.com/sindresorhus/screenfull.js/gh-pages/dist/screenfull.min.js"></script>
<div class="container">
    <div class="row">
       <div class="col-xs-12">
           <div id="main"></div>
       </div>
    </div>
</div>

CSS

.container {
   margin-top: 100px;
}

.d3-tip{
  font-weight: normal;
  font-size: 12px;

  line-height: 1.4em;
}


/*
.panel {
   margin-bottom: 0px;
}
*/

#new{
  min-height: 300px;
}
.bar:hover {
  fill: darkred;
}
.panel:hover{
  background: whitesmoke;
}
/* hack to prevent space between arrow and tooltip rect */
.d3-tip.n:after {
    margin: -3px 0 0 0;
}

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.ui = d3.ui || {}
d3.ui.panel = () ->
  defaults = {panels: ["heading", "body"], type: "default"}
  opts = extend(arguments[0], defaults)
  exports = (selection) ->
    selection.each (data) ->
      panel = d3.select(@)
        .selectAll("div.panel")
        .data(data)
      panelEnter = panel.enter()
        .append("div.panel.panel-#{opts.type}")
      
      opts.panels.forEach (d) ->
         panelEnter.append("div.panel-#{d}") 
      panel
  exports.opts = opts; createAccessors(exports)
  exports
            
attachTooltip = (sel, opts) ->
  tip = d3.tip()
    .attr('class', 'd3-tip')
    .html opts.html
    
  d3.select(sel.node().parentNode).call(tip)
  sel.on "mouseover", tip.show
  sel.on "mouseout", tip.hide
  sel

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.table = (data, title) ->
  #table = ["<b>", title, "</b>", "<table>"]
  table = ["<table>"]
  d3.entries(data).forEach (d) ->
    table.push("<tr><td>" + d.key + "</td><td>&nbsp</td><td>" + d.value + "</td></tr>")
  table.join("") + "</table>"

d3.selection.prototype.innerWidth = ->
  parent = d3.select(this.node().parentNode)
  width = parseInt(parent.style('width'), 10)
  left = parseInt(parent.style('padding-left'),...