D3 Examples - calendar_heatmap multiple

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script type="text/javascript" src="//rawgithub.com/madams1/calendar_heatmap/master/calendar_heatmap.bundle.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Lato:700,400,300' rel='stylesheet' type='text/css'>
​
  <style>
    #container {
      font-family: "Lato", sans-serif;
      width: 1000px;
    }
    #ch_title, #wait {
      margin-left: 40px;
    }
  </style>
</head>
​
<body>
  <div id="container">
    <h3 id="ch_title">Daily Percentage Changes in the Dow Jones Industrial Average by Year</h3>
    <p id="wait">Loading data...</p>
  </div>
  <script>
    d3.json("dow_jones.json", function(err, dat) {
      
      // get rid of waiting msg
      d3.select("#wait").remove();
      
      // friendly range
      var multiple_extent = [-0.11, 0.11];
      
      // make a calendar heatmap for each year
      dat.forEach(function(d) {
        calendar_heatmap.create({
          target: "#container",
          data: d,
          date_var: "date",
          fill_var: "diff",
          numeric_format: ".2%",
          round: 4,
          weekdays_only: true,
          abbr_weekdays: true,
          color_scheme: calendar_heatmap.color_ramps.RdYlGn,
          title: d[0].year,
          title_size: 13,
          legend_title: "Change",
          tile_width: 14,
          tile_height: 13,
          show_legend: false,
          show_toggle: false,
          margin_top: 20,
          margin_bottom: 5,
          stroke_color: "whitesmoke",
          fill_extent: multiple_extent,
          simple_tooltip: true
        });
      });
    });
  </script>
</body>
​
    