xxxxxxxxxx
<meta charset="utf-8">
<style>
</style>
<body>
<script src="https://d3js.org/d3.v3.js"></script>
<script>
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