title: d3.js calendar view weeks in rows
body: <p>Can anybody help me convert the d3.js Calendar View implementation which looks like the one depicted here (weeks as columns): <a href="https://stackoverflow.com/questions/13892816/d3-calendar-view-using-associative-array">D3 Calendar View using Associative Array</a>  </p>
  
  <p>to something more like this (weeks as rows): <a href="http://kamisama.github.io/cal-heatmap/v2/" rel="nofollow noreferrer">http://kamisama.github.io/cal-heatmap/v2/</a>  (See Months > days (horizontally) section)</p>
  
  <p>I've had a go at playing around with the axes, but to no avail.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>My current code looks like this:</p>
  
  <pre><code>raApp.directive('heatMapYear', function () {
  var width = 1200,
      height = 150,
      cellSize = 17; // cell size
  
  var day = d3.time.format("%w"),
      week = d3.time.format("%U"),
      month = d3.time.format("%m"),
      monthName = d3.time.format("%b"),
      format = d3.time.format("%Y-%m-%d");
  
  var color = d3.scale.quantize()
      .domain([1, 5])
      .range(d3.range(5).map(function(d) { return "rank" + d; }));
  
  return {
      restrict: 'A'
      , replace: false
      , scope: {
          chartData: '='
          , dateField: '='
      }
      , link: function (scope, element, attrs) {
          scope.$watch('chartData', function(newData, oldData) {
              d3.select(element[0]).selectAll('*').remove();
  
              if (newData != undefined) {
                  var svg = d3.select(element[0]).selectAll("svg")
                      .data(function() {
                          var years = [];
  
                          for (var i = 0; i &lt; newData.length; i++) {
                              var date = newData[i][scope.dateField];
                              var year = parseInt(date.substring(0, 4));
  
                              if (years.indexOf(year) == -1) {
                                  years.push(year);
                              }
                          }
  
                          return years;
                      })
                      .enter().append("svg")
                      .attr("width", width)
                      .attr("height", height)
                      .attr("class", "heatClass")
                      .append("g")
                      .attr("transform", "translate(" + 50 + "," + (height - cellSize * 7 - 1) + ")");
  
                  svg.append("text")
                      .attr("transform", "translate(-30," + cellSize * 3.5 + ")rotate(-90)")
                      .style("text-anchor", "middle")
                      .style("font-weight", "bold")
                      .text(function(d) { return d; });
  
                  svg.selectAll(".monthName")
                      .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
                      .enter().append("text")
                      .attr("x", function(d) {return (week(d) * cellSize + 50); })
                      .attr("y", -5)
                      .style("text-anchor", "middle")
                      .text(function(d) { return monthName(d); });
  
  
                  svg.selectAll(".dayName")
                      .data(function(d) { return ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] })
                      .enter().append("text")
                      .attr("x", -10)
                      .attr("y", function(d, i) {return (i * cellSize) + 12; })
                      .style("text-anchor", "middle")
                      .text(function(d) { return d; });
  
  
                  var svg1 = d3.select(element[0]).select("svg")
                  var legend = svg1.selectAll(".legend")
                      .data([0])
                      .enter().append("g")
                      .attr("class", "legend")
                      .attr("transform", function(d, i) {
                      return "translate(130," + (i * (cellSize) + 30) + ")";
                  });
  
                  legend.append("svg:image")
                      .attr("xlink:href", "img/RA-scale-small.png")
                      .attr("x", width - 350)
                      .attr("y", 0)
                      .attr("width",200)
                      .attr("height", 47);
  
                  var rect = svg.selectAll(".day")
                      .data(function(d) { return d3.time.days(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) { return week(d) * cellSize; })
                      .attr("y", function(d) { return day(d) * cellSize; })
                      .datum(format);
  
                  rect.append("title")
                      .text(function(d) { return d; });
  
                  svg.selectAll(".month")
                      .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
                      .enter().append("path")
                      .attr("class", "month")
                      .attr("d", monthPath);
  
  
  
                  var data = d3.nest()
                      .key(function(d) { return d[scope.dateField]; })
                      .rollup(function(d) {return {rank:d[0]["rank"],revenue:d[0]["abbrRevenue"],volume:d[0]["abbrVolume"]}})
                      .map(newData);
  
                  rect.filter(function(d) { return d in data; })
                      .attr("class", function(d) {return "day " + color(data[d].rank); })
                      .select("title")
                      .text(function(d) { return d + "\nRevenue: " + data[d].revenue + "\nVolume: " + data[d].volume });
              }
          });
  
          function monthPath(t0) {
              var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
                  d0 = +day(t0), w0 = +week(t0),
                  d1 = +day(t1), w1 = +week(t1);
              return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize
                  + "H" + w0 * cellSize + "V" + 7 * cellSize
                  + "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize
                  + "H" + (w1 + 1) * cellSize + "V" + 0
                  + "H" + (w0 + 1) * cellSize + "Z";
          }
      }
  }
  </code></pre>
  
  <p>});</p>