Line Graph Vis

_.md

[ Launch: Line Graph Vis ] 81d55fe6ba324d62932c by Bill77

config.json

{"description":"Line Graph Vis","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,"ajax-caching":true,"thumbnail":"http://i.imgur.com/iKr9ZOI.png"}

inlet.js

var svg = d3.select("svg")

var bounds = [
  {name: "Proc1", min: 0, max: 250},
  {name: "Proc2", min: 250, max: 500},
  {name: "Proc3", min: 500, max: 750}];

var dataVals = [
  {id: "a", times: [150,300,450]}, 
  {id: "b", times: [200,400,600]}, 
  {id: "c", times: [250,500,750]}];

var width = 500;
var height = 500;

var order = 0;

svg
.attr("width", width)
.attr("height", height);

var x = d3.scale.linear().range([0, width]);
var y = d3.scale.linear().range([0, height]);

x.domain([0, 750]); // hard coded now
y.domain([-1,9]);

// draw boundaries
svg.selectAll("rect").data(bounds).enter()
.append("rect").attr({
  width: function(d) {return x(d.max - d.min);},
  height: function(d,i) {return y(i+3)-y(i);},
  x: function(d,i) {return x(d.min);},    
  y: function(d,i) {return y(i*3 - 0.5);},
  fill: "#F2F2F2",
  id: function(d,i) {return "Rect" + d + '_' + i;}
});

// draw lines
var lines = svg.selectAll("line").data(dataVals).enter();

lines.append("line").attr({
  x1:function(d,i) {
    if (order === 0)
      return x(0);
    else if (order === 1)
      return x(bounds[0].max-d.times[0]);
    else if (order === 2)
      return x(bounds[1].max - d.times[1]);
  },
  y1:function(d,i) {return y(i);},
  x2:function(d) {
    if (order === 0)
      return x(d.times[0]);
    else if (order === 1)
      return x(bounds[0].max);
    else if (order === 2)
      return x(bounds[1].max - d.times[0]);
  },
  y2:function(d,i) {return y(i);},
  stroke: "blue",
  'stroke-width':"10"
});

lines.append("line").attr({
  x1:function(d,i) {
    if (order === 0)
      return x(d.times[0]);
    else if (order === 1)
      return x(bounds[1].min);
    else if (order === 2)
      return x(bounds[1].max - d.times[1] + d.times[0]);
  },
  y1:function(d,i) {return y(i+3);},
  x2:function(d) {
    if (order === 0)
      return x(d.times[1]);
    else if (order === 1)
      return x(d.times[1] - d.times[0] + bounds[1].min);
    else if (order === 2)
      return x(bounds[1].max);
  },
  y2:function(d,i) {return y(i+3);},
  stroke: "red",
  'stroke-width':"10"
});

lines.append("line").attr({
  x1:function(d,i) {
    if (order === 0)
      return x(d.times[1]);
    else if (order === 1)
      return x(bounds[1].min + d.times[1] - d.times[0]);
    else if (order === 2)
      return x(bounds[2].min);
  },
  y1:function(d,i) {return y(i+6);},
  x2:function(d) {
    if (order === 0)
      return x(d.times[2]);
    else if (order === 1)
      return x(bounds[1].min - d.times[0] + d.times[2]);
    else if (order === 2)
      return x(bounds[2].min + d.times[2] - d.times[1]);
  },
  y2:function(d,i) {return y(i+6);},
  stroke: "black",
  'stroke-width':"10"
});