bengolder/index.html

## index.html
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF8">

</head>
<body>

    <script src="http://d3js.org/d3.v3.min.js"  charset="utf-8"></script>
    <script src="http://code.shutterstock.com/rickshaw/vendor/d3.layout.min.js"></script>
    <script src="http://code.shutterstock.com/rickshaw/rickshaw.min.js"></script>

    <script src="tosci_ben.js"  charset="utf-8"></script>

    <div id="chart"></div>

<script>
console.log("preparing to graph");

  var data = [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 17 }, { x: 3, y: 42 } ];

var graph = new Rickshaw.Graph( {
	element: document.querySelector("#chart"),
	width: 580,
	height: 250,
	series: [ {
		color: 'steelblue',
        data: preppedCoffeeData //<--- this doesn't work
        //data: data //<--- but this does. i don't get it!
	} ]
} );
console.log("graphed!");
graph.render();

</script>

</body>
</html>

## tosci_ben.js
function parseRow(d) {
  var dateTimeJoiner = d3.time.format("%x %X"); // combines date and time into a Date object
  var dateTime = dateTimeJoiner.parse(d.Date + " " + d.Time) // grabs the date and time
  var gross_sales_conversion = +d["Gross Sales"].substr(1) //strips the $ sign
  var total_sales = gross_sales_conversion * 1.07 //add tax
  return {
        date: dateTime,
        category: d.Category,
        item: d.Item,
        quantity: +d.Quantity,
        pricepoint: d["Price Point Name"],
        gross_sales: gross_sales_conversion,
        total_sale: +d3.format(".2f")(total_sales), // rounds to 2 decimal places
        device_name: d["Device Name"]
  };
}

function handleRows( error, rows ) {
  // this function is only called once all the rows are loaded
  // In this function you can now access the loaded and parsed rows
  rows.forEach( handleRow );
  //console.log("dataset after loading csv:", dataset)
  //console.log("coffeeData after full loading:", coffeeData);
  coffeeData.forEach(prepRowForRickshaw);
  //reverses the order of entries to increase since they're added to the array from close of the store to open (22 down to 8)
  preppedCoffeeData.reverse();
}

function handleRow( row, i, rows ) {
  //console.log("item #", i, row.date, "adding to dataset");
  var hour = d3.time.hour.floor(row.date);
    if (row.category == "Coffee") { // for all items that are coffee...
      //console.log("Adding", row.item, "to dataset");
      //console.log("This item was sold in the hour of", d3.time.hour.floor(row.date));
      // if the hour of sale of this item exists as a key in our sales dictionary
      if (!(coffeeData.has(hour))) {
        //add the total_sale to that hour
        //coffeeData[hour] = row.total_sale; OLD IDEA AS PYTHON DICTIONARY
        coffeeData.set(hour, row.total_sale);
        //console.log("Adding", row.total_sale, "of", row.item, "to new hour:", d3.time.hour.floor(row.date))
      }
      //otherwise, add that hour to the dictionary and initialize it with this item's total_sale
      else {
        //coffeeData[hour] += row.total_sale OLD IDEA AS PYTHON DICTIONARY
        //get current sales for this hour
        var currentSales = coffeeData.get(hour);
        //add this particular sale to the current hour
        coffeeData.set(hour, currentSales + row.total_sale);
        //console.log("Adding", row.total_sale, "of", row.item, "to existing hour", d3.time.hour.floor(row.date));
      }

  }
  //dataset.push(row);
}


// d3.csv( csv_file_path, parsing_function, callback_function)
d3.csv("5feb2014.csv", parseRow, handleRows);

//var dataset = [];
var coffeeData = d3.map();
//var coffeeMap = d3.map(coffeeData);
//console.log("dataset before loading csv:", dataset)


//make an array
var preppedCoffeeData = [];

