Time

_.md

[ Launch: Tributary inlet ] 6536374 by tarvaina

config.json

{"description":"Time","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},"_.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,"thumbnail":"http://i.imgur.com/FLD5Vda.png","inline-console":false}

inlet.coffee

duration = 200

config =
  seconds:
    max: 10
    vertically: 10
    x: 600
    y: 300
  ten_seconds:
    count: 6
    x: 50
    
svg = d3.select("svg")

color = d3.scale.category20()

data = {}
g = {}
_.each(config, (v, k) ->
  data[k] = []
  g[k] = svg.append("g").attr
    transform: "translate(" + [v.x, v.y] + ")"
)

data.seconds = []

g.seconds.append("rect").attr
  x: -100
  y: 0
  width: 200
  height: 1

dropRect = (i) ->
  g.seconds
    .append("rect").attr
      x: 0
      y: -300
      width: 20
      height: 20
      fill: color(i)
    .style
      opacity: .3
    .attr("class", "dropping")
    .transition().duration(duration)
      .attr
        y: 0
  
stack = ->
  g.seconds.selectAll(".dropping").attr("class", "stacking")

  lastFullTen = 10 * Math.floor(data.seconds.length / 10)
  stacking = g.seconds.selectAll(".stacking")
  
  stacking.transition().duration(duration)
    .attr
      y: (d, i) -> 30 * ((20 - i) % 10)


moveStack = ->
  g.seconds.selectAll(".stacking").attr("class", "stacked")

  numberOfStacks = Math.ceil(data.seconds.length / config.seconds.vertically)

  g.seconds.selectAll(".stacked")
    .transition().duration(duration).attr
      x: (d, i) -> 
        -30 * (numberOfStacks - Math.floor(i / 10))
      y: (d, i) -> 30 * ((20 - i) % 10)



addSecond = ->
  data.seconds.push(data.seconds.length)

  if data.seconds.length % config.seconds.vertically == 0
    moveStack()
  stack()
  dropRect(data.seconds.length)

timesDelayed = (times, delay, f) ->
  if times > 0
    nextLoop = ->
      f()
      timesDelayed(times - 1, delay, f)

    setTimeout(nextLoop, delay)

timesDelayed(30, 500, addSecond)
#setInterval(addSecond, duration)