Tributary inlet

_.md

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

inlet.js

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

var cx = 25;
var cy = 33;

var list = [
  25, 10, 50, 100, 60, 120, 270
]
.sort(function(a,b) { return a - b })
var max = d3.max(list);

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

/*
for(var i = 0; i < list.length; i++) {
  svg.append("rect")
  .attr({
    x: 10 + i * 55,
    y: 10,
    width: 32,
    height: 100
  }) 
}*/

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) },
  width: 37,
  height: function(d,i) { return yscale(d) }
})

//yscale.range([300, 0]);

var line = d3.svg.line()
.x(x)
.y(function(d,i) {
  return  yscale(max) - yscale(d)
});

svg.append("path")
.attr("d", line(list))
.style({
  fill: "none",
  stroke: "#C9BFEB"
})