bhvaleri/index.html

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

<style>
</style>

<body>

<script src="http://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>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>
	</style>

	<body>

	<script src="http://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>
No results found