Tributary inlet

_.md

[ Launch: Tributary inlet ] 1a68811501e735fafca2 by ramnathv

app.css

.line{
   fill: none;
}

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/LNKJ76i.png"}

inlet.coffee

data = [3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 9]

createAccessors = (visExport) ->
  for n of visExport.opts
    continue  unless visExport.opts.hasOwnProperty(n)
    visExport[n] = ((n) ->
      (v) ->
        (if arguments.length then (visExport.opts[n] = v
        this
        ) else visExport.opts[n])
    )(n)
  return
    

Sparkline = ->
  opts = {
     margin: {top: 30, left: 31, right: 20, bottom: 20}
     width: 100
     height: 24,
     color: "steelblue"
  }

  x = d3.scale.linear()
  y = d3.scale.linear()

  line = d3.svg.line()
    .x((d, i) -> x(i))
    .y((d, i) -> y(d))
    .interpolate("linear")
  
  exports = (selection) ->
    selection.each (data) ->
      W = opts.width + opts.margin.left + opts.margin.right
      H = opts.height + opts.margin.top + opts.margin.bottom
      x.range([-5, opts.width]).domain([0, data.length])
      y.range([opts.height, 0]).domain([0, 10])
      
      svg = d3.select("svg")
        .attr("width", W)
        .attr("height", H)
        .append("g")
        .attr("transform", "translate(#{opts.margin.left}, #{opts.margin.top})")
  
      svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("stroke", opts.color)
        .attr("d", line)
        
  exports.opts = opts
  createAccessors(exports)
  exports.animate = () ->
    v = data.shift(); data.push(v)
    graph.selectAll("path")
      .data([data])
      .attr("transform", "translate(#{x(1)})")
      .attr("d", line) 
      .transition()
      .ease("linear")
      .duration(4000)
      .attr("transform", "translate(#{x(0)})")
    return exports
  
  exports

  
chart = Sparkline().width(140).color('#545454')



graph = d3.select("svg").data([data]).call(chart)

chart.animate()