D3 Kit Starter Template

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdn.rawgit.com/twitter/d3kit/master/dist/d3kit.min.js"></script>
<script src="//cdn.rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//vega.github.io/datalib/datalib.min.js"></script>
<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <h2>My Chart</h2>
      <div id="chart"></div>
    </div>
  </div>
</div>

CSS

#main{margin-top: 30px;}

CoffeeScript

# utility functions
d3Kit.setup = (skeleton) ->
  data: skeleton.data()
  height: skeleton.getInnerHeight()
  width: skeleton.getInnerWidth()
  
d3Kit.renderChart = (constructor) -> (el, x) ->
  Chart = d3Kit.factory.createChart(
    x.defaults, [], constructor
  )
  myChart = new Chart('#' + el.id)
    .data(x.data)
    .options(x.options)
    
    
# helper functions
expand_grid = (m, n) ->
  data = d3.range(m).map (i) -> 
    d3.range(n).map (j) -> {x: i, y: j, v: Math.random()*20}
  d3.merge(data)
    

renderCircleGrid = (layer, obj) ->
  {data, height, width, S, A} = obj
  compute_radius = -> width/(Math.sqrt(data.length) - 1)/2 - 2 
  # update scales
  S.x.rangeRoundPoints([0, width])
   .domain data.map(A.x)
  S.y.rangeRoundPoints([0, height])
   .domain data.map(A.y)
  circles = layer.selectAll('circle').data(data)
  circles.enter().append("circle")
    .attr fill: '#eee', r: 0
  circles.attr
    cx: (d) -> S.x A.x(d)
    cy: (d) -> S.y A.y(d)
    r: compute_radius()
  circles.transition()
    .delay((d, i) -> Math.random()*4000)
    .attr
      fill: (d) -> S.c A.c(d)

chartConstructor = (skeleton) ->
  # set up scales
  S =
    x: d3.scale.ordinal()
    y: d3.scale.ordinal()
    c: d3.scale.category20c()
  # set up accessors
  A =
    x: (d) -> d.x
    y: (d) -> d.y
    c: (d) -> Math.round(d.v)
  # initialize layers
  L = skeleton.getLayerOrganizer()
  L.create(["circle-grid"])
  visualize = ->
    # set up basics
    {data, height, width} = d3Kit.setup(skeleton)
    height = Math.min(height, width); width = height
    # create payload
    payload = {L, data, height, width, S, A}
    renderCircleGrid L.get("circle-grid"), payload

  skeleton.resizeToFitContainer()
    .on("data", visualize)
    .on("resize", visualize)
    .on("options", visualize)
    .autoResize(true)

    


circularGridChart = d3Kit.renderChart(chartConstructor)
drawChart = ->
  # setup defaults
  defaults = 
    margin: {top: 30, bottom: 30, left: 30, right: 30}
   ...