//create an object for each key in the map with x and y properties
function prepRowForRickshaw(key,value) { //function pushes sales data to preppedCoffeeData in the proper form for Rickshaw (x: time, y: total_sale)
  //Convert the d3.date into a js Date object and then get the hours as an integer
  var hourInteger = new Date(key).getHours();
  //create an object with the x and y values as the hour (int) and total sales amount, respectively
  //var xy = {x: 0, y: 1} <--- even this doesn't work...
  var xy = {x: hourInteger, y: value};
  //Push the object into our array to be graphed by rickshaw
  preppedCoffeeData.push (xy);
}
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF8">

	</head>
	<body>

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://code.shutterstock.com/rickshaw/vendor/d3.layout.min.js"></script>
	<script src="http://code.shutterstock.com/rickshaw/rickshaw.min.js"></script>

	<script src="tosci_ben.js" charset="utf-8"></script>

	<div id="chart"></div>

	<script>
	console.log("preparing to graph");

	var data = [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 17 }, { x: 3, y: 42 } ];

	var graph = new Rickshaw.Graph( {
	element: document.querySelector("#chart"),
	width: 580,
	height: 250,
	series: [ {
	color: 'steelblue',
	data: preppedCoffeeData //<--- this doesn't work
	//data: data //<--- but this does. i don't get it!
	} ]
	} );
	console.log("graphed!");
	graph.render();

	</script>

	</body>
	</html>
	function parseRow(d) {
	var dateTimeJoiner = d3.time.format("%x %X"); // combines date and time into a Date object
	var dateTime = dateTimeJoiner.parse(d.Date + " " + d.Time) // grabs the date and time
	var gross_sales_conversion = +d["Gross Sales"].substr(1) //strips the $ sign
	var total_sales = gross_sales_conversion * 1.07 //add tax
	return {
	date: dateTime,
	category: d.Category,
	item: d.Item,
	quantity: +d.Quantity,
	pricepoint: d["Price Point Name"],
	gross_sales: gross_sales_conversion,
	total_sale: +d3.format(".2f")(total_sales), // rounds to 2 decimal places
	device_name: d["Device Name"]
	};
	}

	function handleRows( error, rows ) {
	// this function is only called once all the rows are loaded
	// In this function you can now access the loaded and parsed rows
	rows.forEach( handleRow );
	//console.log("dataset after loading csv:", dataset)
	//console.log("coffeeData after full loading:", coffeeData);
	coffeeData.forEach(prepRowForRickshaw);
	//reverses the order of entries to increase since they're added to the array from close of the store to open (22 down to 8)
	preppedCoffeeData.reverse();
	}

	function handleRow( row, i, rows ) {
	//console.log("item #", i, row.date, "adding to dataset");
	var hour = d3.time.hour.floor(row.date);
	if (row.category == "Coffee") { // for all items that are coffee...
	//console.log("Adding", row.item, "to dataset");
	//console.log("This item was sold in the hour of", d3.time.hour.floor(row.date));
	// if the hour of sale of this item exists as a key in our sales dictionary
	if (!(coffeeData.has(hour))) {
	//add the total_sale to that hour
	//coffeeData[hour] = row.total_sale; OLD IDEA AS PYTHON DICTIONARY
	coffeeData.set(hour, row.total_sale);
	//console.log("Adding", row.total_sale, "of", row.item, "to new hour:", d3.time.hour.floor(row.date))
	}
	//otherwise, add that hour to the dictionary and initialize it with this item's total_sale
	else {
	//coffeeData[hour] += row.total_sale OLD IDEA AS PYTHON DICTIONARY
	//get current sales for this hour
	var currentSales = coffeeData.get(hour);
	//add this particular sale to the current hour
	coffeeData.set(hour, currentSales + row.total_sale);
	//console.log("Adding", row.total_sale, "of", row.item, "to existing hour", d3.time.hour.floor(row.date));
	}

	}
	//dataset.push(row);
	}


	// d3.csv( csv_file_path, parsing_function, callback_function)
	d3.csv("5feb2014.csv", parseRow, handleRows);

	//var dataset = [];
	var coffeeData = d3.map();
	//var coffeeMap = d3.map(coffeeData);
	//console.log("dataset before loading csv:", dataset)


	//make an array
	var preppedCoffeeData = [];

	//create an object for each key in the map with x and y properties
	function prepRowForRickshaw(key,value) { //function pushes sales data to preppedCoffeeData in the proper form for Rickshaw (x: time, y: total_sale)
	//Convert the d3.date into a js Date object and then get the hours as an integer
	var hourInteger = new Date(key).getHours();
	//create an object with the x and y values as the hour (int) and total sales amount, respectively
	//var xy = {x: 0, y: 1} <--- even this doesn't work...
	var xy = {x: hourInteger, y: value};
	//Push the object into our array to be graphed by rickshaw
	preppedCoffeeData.push (xy);
	}