Horizontal Bar Chart with d3Kit

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/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<div class="container-fluid" id='main'>
    <div class="col-xs-12 col-md-6">
        <div class="chart-wrapper tab-wrapper">
          <div class="chart-title">
            <div id='tabs'></div>
          </div>
        <div class="chart-stage">
            <div id="chart"></div>
        </div>
        <div class="chart-notes">
          <small>A measure of importance of the variables.</small>           
        </div>
 </div>   
</div>

CSS

#main{
  margin-top: 20px;
}
.x-axis-layer path,
.x-axis-layer line {
  fill: none;
  stroke: #aaa;
  shape-rendering: crispEdges;
}

.x-axis-layer text {
  font-family: sans-serif;
}
.y-axis-layer path,
.y-axis-line line {
  fill: none;
  stroke: none;
  shape-rendering: crispEdges;
}

.y-axis-layer text {
  font-family: sans-serif;
}

.nav-tabs { border-bottom: 2px solid #DDD; }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
    .nav-tabs > li > a { border: none; color: #666; }
        .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; }
        .nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs > li.active > a::after, 
.nav-tabs > li:hover > a::after { 
   transform: scale(1); 
}
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}

a.nocursor{
  cursor: default;
  font-weight: bold;
}
.nav-tabs > li > a.nocursor:hover{
  color: inherit !important;
}
li > a.nocursor:after{
  background: none;
}

.chart-wrapper.tab-wrapper .chart-title{
   border-bottom: 0px;
   padding: 0px;
}

rect.hbar:hover{
  fill: darkred;
}
svg text{
  font-size: 12px;
}
text.hbarlabel{
  font-size: 14px;
}

CoffeeScript

horizontalBarChartConstructor = (skeleton) ->
  layers = skeleton.getLayerOrganizer()
  S =
    x: d3.scale.linear()
    y: d3.scale.ordinal()
  A =
    x: (d) -> d.x
    y: (d) -> d.y
  layers.create(['x-axis', 'y-axis', 'hbars', 'hbarlabels'])
  visualize = ->
    data = skeleton
      .data().value
      .sort (a, b) -> d3.descending(a.x, b.x)
    opts = skeleton.options()
    H = skeleton.getInnerHeight()
    W = skeleton.getInnerWidth()
    S.x.range([0, W])
     .domain([0, d3.max(data, A.x)])
     .nice()
    S.y.rangeRoundBands([0, H], 0.1)
     .domain(data.map(A.y))
        
    hbars = layers.get('hbars').selectAll('rect.hbar').data(data)
    hbars.enter().append('rect.hbar')
      .attr
        x: 0
        y: (d) -> S.y A.y(d)
        width: 0
        height: S.y.rangeBand()
    hbars
      .transition().duration(750)
      .attr
        width: (d) -> S.x A.x(d)
        fill: 'steelblue'
    
    hbars.exit().remove()
    
    hbarlabel = layers.get('hbarlabels')
      .selectAll('text.hbarlabel').data(data)
    hbarlabel.enter().append('text.hbarlabel')
      .attr
        x: 0
        "fill-opacity": 0.7
        y: (d) -> S.y(A.y(d)) + S.y.rangeBand()/2
        "text-anchor": "start"
        "alignment-baseline": "middle"
        "pointer-events": "none"
    hbarlabel
      .transition().duration(750)
      .attr
         x: (d) -> S.x(A.x(d)) + 5
      .text (d) -> d3.format('.1f')(d.x)
    
    
    hbarlabel.exit().remove()
    
    yAxis = d3.svg.axis().scale(S.y).orient('left')
      .outerTickSize(0)
      
    layers.get('y-axis').call(yAxis)
    xAxis = d3.svg.axis().scale(S.x).orient('bottom')
      .ticks(Math.floor(W/70))
      #.tickSize(-H)
    layers.get('x-axis')
      .attr("transform", "translate(0, #{H})")
      .call(xAxis)
  skeleton
    .resizeToFitContainer()
    .on("data", visualize)
    .on("resize", visualize)
    .autoResize(true)
  

renderHorizontalBarChart = (el, x, width, height) ->
  horizontalBarChart =...