RandomEtc · January 29, 2015 19:37
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <style>
  html, body { margin: 0; }
  .line {
    fill: none;
    stroke-width: 2.0;
  }
  .axis .tick line, .axis path.domain {
    fill: none;
    stroke: black;
  }
  .axis .tick text {
    font-family: sans-serif;
  }
 </style>

 <body>

 <script src="http://d3js.org/d3.v3.js"></script>
 <script src="sales-generator.js"></script>

 <script>

 var itemBuckets = salesGenerator.itemBuckets;

 // d3 margin conventions.start()
 var margin = {
  left: 50,
  top: 10,
  bottom: 30,
  right: 10
 };

 var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

 var container = svg.append('g').attr('transform', 'translate('+[margin.left,margin.top]+')')
 // d3 margin conventions.end()

 var xScale = d3.scale.linear()
  .domain([0,23])
  .range([0, width]);

 var yScale = d3.scale.linear()
  .domain([0, d3.max(itemBuckets, function(d) { return d.maxSales; })])
  .range([height, 0]);

 var line = d3.svg.line()
  .x(function(d, i) { return xScale(i); })
  .y(function(d) { return yScale(d); });

 var xAxis = d3.svg.axis().scale(xScale);

 var yAxis = d3.svg.axis().scale(yScale).orient('left');

 container.append('g')
  .attr('class','x axis')
  .attr('transform','translate(0,'+height+')')
  .call(xAxis);

 container.append('g')
  .attr('class','y axis')
  .call(yAxis);

 var lineLayer = container.append('g');

 function update(data) {
  var lines = lineLayer.selectAll('.line')
    .data(data);

  lines.enter().append('path')
    .attr('d', function(d) { return line(d.buckets) })
    .attr('class', 'line')
    .style('stroke', function(d) { return d.color; })
 }

 update(itemBuckets);

 </script>
diff --git a/sales-generator.js b/sales-generator.js
 var salesGenerator = (function() {

  var 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'
    }
  ]

  var 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());
  }

  var 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;
        });

    var maxSales = d3.max(bucketData);

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

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

  return {
    itemBuckets: itemBuckets
  };

 })();
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>
	html, body { margin: 0; }
	.line {
	fill: none;
	stroke-width: 2.0;
	}
	.axis .tick line, .axis path.domain {
	fill: none;
	stroke: black;
	}
	.axis .tick text {
	font-family: sans-serif;
	}
	</style>

	<body>

	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="sales-generator.js"></script>

	<script>

	var itemBuckets = salesGenerator.itemBuckets;

	// d3 margin conventions.start()
	var margin = {
	left: 50,
	top: 10,
	bottom: 30,
	right: 10
	};

	var width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

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

	var container = svg.append('g').attr('transform', 'translate('+[margin.left,margin.top]+')')
	// d3 margin conventions.end()

	var xScale = d3.scale.linear()
	.domain([0,23])
	.range([0, width]);

	var yScale = d3.scale.linear()
	.domain([0, d3.max(itemBuckets, function(d) { return d.maxSales; })])
	.range([height, 0]);

	var line = d3.svg.line()
	.x(function(d, i) { return xScale(i); })
	.y(function(d) { return yScale(d); });

	var xAxis = d3.svg.axis().scale(xScale);

	var yAxis = d3.svg.axis().scale(yScale).orient('left');

	container.append('g')
	.attr('class','x axis')
	.attr('transform','translate(0,'+height+')')
	.call(xAxis);

	container.append('g')
	.attr('class','y axis')
	.call(yAxis);

	var lineLayer = container.append('g');

	function update(data) {
	var lines = lineLayer.selectAll('.line')
	.data(data);

	lines.enter().append('path')
	.attr('d', function(d) { return line(d.buckets) })
	.attr('class', 'line')
	.style('stroke', function(d) { return d.color; })
	}

	update(itemBuckets);

	</script>
	var salesGenerator = (function() {

	var 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'
	}
	]

	var 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());
	}

	var 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;
	});

	var maxSales = d3.max(bucketData);

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

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

	return {
	itemBuckets: itemBuckets
	};

	})();