barp

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

<body>

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

items = [
  {
    name: "A",
    cost: 2,
    color: 'steelblue'
  },
    {
    name: "B",
    cost: 2.5,
    color: 'tomato'
  },
  {
    name: "C",
    cost: 1,
    color: 'mediumturquoise'
  },
  {
    name: "D",
    cost: 3,
    color: 'plum'
  }
]

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.name; })
      .forEach(function(itemSale){
        bucketData[itemSale.hour]++;
        totalSales += itemSale.cost;
      });

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

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

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
    radius = height/2
    smallRadius = width/26;

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

var arc = d3.svg.arc()
  .outerRadius(radius)
  .innerRadius(0);

var newArc = d3.svg.arc()
    .outerRadius(smallRadius)
    .innerRadius(0);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.totalSales; });

var pieGroup = svg.append('g').attr('class', 'pieGroup')
                  .attr('transform', 'translate(' + width/2 + ',' + height/2 +')');

var barGroup = svg.append('g').attr('class', 'barGroup')
                    .attr('transform', 'translate(' +  smallRadius * 2 + ',' + 0 +')');;

var paths = null;

var g = pieGroup.selectAll('.arc')
  .data(pie(itemBuckets));

g.enter().append('g')
  .attr('class', 'arc')
  .style('fill', function(d) { return d.data.color; })
  .on('click', function(d) { refreshBars(d.data)});

g.exit().remove();

paths = g.append('path').attr('d', arc);

var refreshBars = function(data) {
  // move pie chart to half size

paths.transition().attr('d', newArc);

svg.select('.pieGroup').transition()
      .attr('transform', 'translate(' + smallRadius + ',' + height/2 + ')');

//disply heat map with data.color
  updateBars(data);
}

var updateBars = function (data) {
  var yScale = d3.scale.linear()
                .range([0, height])
                .domain([0, d3.max(data.buckets)]);

var bars = barGroup.selectAll('.bar')
    .data(data.buckets);

bars.enter().append('rect')
    .attr('class', 'bar')
    .attr('x', function (d, i){
      return smallRadius * i;
    })
    .attr('width', smallRadius);

bars.transition().attr('y', function(d) {
      return yScale(d);
    })
    .attr('height', function(d) {
      return height - yScale(d);
    })
    .style('fill', data.color);

bars.exit().remove();

}

</script>

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

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