Calendar Alternate Orientation v4 update

Updating the exploded month calendar to v4, originally designed by Kathy Zhou. Thanks again to Micah Stubbs for bug fixes on the other one.

<!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>

var no_months_in_a_row = Math.floor(width / (cellSize * 7 + 50));
    var shift_up = cellSize * 3;

var day = d3.timeFormat("%w"), // day of the week
        day_of_month = d3.timeFormat("%e") // day of the month
        day_of_year = d3.timeFormat("%j")
        week = d3.timeFormat("%U"), // week number of the year
        month = d3.timeFormat("%m"), // month number
        year = d3.timeFormat("%Y"),
        percent = d3.format(".1%"),
        format = d3.timeFormat("%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")

//  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");

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);

rect.filter(function(d) {
    return (data.has(d)); 
  })
      .attr("class", function(d) {
        return "day " + color(data.get(d)); 
      })
    .select("title")
      .text(function(d) { return d + ": " + percent(data.get(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();
      }

});

</body>
</html>

Modified http://d3js.org/d3.v4.js to a secure url

Modified http://code.jquery.com/jquery-latest.min.js to a secure url

https://d3js.org/d3.v4.js

https://code.jquery.com/jquery-latest.min.js