Tributary inlet

_.md

[ Launch: Tributary inlet ] 6955548 by enjalot
[ Launch: Tributary inlet ] 6955433 by enjalot
[ Launch: Tributary inlet ] 6955303 by enjalot
[ Launch: Tributary inlet ] 6955078 by enjalot
[ Launch: Tributary inlet ] 6954884 by enjalot

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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/WZexdII.png"}

inlet.js

http://tributary.io/inlet/6955548
var svg = d3.select("svg");


var list = d3.range(20).map(function(i) {
  return {
    foo: i,
    bar: i
  }
})

var max = d3.max(list, function(d) { return d.foo });


var yscale = d3.scale.linear()
.domain([0, max])
.range([0, 300])

var maxBar = d3.max(list, function(d) { return d.bar })
var colorScale = d3.scale.linear()
.domain([0, maxBar])
.range(["#6415F1", "#7DF060"])
.interpolate(d3.interpolateHsl)

function x(d,i) {
  return 10 + i * 19
}

var rects = svg.selectAll("rect")
.data(list)
.enter()
.append("rect")
.attr({
  x: x,
  y: function(d,i) { return yscale(max) - yscale(d.foo) },
  width: 37,
  height: function(d,i) { return yscale(d.foo) },
  stroke: "#ff0000",
  "stroke-width": 1,
  fill: function(d,i) { return colorScale(d.bar) }
})

rects.transition()
.delay(100)
.duration(1000)
.ease("linear")
.ease("bounce")
.attr({
  "stroke-width": 15
})