D3 Kit Experiments

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<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/Caged/d3-tip/master/index.js"></script>
<link rel="stylesheet" href="//rawgit.com/Caged/d3-tip/master/examples/example-styles.css">
<div class="container">
    <div class="col-xs-8">
      <div class="chart-wrapper">
          <div class="chart-title">
             Autocorrelation Function
          </div>
          <div class="chart-stage">
            <div id="chart"></div>
          </div>
          <div class="chart-notes">
            <small>This is a footnote</small>
          </div>
      </div>
    </div>
</div>

CSS

body {
  font: 10px sans-serif;
}

.x-axis-layer line, .y-axis-layer line,
.x-axis-layer path, .y-axis-layer path {
  fill: none;
  stroke: #ccc;
  shape-rendering: crispEdges;
}
.x-axis-layer text, .y-axis-layer text{
  fill: #aaa;
}
.y-axis-layer path {
  stroke: transparent;
}
/*
.line{
  stroke-width: 3px;
}
*/
.x-axis label{
  fill: red;
}
/* increase line-height for tooltip */
.d3-tip{
  font-weight: normal;
  line-height: 1.5em;
}
.container {
   margin-top: 20px;
}

CoffeeScript

bubbles = ->
  d3.range(100).map (i) ->
    x: Math.random()*100
    y: Math.random()*100
    r: Math.random()*5 + 3
    
data = [{"x":1,"y1":-0.0031,"y2":0},{"x":2,"y1":0,"y2":0.0091},{"x":3,"y1":0,"y2":0.0243},{"x":4,"y1":0,"y2":0.0344},{"x":5,"y1":-0.0277,"y2":0},{"x":6,"y1":0,"y2":0.0345},{"x":7,"y1":-0.0705,"y2":0},{"x":8,"y1":-0.1623,"y2":0},{"x":9,"y1":0,"y2":0.0548},{"x":10,"y1":0,"y2":0.0498},{"x":11,"y1":0,"y2":0.116},{"x":12,"y1":0,"y2":0.0735},{"x":13,"y1":-0.0471,"y2":0},{"x":14,"y1":-0.0318,"y2":0},{"x":15,"y1":-0.1135,"y2":0},{"x":16,"y1":0,"y2":0.0348},{"x":17,"y1":-0.0059,"y2":0},{"x":18,"y1":-0.1307,"y2":0},{"x":19,"y1":-0.1076,"y2":0},{"x":20,"y1":-0.1557,"y2":0}] 

DATA = 
  data: data
  hlines: [-0.2, 0.2]
  ydomain: [-0.4, 0.4]
  xlab: 'Lag'
  ylab: 'PACF'

###
skeleton = new d3Kit.Skeleton "#chart",
  margin: {left: 40, right: 40, bottom: 40, top: 40}
  initialHeight: 400
  initialWidth: 600
###

# FUNCTIONS
drawAxes =  ->
  defaults = 
    scale: ""
    xlab: "x"
    ylab: "y"
  opts = extend(defaults, arguments[0])
  exports = (sel) ->
    xAxis = d3.svg.axis()
      .scale(opts.scale.x)
      .orient('bottom')
    
    sel.append('g')
       .attr('class', 'x axis')
       .attr('transform', "translate(0, #{opts.scale.y.range()[0]})")
       .call(xAxis)
      
    yAxis = d3.svg.axis()
       .scale(opts.scale.y)
       .orient('left')
       .ticks(5)
       .tickSize(-opts.scale.x.range()[1])
    
    sel.append('g')
       .attr('class', 'y axis')
       .call(yAxis)
        
    sel.append("text.x.label")
      .style("font-size", 12)
      .text(opts.xlab)
      .attr
         x: opts.scale.x.range()[1]
         y: opts.scale.y.range()[0] + 30

    
    sel.append("text.y.label")
      .style("font-size", 12)
      .text(opts.ylab)
      .attr
        x: 0
        dx: -20
        dy: -20
        y: 0
  exports.opts = opts; createAccessors(exports)
  exports

acfChart = d3Kit.factory.createChart(
  {
   margin: {left: 40, right: 40,...