Another Inlet

_.md

Gist #4290285
Gist #3200444

config.json

{"description":"Another 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}},"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,"hidepanel":false}

inlet.js

var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                 { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                  { "x": 80,  "y": 5},  { "x": 100, "y": 60}];


var data=[],i,num=26;
for( i = 0; i < num; i++ ){
 data[i]=Math.ceil(Math.random()*6);
  lineData.push( {"x": 10, "y": i*20} );
}


var svg = d3.select("svg");

var lineFunction = d3.svg.line()
    .x(function(d) { return d.x; })
      .y(function(d) { return d.y; })
          .interpolate("linear");



svg.selectAll("rect").data(data)
  .enter()
  .append("rect")
  .attr("x",50)
  .attr("y",function(d,i){return i*15})
  .attr("width",function(d){return d*100})
  .attr("height",13)
  .style("fill", "#FF2900")


  svg.append("path")
 .attr("d", lineFunction(lineData))
 .attr("stroke", "blue")
 .attr("stroke-width", 2)
 .attr("fill", "none");