D3 Examples - Calendar View

Calendar View
This example demonstrates loading of CSV data, which is then quantized into a diverging color scale. The values are visualized as colored cells per day. Days are arranged into columns by week, then grouped by month and years. Colors by Cynthia Brewer. Layout inspired by Rick Wicklin and Robert Allison. Dow Jones historical data copyright Yahoo! Finance or independent data provider; fair use for educational purposes.
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <style>
​
      body {
        font: 1.1em sans-serif;
      }
​
      #chart{
        width: 800px;
        margin: 0 auto;
      }
      .background {
        fill: #eee;
      }
​
      line {
        stroke: #fff;
      }
​
      text.active {
        fill: red;
      }
​
      .day {
        fill: #fff;
        stroke: #ccc;
      }
​
      .month {
        fill: none;
        stroke: #fff;
        stroke-width: 4px;
      }
      .year-title {
        font-size: 1.5em;
      }
​
      /* color ranges */
      .RdYlGn .q0-11{fill:rgb(165,0,38)}
      .RdYlGn .q1-11{fill:rgb(215,48,39)}
      .RdYlGn .q2-11{fill:rgb(244,109,67)}
      .RdYlGn .q3-11{fill:rgb(253,174,97)}
      .RdYlGn .q4-11{fill:rgb(254,224,139)}
      .RdYlGn .q5-11{fill:rgb(255,255,191)}
      .RdYlGn .q6-11{fill:rgb(217,239,139)}
      .RdYlGn .q7-11{fill:rgb(166,217,106)}
      .RdYlGn .q8-11{fill:rgb(102,189,99)}
      .RdYlGn .q9-11{fill:rgb(26,152,80)}
      .RdYlGn .q10-11{fill:rgb(0,104,55)}
​
      polylinear_color = d3.scale.linear()
        .domain([0, 3, 10])
        .range(['rgb(255,0,0)','rgb(255,255,255)','rgb(0,255,0)'])
​
      /* hover info */
      #tooltip {
        background-color: #fff;
        border: 2px solid #ccc;
        padding: 10px;
      }
​
    </style>
  </head>
    <body>
​
      <div id="chart" class="clearfix"></div>
​
  <script src="https://d3js.org/d3.v4.js"></script>
  <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script>
    var width = 960,
        height = 750,
        cellSize = 25; // cell size
​
    var no_months_in_a_row = Math.floor(width / (cellSize * 7 + 50));
    var shift_up = cellSize * 3;
​
    var day = d3.timeParse("%w"), // day of the week
        day_of_month = d3.timeParse("%e") // day of the month
        day_of_year = d3.timeParse("%j")
        week = d3.timeParse("%U"), // week number of the year
        month = d3.timeParse("%m"), // month number
        year = d3.timeParse("%Y"),
        percent = d3.format(".1%"),
        format = d3.timeParse("%Y-%m-%d");
​
    var color = d3.scaleQuantize()
        .domain([0, 10])
        .range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));
​
    var svg = d3.select("#chart").selectAll("svg")
        .data(d3.range(2016, 2017)) //years included in the viz
      .enter().append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("class", "RdYlGn")
      .append("g")
​
    var rect = svg.selectAll(".day")
        .data(function(d) { 
          return d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1));
        })
      .enter().append("rect")
        .attr("class", "day")
        .attr("width", cellSize)
        .attr("height", cellSize)
        .attr("x", function(d) {
          var month_padding = 1.2 * cellSize*7 * ((month(d)-1) % (no_months_in_a_row));
          return day(d) * cellSize + month_padding; 
        })
        .attr("y", function(d) { 
          var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
          var row_level = Math.ceil(month(d) / (no_months_in_a_row));
          return (week_diff*cellSize) + row_level*cellSize*8 - cellSize/2 - shift_up;
        })
        .datum(format);
