Tributary inlet

_.md

[ 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/fXOB5ka.png"}

inlet.js

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

var cx = 25;
var cy = 33;

var list = [
  { foo: 25, bar: 53 },
  { foo: 10, bar: 31 }, 
  { foo: 16, bar: 45 }, 
  { foo: 5, bar: 57 }, 
  { foo: 18, bar: 26 },
    { foo: 25, bar: 87 },
    { foo: 35, bar: 41 },
    { foo: 15, bar: 57 }
]
.sort(function(a,b) { return a.foo - b.foo })

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 * 50
}

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",
  fill: function(d,i) { return colorScale(d.bar) }
})