Another Inlet

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var x = d3.scale.linear().domain([0,10]).range([0,400]),
y = d3.scale.linear().domain([0,1]).range([0,50]),
groupHeight = 60,
topMargin = 100;

var data = []
d3.range(10).forEach(function(d) { data.push(Math.random()) });

var interpolations = [
    "linear",
    "step-before",
    "step-after",
    "basis",
    "basis-closed",
    "cardinal",
    "cardinal-closed"];

function getLine(interpolation) {
    return d3.svg.line().x(function(d,i) {
        return x(i)
    }).y(function(d) {
        return y(d)
    }).interpolate(interpolation)
//.tension(0)
}

var vis = d3.select("svg")
    .attr("class", "vis")
    .attr("width", window.width)
    .attr("height", window.height);

function drawLine(p,j) {
  console.log("drawLine("+p+","+j+")")
    d3.select(this)
        .selectAll(".lineGroup")
        .data(data)
        .enter().append("svg:path")
        .attr("d", getLine(p)(data))
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-width", 3)
        //.attr("stroke-dasharray", "15 5")
}

var lg = vis.selectAll(".lineGroup")
    .data(interpolations)
    .enter().append("svg:g")
    .attr("class", "lineGroup")
    .attr("transform", function(d,i) {
    return "translate(100," + (topMargin + i * groupHeight) + ")"
}).each(drawLine);