composing d3 function into, functions

d3_fn.js

var d3_proto = d3.select(window);

function free(fn) {
  return function() {
    var args = _.toArray(arguments)
    return function(selection) {
      return fn.apply(selection, args)
    }
  }
}

var seq = function() {
  return _.compose.apply(null, _.toArray(arguments).reverse())
}

var append = free(d3_proto.append),
    selectAll = free(d3_proto.selectAll),
    text = free(d3_proto.text),
    data = free(d3_proto.data),
    style = free(d3_proto.style)

var enter = function(sel) {
  return sel.enter()
}


var label = text(String),
    p = append('p'),
    div = append("div")

var a = seq(
    selectAll('.wibble'),
    data(['a', 'b', 'c']),
    enter,
    p,
    label
);

a(d3.select('body'));




var points = [4, 8, 15, 16, 23, 42];
var x = d3.scale.linear()
    .domain([0, d3.max(points)])
    .range([0, 420]);

var width = _.partial(style, "width")
var toPx = function(d) { return x(d) + "px" }


var chart = seq(
  selectAll("div"),
  data(points),
  enter,
  div,
  width(toPx),
  label
)

chart(d3.select(".chart"))