heat maps on heat maps

<!DOCTYPE html>
<meta charset="utf-8">

<body>

itemData = {
  itemName: 'itemName',
  hour: 1,
  cost: 5
}

items = [
  {
    name: "A",
    cost: 2
  },
    {
    name: "B",
    cost: 2.5
  },
  {
    name: "C",
    cost: 1
  },
  {
    name: "D",
    cost: 3
  }
]

newItem = function () {
  var index = Math.floor(Math.random() * (items.length));
  var time = Math.floor(Math.random() * (23));

return {
    itemName: items[index].name,
    cost: items[index].cost,
    hour: time
  };
}

var data = []

for (var i = 0; i < 1000; i++) {
  data.push(newItem());
}

itemBuckets = [];

fillBuckets = function (item) {
  var bucketData = [];
  var totalSales = 0;

for (var i = 0; i < 24; i++) {
    bucketData[i] = 0;
  }

data.filter(function(d) { return d.itemName === item; })
      .forEach(function(itemSale){
        bucketData[itemSale.hour]++;
        totalSales += itemSale.cost;
      });

itemBuckets.push({
    name: item,
    totalSales: totalSales,
    buckets: bucketData
  })
};

items.forEach(function(item){
  fillBuckets(item.name);
});

maxSales = d3.max(itemBuckets, function (bucket)
  { return bucket.totalSales; })
//should this be on a per item level?
maxCount = d3.max(itemBuckets.reduce(function(previousValue, currentValue) {
  return previousValue.concat(currentValue.buckets);
}, []));

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 900 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom
    cellSize =  width / 25;

var svg = d3.select('body').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom);

var heatMap = svg.append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
    .attr('class', 'heatmap');

itemRects = heatMap.append('g').attr('class', 'item-totals');

itemRects.selectAll('item-totals').data(itemBuckets)
  .enter().append('rect')
    .attr('width', cellSize)
    .attr('height', cellSize)
    .attr('y', function(d, i){
      return cellSize * i;
    })
    .attr('fill', 'tomato')
    .attr('opacity', function (d){
      return d.totalSales/maxSales;
    })
    .on('click', function (d, i) {
      console.log(d);
      drawHoursForItem(d, i);
    });

//other solution is to just change visibility

bucketContainer = heatMap.append('g').attr('class', 'showBuckets');

drawHoursForItem = function (bucket, i) {

var bucketGroup = bucketContainer.selectAll('.bucketsToShow')
    .data([i]);

bucketGroup.enter()
    .append('g');

bucketGroup.transition().attr('class' , 'bucketsToShow ' + i)
    .attr('transform', 'translate(' + cellSize + ',' + (i * cellSize) + ')');

var bucketData = bucketGroup.selectAll('rect')
    .data(bucket.buckets);

bucketData.enter().append('rect')
    .attr('width', cellSize)
    .attr('height', cellSize)
    .attr('x', function(d, i) {
      return cellSize * i;
    })
    .attr('fill', 'tomato')

bucketData.transition().attr('opacity', function(d) {
      return d/maxCount;
    });

bucketData.exit().remove();
  bucketGroup.exit().remove();
}

</script>

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

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