Calendar Visualization

_.md

[ Launch: Calendar Visualization ] 5181195 by azappella

See Previous Inlet [ Gist ]

config.json

{"description":"Calendar Visualization","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"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,"tab":"edit","display_percent":0.7,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":164,"height":337,"hide":false}}

inlet.js

tributary.trace = false;
var svg = g;//d3.select("svg");
//playing with time
var cw = 906;
var cx = 30;
var cy = 100;

var day_style = {
    fill: "#868686",
    "fill-opacity": 0.59996,
    stroke: "#000000",
    "stroke-width": 0,
    "stroke-opacity": 0.4032
}
var week_color_scale = d3.scale.ordinal()
    .range(["#BEBEBE", "#8B8989"]);
var week_style = {
  fill: function(d) { return week_color_scale(d);},
  "fill-opacity": 0.23224,
  stroke: "#000000",
  "stroke-width": 0,
  "stroke-opacity": 0.4032
}
var day = d3.time.format("%w");
var week = d3.time.format("%U");
var month = d3.time.format("%m");

//days of the week
var dow = svg.append("g")
    .attr("transform", "translate(" + [cx + 20, cy] +")")

var dowc = yearcalendar()
    .width(cw)
    .day_style(day_style)
    .week_style(week_style)
    .day_spacing(2)
    .month_spacing(10);

dowc(dow);
dowc.highlight_dow();

//weeks
dowc.highlight_week();

//months
dowc.highlight_month();
//quarters

//custom range
/*
var start = new Date(2012, 6, 1);
var end = new Date(2012, 8, 21);
dowc.highlight_range(start, end);
*/


//slider
var tscale = d3.time.scale()
    .domain([new Date(2012, 0, 0), new Date(2013, 0, 0)])
    .range([0, cw])
                           
var sg = svg.append("g")
    .attr({
      transform: "translate(" + [cx, 236] +")",
    });

var s = d3.svg.brush()
    .x(tscale)
    .extent([new Date(2012, 6, 1), new Date(2012, 7, 0)])
s(sg);

s.on("brush", function() {
  //console.log(s.extent());
  var start = s.extent()[0];
  var end = s.extent()[1];
  dowc.clear_highlight();
  dowc.highlight_range(new Date(start), new Date(end));
})

var sh = 20;
//this could be CSS
sg.select(".background")
   .attr({
    height: sh
  })
  .style({
    visibility: "",
    fill: "#C0C0CC"
  })
sg.select(".extent")
  .attr({
    height: sh
  })
  .style({
    visibility: "",
    fill: "#E9C5C5"
  });
sg.selectAll(".resize")
  .select("rect")
  .attr({
    height: sh
  })
  .style({
    visibility: "visible",
    fill: "#E78383"
  })

  
var start = s.extent()[0];
var end = s.extent()[1];
dowc.highlight_range(new Date(start), new Date(end));

//calendar chart
function yearcalendar() {
  var width = 500;
  var w = width;
  var height = 200;
  var h = height;
  var margin = {top: 19, right: 20, bottom: 20, left: 19};
  var cellSize = 17;
  var trim = true;
  
  var group;
  
  var day_spacing = 2;
  var week_spacing = 0;
  var month_spacing = 0;
  
  var year = 2012;
  var range;
  
  var day = d3.time.format("%w");
  var week = d3.time.format("%U");
  var month = d3.time.format("%m");
  var format = d3.time.format("%Y-%m-%d");
  
  var highlight = function() {};
  var highlight_color = "#E77E7E";
  
  var day_style = {
    fill: "#868686",
    "fill-opacity": 0.59996,
    stroke: "#000000",
    "stroke-width": 0,
    "stroke-opacity": 0.4032
  };
  var week_color_scale = d3.scale.category20();
  var week_style = {
    fill: function(d) { return week_color_scale(d);},
    "fill-opacity": 0.23224,
    stroke: "#000000",
    "stroke-width": 0,
    "stroke-opacity": 0.4032
  };
  var corner = 2;
  
  function weekday(d) {
    return ['S', 'M', 'T', 'W', 'R', 'F', 'S'][d];
  };
  function month_names(d) {
    return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][+month(d)-1];
  };
  
  
  var chart = function(g) {
    group = g;
    var start = new Date(year, 0, 1);
    var end = new Date(year + 1, 0, 1);
    range = d3.time.days(start, end)
    layout();
    
    g.selectAll("rect.weekday")
      .data(d3.range(7))
      .enter()
      .append("rect")
      //.datum(function(d) { return d })
      //.datum(format)
        .attr("class", "weekday")
        .attr("width", w)
        .attr("height", cellSize)
        .attr("x", 0)
        .attr("y", function(d) { return d * (cellSize + day_spacing); })
      .style(week_style)
    
    g.selectAll("rect.day")
      .data(range)
      .enter()
      .append("rect")
      //.datum(function(d) { return d })
      //.datum(format)
      .attr({
        "class": "day",
        "width": cellSize,
        "height": cellSize,
        "x": function(d) { return week(d) * (cellSize + day_spacing) + month(d) * month_spacing; },
        "y": function(d) { return day(d) * (cellSize + day_spacing); },
        rx: corner,
        ry: corner,
      })
      .style(day_style)
      .append("title")
      .text(function(d) {
        return d;
      })
      
    if(trim) {
      //add weekday labels
      g.selectAll("text.weekday")
        .data(d3.range(7))
      .enter()
      .append("text")
        .text(function(d) { return weekday(d); })
      //.datum(function(d) { return d })
      //.datum(format)
        .attr({
          class: "weekday",
          width: w,
          height: cellSize,
          x: -cellSize,
          y: function(d) { return d * (cellSize + day_spacing)+cellSize-2; },
          "text-anchor": "middle"
        })
        .style({
          cursor: "pointer",
          "text-transform": "uppercase", 
          "font-size": "10px",
          "letter-spacing": "1px",
          "font-weight": "bold",
          "fill": "#727C80"
        })
        
        console.log(d3.time.months(start, end))
      //add month labels
       //add weekday labels
      g.selectAll("text.month")
        .data(d3.time.months(start, end))
      .enter()
      .append("text")
        .text(function(d) { return month_names(d); })
      //.datum(function(d) { return d })
      //.datum(format)
        .attr({
          class: "month",
          width: w,
          height: cellSize,
          x: function(d) { return week(d) * (cellSize + day_spacing) + month(d) * month_spacing + 2.5 * (day_spacing+cellSize); },
          y: -10,
          "text-anchor": "middle"
        })
        .style({
          cursor: "pointer",
          "text-transform": "uppercase", 
          "font-size": "11px",
          "letter-spacing": "1px",
          "font-weight": "bold",
          "fill": "#5C6A8A"
        })
    }
                    
      
   
  };

      
  function layout() {
    w = width - margin.right - margin.left; // width
    h = height - margin.top - margin.bottom; // height
    
    cellSize = (w - (12 * month_spacing)) /(range.length/7+1) - day_spacing
  }
  
  chart.highlight_dow = function() {
    g.selectAll("text.weekday")
      .attr("pointer-events", "all")
      .on("mouseover", function(d) {
        g.selectAll("rect.day")
          .style(day_style)
        g.selectAll("rect.day")
          .filter(function(c) { return +day(c) === d; })
          .style({
            fill: highlight_color
          })
      });
    g.selectAll("rect.day")
      .on("mouseover", function(d) {
        g.selectAll("rect.day")
          .style(day_style)
        g.selectAll("rect.day")
          .filter(function(c) { return +day(c) === +day(d); })
          .style({
            fill: highlight_color
          })
      })
  }
  chart.highlight_week = function() {
    g.selectAll("rect.day")
      .on("mouseover", function(d) {
        g.selectAll("rect.day")
          .style(day_style)
        g.selectAll("rect.day")
          .filter(function(c) { return +week(c) === +week(d); })
          .style({
            fill: highlight_color
          })
      })
  };
  chart.highlight_month = function() {
    g.selectAll("text.month")
      .on("mouseover", function(d) {
        g.selectAll("rect.day")
          .style(day_style)
        g.selectAll("rect.day")
          .filter(function(c) { return +month(c) === +month(d); })
          .style({
            fill: highlight_color
          })
      })
    
  };
  chart.clear_highlight = function() {
    g.selectAll("rect.day")
      .style(day_style)
  };
  chart.highlight_range = function(start, end, options) {
    var sel = g.selectAll("rect.day")
      .filter(function(d) { return d >= start && d <= end; })
      .style({
        fill: highlight_color
      });
    if(options) {
      if(options.style) {
        sel.style(options.style);
      }
    }
  }

  
  chart.width = function(value) {
    if (!arguments.length) { return width; }
    width = value;
    return chart;
  };
  chart.height = function(value) {
    if (!arguments.length) { return height; }
    height = value;
    return chart;
  };
  chart.day_spacing = function(value) {
    if (!arguments.length) { return day_spacing; }
    day_spacing = value;
    return chart;
  };
  chart.week_spacing = function(value) {
    if (!arguments.length) { return week_spacing; }
    week_spacing = value;
    return chart;
  };
  chart.month_spacing = function(value) {
    if (!arguments.length) { return month_spacing; }
    month_spacing = value;
    return chart;
  };
  
  chart.day_style = function(value) {
    if (!arguments.length) { return day_style; }
    day_style = value;
    return chart;
  };
  chart.week_style = function(value) {
    if (!arguments.length) { return week_style; }
    week_style = value;
    return chart;
  };
  
  chart.highlight = function(value) {
    //Trying out a different pattern for setting behavior functions
    if (!arguments.length) { highlight(group); }
    highlight = value;
    highlight(group);
    return chart;
  };
  
  
  return chart;
}

inlet.svg