d3kit Histogram

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>
<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">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/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="//rawgit.com/DarkMarmot/kodama/master/kodama.js"></script>
<div class="container-fluid" id="main">
    <div class="chart-wrapper">
        <div class="chart-title">
           Histogram
           <span class='glyphicon glyphicon-info-sign'></span>
           
              <span class="expand glyphicon glyphicon-resize-full pull-right"></span>
           
        </div>
        <div class="chart-stage">
           <div id="histogram">
           </div>
        </div>
        </div>
    </div>

CSS

.y-axis-layer line,
.y-axis-layer path{
   fill: none;
}
.y-axis-layer line{
  stroke: #ddd;
}
.y-axis-layer text{
  font-size: 10px;
  fill: #aaa;
  pointer-events: all;
}
.x-axis-layer line,
.x-axis-layer path{
   fill: none;
}
.x-axis-layer line{
  stroke: #ddd;
}
.x-axis-layer text{
  font-size: 10px;
  fill: #aaa;
  pointer-events: all;
}
body{
  font-family: Helvetica;
}
#main{
  margin-top: 20px;
}
.histtip{
  text-align: center;
  line-height: 1.5em;
  font-weight: normal;
  font-size: 11px;
}
.expand{
  cursor: pointer;
}

ul.infobox{
  margin-left: 5px;
}

ul.infobox li.active {
  background: steelblue;
  border-radius: 3px;
  color: whitesmoke;
  padding: 6px;
}
ul.infobox li{
  color: gray;
  font-size: 11px;
  cursor: pointer;
}
ul.infobox{
  margin-top: 10px;
  margin-left: 20px;
}

CoffeeScript

d3bs = {} || d3bs
d3bs.inlinelist = ->
  exports = (selection) ->
    selection.each (data) ->
      k = Object.keys(data)
      ul = d3.select(@).selectAll(".list-inline").data([k])
      ul.enter().append("ul.infobox.list-inline")
      li = ul.selectAll(".list-inline-li").data(k)
      li.enter().append("li.list-inline-li")
      li.classed "active", (d, i) -> i is 0
      li.text (d) -> d
      li.on "click", ->
        li.classed("active", false)
        d3.select(@).classed("active", true)
      
makeHistogram = (el, data) ->
    makeTipData = (d) ->
       title: "#{d.x} to #{d.x + d.dx}<br/>#{d.y} instances"
       theme: "kodama"
    histConstructor = (skeleton) ->
      S =
        x: d3.scale.linear()
        y: d3.scale.linear()
      A =
        x: (d) -> d.x
        y: (d) -> d.y
      L = skeleton.getLayerOrganizer()
      L.create(['x-axis', 'y-axis', 'bars'])
      visualize = ->
        O = skeleton.options()
        W = skeleton.getInnerWidth()
        H = skeleton.getInnerHeight()
        console.log H
        data_ = skeleton.data()
        
        S.x.range([0, W]).domain d3.extent(data_)
        nbins = (x) ->
          Math.ceil(Math.log(x.length)/Math.log(2) + 1)
        histData = d3.layout.histogram()
          .bins(S.x.ticks(O.bins || nbins(data_)))(data_) 
        
        S.y.range([H, 0]).domain d3.extent(histData, A.y)
     
        bars = L.get('bars')
          .selectAll("rect")
          .data(histData)
        bars.enter().append("rect")
        bars.exit().remove()
        bars.attr
          transform: (d) -> "translate(#{S.x(A.x(d))}, #{S.y(A.y(d))})"
          x: 1
          width: (d) -> S.x(histData[1].x) - S.x(histData[0].x) - 1
          height: (d) -> H - S.y(A.y(d))
          fill: "steelblue"
        
        histTooltip = (d, i) ->
            """
            <div class='histtip'>
            #{d.x} to #{d.x + d.dx}<br/>
            #{d.y} instances
            </div>
            """
        #bars.call...