pnc-schedules

_.md

[ Launch: pnc-schedules ] 5797583 by prabhasp
[ Launch: pnc-schedules ] 5795197 by prabhasp

config.json

{"description":"pnc-schedules","endpoint":"","display":"svg","public":true,"require":[{"name":"underscore","url":"http://underscorejs.org/underscore-min.js"}],"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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

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

var pncDatas = [
[{  day: 1,  date: "2013-06-12",   type: 'expected'},
   { day: 3, type: 'expected'},
   { day: 7, type: 'expected'},
   { day: 4, type: 'actual'},
   { day: 1, type: 'actual'}],
[{  day: 1,  date: "2013-06-11",   type: 'expected'},
   { day: 3, type: 'expected'},
   { day: 7, type: 'expected'}],

[{  day: 1,  date: "2013-06-11",   type: 'expected'},
   { day: 3, type: 'expected'},
   { day: 7, type: 'expected'},
   { day: 2, type: 'actual'},
   { day: 7, type: 'actual'}],
[{  day: 1,  date: "2013-06-16",   type: 'expected'},
   { day: 3, type: 'expected'},
   { day: 7, type: 'expected'}],

[{  day: 1,  date: "2013-06-11",   type: 'expected'},
   { day: 3, type: 'expected'},
   { day: 7, type: 'expected'},
   { day: 3, type: 'actual'},
   { day: 7, type: 'actual'},
   { day: 1, type: 'actual'}]
]; 

var curIdx = 0;

function redraw(pncData, svgEl) {
  var todayDay = 1 + Math.floor((new Date() -
      Date.parse(pncData.filter(function(d) { return d.day == 1; })[0].date)) / 
      (1000 * 60 * 60 * 24));

  var actualDays = pncData
    .filter(function(d) { return d.type=='actual'; })
    .map(function(d) { return d.day; });
  var color = '';
  if((1 > todayDay || actualDays.indexOf(1) > -1) &&
     (3 > todayDay ||actualDays.indexOf(3) > -1) &&
     (7 > todayDay ||actualDays.indexOf(7) > -1)) {
    color = 'green';
  } else if (actualDays.length > 0) {
    color = 'yellow';
  } else {
    color = 'red';
  }
  
  pncData.forEach(function(d) {
    if(d.type == 'actual') { d.color = 'black'; }
    else if(d.day <= todayDay) { d.color = color; }
    else {d.color = 'grey'; }
  });
  
  function timeLine(dayData) {
  
    var orderedExpectedDates = dayData
    .filter(function(d) { return d.type=='expected'; })
    .sort(function(da, db) { return da.day > db.day?1:-1; })
           
    var idx;
    var timeLineChunks = [];
    // expected
    for(i = 1; i < orderedExpectedDates.length; i++) {
      timeLineChunks.push(
        {startDay: orderedExpectedDates[i-1].day,
         endDay: orderedExpectedDates[i].day,
         color: 'grey'});
    }
    //actual
    for(i = 1; i < orderedExpectedDates.length; i++) {
      if(orderedExpectedDates[i].day > todayDay) {
        timeLineChunks.push(
          {startDay: orderedExpectedDates[i-1].day,
           endDay: todayDay,
           color: color});
        break;
      } else {
        timeLineChunks.push(
          {startDay: orderedExpectedDates[i-1].day,
           endDay: orderedExpectedDates[i].day,
           color: color});
      }
    }
    return timeLineChunks;
  }
  var expectedTimeLineChunks = timeLine(pncData);
  
  var lines = svgEl.selectAll('lines')
              .data(expectedTimeLineChunks)
              .enter().append('rect')
              .attr('y', 40-5/2)
              .attr('height', 5)
  lines.attr("x", function(d) {
      return d.startDay * 70;
  });
  lines.attr('width', function(d) {
      return (d.endDay - d.startDay) * 70;
  });
  lines.attr('fill', function(d) {
      return d.color;
  });
  var ticks = svgEl.selectAll('ticks')
              .data([2,4,5,6])
              .enter().append('rect')
              .attr('y',40-(20/2))
              .attr('x',function(d) { return d * 70; })
              .attr('width', 2)
              .attr('height', 20)
  .attr('fill', function(d) { return (d <= todayDay) ? color : 'grey'});
  
  var pastNumbers = svgEl.selectAll('numberTicks')
              .data([1,3,7].filter(function(d) { return d > todayDay; }))
              .enter().append('text')
              .attr('y',90)
              .attr('x',function(d) { return d * 70; })
              .attr('fill', 'grey')
              .text(function(d) { return d;})
		      .style('font-weight','bold');
  var actualNumbers = svgEl.selectAll('futureTicks')
      .data(pncData.filter(function(d) { return d.type=='actual';})
        .map(function(d) { return d.day; }))
    .enter().append('text')
    .attr('y',90)
    .attr('x',function(d) { return d * 70 - 5; })
    .attr('fill', 'black')
    .text(function(d) { return d;})
    .style('font-weight','bold');
  
  var circle = svgEl.selectAll("circle")
      .data(pncData)
      .enter().append('circle')
      .attr("cy", 40)
      .attr("r", 15);
  
  circle.attr("cx", function(d) {
      return d.day * 70;
  });
  circle.attr('fill', function(d) {
    return d.color;
  });
  
  
  var visits = pncData.filter(function(d) {
    return d.type=='expected' && d.day <= todayDay;})
  .map(function(d) {
    if (pncData
        .filter(function(d2) {return d2.day == d.day && d2.type == 'actual';})
        .length) {
      return {day: d.day, wasVisited: true};
    } else {
      return {day: d.day, wasVisited: false};
    }
  });
  
  var statuses = svgEl.selectAll('statuses')
      .data(visits)
      .enter().append('image')
	  .attr('xlink:href', function(d) {
    	if(d.wasVisited) {
	      return 'http://www.halifax.ca/wrms/images/checkmark.png';
    	} else {
	      return 'http://www-03.ibm.com/software/lotus/symphony/gallery.nsf/GalleryClipArtAll/20180C4D223D88D2852575960030B295/$File/Sign-X01-Red.png';
    	}
	  })
  .attr('x', function(d) { return d.day * 70 - (16/2); })
  .attr('y', 2)
  .attr('width', 16)
  .attr('height', 16);

}

redraw(pncDatas[Math.floor(curIdx % pncDatas.length)], svg);

function f(d, i) {
  console.log(d);
  console.log(this[i]);
}
svg.selectAll('g')
	.data(pncDatas)
	.enter().append('g').call(f);