just another inlet to tributary

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":true,"emacs":false,"width":494,"height":557,"hide":false},"endpoint":"tributary"}

inlet.js

tributary.trace = false;
var cw = 500;
var ch = 400;
var cx = 50;
var cy = 100;

var levelcs = d3.scale.category20();

var data = [
  [{s:0,d:0}, {s:1,d:2}, {s:2,d:8}, {s:3,d:1}, {s:4,d:3}],
  [{s:0,d:0}, {s:1,d:6}, {s:2,d:3}, {s:3,d:2}, {s:4,d:6}],
  [{s:0,d:0}, {s:1,d:4}, {s:2,d:2}, {s:3,d:1}, {s:4,d:5}],
  [{s:0,d:0}, {s:1,d:7}, {s:2,d:1}, {s:3,d:3}, {s:4,d:1}],
  [{s:0,d:0}, {s:1,d:3}, {s:2,d:2}, {s:3,d:2}, {s:4,d:4}],
  [{s:0,d:0}, {s:1,d:5}, {s:2,d:3}, {s:3,d:5}, {s:4,d:3}],
  [{s:0,d:0}, {s:1,d:4}, {s:2,d:6}, {s:3,d:3}, {s:4,d:2}],
  [{s:0,d:0}, {s:1,d:4}],
  [{s:0,d:0}, {s:1,d:2}, {s:2,d:5}],
  [{s:0,d:0}, {s:1,d:4}, {s:2,d:2}],
  [{s:0,d:0}, {s:1,d:2}, {s:2,d:1}, {s:3,d:5}],
  [{s:0,d:0}, {s:1,d:10}],
  [{s:0,d:0}, {s:1,d:9}, {s:2,d:3}],
  [{s:0,d:0}, {s:1,d:4}, {s:2,d:6}, {s:3,d:6}],
];

//accumulate # of days in each datum and store it in c attribute
var sum;
var maxsum = 0;
data.forEach(function(d) {
  sum = 0;
  d.forEach(function(v) {
    sum += v.d;
  	v.c = sum;
  })
  if(sum > maxsum) { maxsum = sum; }
});
  
//add a point below each change to make "steps"
var linedata = []
var td;
data.forEach(function(d) {
  td = [];
  d.forEach(function(v,i) {
    if(i > 0) {
      //d.splice(i, 0, {s: v.s - 1, d:v.d, c:v.c})
      td.push({s: v.s - 1, d:v.d, c:v.c})
    }
    td.push(v);
  })
  linedata.push(td);
});
//console.log(data)
  
var levels = ["one", "two", "three", "four", "five"];

var yscale = d3.scale.ordinal()
  .domain(d3.range(levels.length))
  .rangeBands([ch, 0], 0.1)
    
var xscale = d3.scale.linear()
  .domain([0, maxsum])
  .range([0, cw])
    
var line = d3.svg.line()
    .x(function(d, i) {
      return xscale(d.c);
    })
    .y(function(d,i) {
      return yscale(d.s) + yscale.rangeBand()*.5// * Math.random();
    })
    .interpolate("basis")

var svg = d3.select("svg");
var chart = svg.append("g")
  .attr("transform", "translate(" + [cx, cy] + ")")
  //.attr("clip-path", "url(#clipper)");

    
chart.selectAll("rect.level")
  .data(levels)
  .enter()
  .append("rect")
  .attr({
    x: 0,
    y: function(d,i) {
      return yscale(i)
    },
    width: cw,
    height: yscale.rangeBand(),
    fill: function(d,i) {
      return levelcs(i)
    },
    "fill-opacity": 0.6
  })
    
    
chart.selectAll("path.cand")
  .data(linedata)
  .enter()
  .append("path")
  .attr({
    d: line,
    fill: "none",
    stroke: "#000000",
    "stroke-width": 4,
    "stroke-opacity": 0.5
    
  })
    
var cp = svg.append("defs")
  .append("clipPath")
  .attr("id", "clipper")
cp.append("rect")
  .attr({
    x: 0,
    y: 0,
    width: 1,
    height: ch
  })

svg.on("click", function() {
  cp.select("rect")
    .transition()
    .duration(9000)
    .ease("linear")
    .attr({
      width: cw
    })
})
    
    

    
    
    
    
    
    
    

inlet.svg