D3 timeline

by Samuel Price

CSS

svg .line {
  margin-top: 50px
}
svg .event {
    fill: #4CAF50;
    stroke: #4CAF50;
    stroke-width: 2;
 }

svg .label {
    font-family: Tahoma;
    font-size: 14px;
}

svg .rotate {
    /* Safari */
    -webkit-transform: rotate(90deg);
    /* Firefox */
    -moz-transform: rotate(90deg);
    /* IE */
    -ms-transform: rotate(90deg);
    /* Opera */
    -o-transform: rotate(90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

JavaScript

var dataset = [
    {
    		planstart: 0,
        planend: 15,
        actualstart:0,
        actualend:30,
        label: "Take protein pills"
    }, 
    {
    		planstart: 15,
        planend: 30,
        actualstart:30,
        actualend:50,
        label: "put helmet on"
    },
    {
        planstart: 30,
        planend: 45,
        actualstart:50,
        actualend:70,
        label: "engines on"
    },
    {
        planstart: 45,
        planend: 60,
        actualstart:70,
        actualend:120,
        label: "Check ignition"
    }
    ];


var svg = d3.select("body").append("svg")
    .attr("width", 600)
    .attr("height", 500);

var color = d3.scale.category20();

var y_offset = 20;
var height = 25;
var scaler = 2;
/* Plot the planned stuff */
svg.selectAll("rect")
.data(dataset)
   .enter()
   .append("rect")
   .attr("x",function(d){

   	return d.planstart * scaler
   })
.attr("y", y_offset)
.attr("width", function(d) {
      return (d.planend - d.planstart) * scaler;
      } )
.attr("height", height)
.attr("fill",function(d,i){return color(i);});

var scaler_thing = 15
/* Draw the actual as an increasing thing ... */
svg.selectAll("polygon")
.data(dataset)
.enter()
.append("polygon")
.attr("points",function(d)
{
	var p1 = (d.planstart* scaler ) + ',' + (y_offset + height)
  var p2 = (d.planend  * scaler )+ ',' + (y_offset + height)
  var p3 = (d.actualend * scaler) + ',' +(y_offset + height * .5 + (d.actualend-d.planend)/scaler_thing * height)
  var p4 = (d.actualstart * scaler) + ',' + (y_offset + height * .5 + (d.actualend-d.planend)/scaler_thing * height)
    
  var p5 = (d.actualstart * scaler) + ',' + (y_offset + height * .5 + height * (d.actualstart- d.planstart)/scaler_thing)
  console.log(p4)
  return p1 + ' ' + p2 + ' ' + p3 + ' ' + p4 + ' ' + p5
})
.attr("fill",function(d,i){return color(i);});