Alternative Calendar View

d3.js Calendar View Heatmap

d3.js visualization of a calendar heatmap.

A new layout compared with the original d3.js calendar. The visualization in this repository is better suited for data that span over a couple years, as opposed to decades.

Features:

tooltip hover
month and year labels

Running the visualization

Simply cd into the directory and run a localhost from there.

I recommend using this command: python -m SimpleHTTPServer

Credits

Mike Bostock for creating d3.js and the original calendar visualization. Cynthia Brewer for the color pattern. Yahoo! finance for historical data.

About

Kathy Zhou, software developer and d3 enthusiast :)

twitter: @kaffkaff

homepage: kathyzhou.com

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

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

var color = d3.scale.quantize()
        .domain([-.05, .05])
        .range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));

var svg = d3.select("#chart").selectAll("svg")
        .data(d3.range(2008, 2011))
      .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("dji.csv", function(error, csv) {
      var data = d3.nest()
        .key(function(d) { return d.Date; })
        .rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; })
        .map(csv);

console.log({data});
      
      rect.filter(function(d) { return d in data; })
          .attr("class", function(d) { return "day " + color(data[d]); })
        .select("title")
          .text(function(d) { return d + ": " + percent(data[d]); });

//  Tooltip
      rect.on("mouseover", mouseover);
      rect.on("mouseout", mouseout);
      function mouseover(d) {
        tooltip.style("visibility", "visible");
        var percent_data = (data[d] !== undefined) ? percent(data[d]) : percent(0);
        var purchase_text = d + ": " + percent_data;

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.v3.js to a secure url

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

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

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