Animating Transition Interpolations

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.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">
<div class="container-fluid" id="main">
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <div id="chart"></div>
            
        </div>
    </div>
</div>

CSS

path.line{
  fill: none;
  stroke: steelblue;
}

CoffeeScript

data = d3.range(100).map (x) ->
    {x: x, y: Math.random()}

lineChartConstructor = (skeleton) ->
  layers = skeleton.getLayerOrganizer()
  S =
    x: d3.scale.linear()
    y: d3.scale.linear()
  A =
    x: (d) -> d.x
    y: (d) -> d.y
  layers.create(['circles', 'line'])

  visualize = ->
    data = skeleton.data()
    opts = skeleton.options()
    H = skeleton.getInnerHeight()
    W = skeleton.getInnerWidth()
    S.x.range([0, W]).domain(d3.extent(data, A.x))
    S.y.range([H, 0]).domain(d3.extent(data, A.y))
        
    circles = layers.get('circles').selectAll('circle').data(data)
    circles.enter().append('circle')
    circles.attr
      cx: (d) -> S.x A.x(d)
      cy: (d) -> S.y A.y(d)
      r: 3
      fill: 'black'
        
    line = d3.svg.line()
      .x((d) -> S.x A.x(d))
      .y((d) -> S.y A.y(d))
      .interpolate opts.interpolate || 'linear'
        
    lineL = layers.get('line')
      .selectAll('path.line')
     .data([data])
    lineL.enter().append("path.line")
    lineL.transition()
      .attr
        d: line
         
  skeleton
    .resizeToFitContainer()
    .on("data", visualize)
    .on("resize", visualize)
    .on("options", visualize)
    .autoResize(true)
  
btnData = ['linear', 'basis', 'step-before', 'step-after']

btnGroup = d3.select('.col-md-4').append('div.btn-group')
btns = btnGroup.selectAll("button.btn.btn-default")
  .data(btnData)
btns.enter().append('button.btn.btn-default')
btns.classed 'active', (d, i) -> i is 0
btns.text (d) -> d
btns.on 'click', (d) ->
  console.log(d)
  myLineChart.options
    interpolate: d

 
renderLineChart = (el, x, width, height) ->
  lineChart = d3Kit.factory.createChart(
    x.defaults, [], lineChartConstructor                                   
  )
  mychart = new lineChart('#' + el.id).data(x.data)
    
defaults = 
  margin: {left: 50, right: 10, top: 30, bottom: 30}
  initialHeight: 400
  initialWidth: "auto"
  fontSize: 10
    
el = document.getElementById('chart')
x = {defaults:...