​
    var month_titles = svg.selectAll(".month-title")  // Jan, Feb, Mar and the whatnot
          .data(function(d) { 
            return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
        .enter().append("text")
          .text(monthTitle)
          .attr("x", function(d, i) {
            var month_padding = 1.2 * cellSize*7* ((month(d)-1) % (no_months_in_a_row));
            return month_padding;
          })
          .attr("y", function(d, i) {
            var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
            var row_level = Math.ceil(month(d) / (no_months_in_a_row));
            return (week_diff*cellSize) + row_level*cellSize*8 - cellSize - shift_up;
          })
          .attr("class", "month-title")
          .attr("d", monthTitle);
​
    var year_titles = svg.selectAll(".year-title")  // Jan, Feb, Mar and the whatnot
          .data(function(d) { 
            return d3.timeYears(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
        .enter().append("text")
          .text(yearTitle)
          .attr("x", function(d, i) { return width/2 - 100; })
          .attr("y", function(d, i) { return cellSize*5.5 - shift_up; })
          .attr("class", "year-title")
          .attr("d", yearTitle);
​
        var parseDate = d3.timeParse("%Y-%m-%d");
    
    //  Tooltip Object
    var tooltip = d3.select("body")
      .append("div").attr("id", "tooltip")
      .style("position", "absolute")
      .style("z-index", "10")
      .style("visibility", "hidden")
      .text("a simple tooltip");
    
//     var expensesTotalByDay = d3.nest()
//   .key(function(d) { return d.name; })
//   .key(function(d) { return d.date; })
//   .rollup(function(v) { return d3.sum(v, function(d) { return d.amount; }); })
//   .map(expenses);
// console.log(JSON.stringify(expensesTotalByDay));
// => {"jim":{"11/12/2015":34,"12/01/2015":45},
//  "carl":{"11/12/2015":120.11},
//  "stacy":{"01/04/2016":46.1,"01/05/2016":44.8}}
    
    
    d3.csv("Violations-2012.csv", function(error, data) {
  if (error) throw error;
  
  
  data.map(function(d){
//    console.log(parseDate(d.violation_date.split(" ")[0]));
//     console.log((d.violation_date).split(" ")[0]);
    return d.violation_date;
  })
      var vio_by_type = d3.nest().key(function(d) {return d.violation_type}).entries(data);
      
      var new_data = d3.nest()
        .key(function(d) {return d.violation_type})
        .key(function(d) {return parseDate(d.violation_date.split(" ")[0])})
        .rollup(function(v) { return v.length; })
        .entries(data);
      
      console.log(new_data[0]["values"]);
      
//       console.log(vio_by_type);
      
//       console.log(vio_by_type[0]["values"]);
      
//       data_agg = vio_by_type[0]["values"].map(function(d){ return d});
      
    });
​
    d3.csv("factletdata.csv", function(error, csv) {
      var data = d3.nest()
        .key(function(d) { return d.Date; })
        .rollup(function(d) { return (d[0].Facts); })
        .map(csv);
      
            //console.log(data)
​
      rect.filter(function(d) { return d in data; })
          .attr("class", function(d) {console.log(color(data[d])); return "day " + color(data[d]); })
        .select("title")
          .text(function(d) { return d + ": " + data[d]; });
​
      //  Tooltip
      rect.on("mouseover", mouseover);
      rect.on("mouseout", mouseout);
      function mouseover(d) {
        tooltip.style("visibility", "visible");
        var factlet_num = (data[d] !== undefined) ? data[d] : 0;
        var purchase_text = d + ": " + factlet_num + " factlets";
​
        tooltip.transition()        
                    .duration(200)      
                    .style("opacity", .9);      
        tooltip.html(purchase_text)  
                    .style("left", (d3.event.pageX)+30 + "px")     
                    .style("top", (d3.event.pageY) + "px"); 
      }
      function mouseout (d) {
        tooltip.transition()        
                .duration(500)      
                .style("opacity", 0); 
        var $tooltip = $("#tooltip");
        $tooltip.empty();
      }
​
    });
​
    function dayTitle (t0) {
      return t0.toString().split(" ")[2];
    }
    function monthTitle (t0) {
      return t0.toLocaleString("en-us", { month: "long" });
    }
    function yearTitle (t0) {
      return t0.toString().split(" ")[3];
    }
  </script>
​
  </body>
</html>
    