visualizing the flavor bible data

<!DOCTYPE html>
<canvas id="bubble" height="600" width="400"></canvas>
<script src=https://documentcloud.github.com/underscore/underscore.js></script>
<script src=https://mbostock.github.com/d3/d3.v2.js?2.8.1></script>

d3.csv("flavorbible2.csv", function(csv) {
// so the csv variable in here is the whole csv file

var y = Math.random();
		// keeping the circle visible along the y axis
		while (((h*y) - (max_r * r) < 0) || ((h*y) + (max_r *r) > h))
		{
			y = Math.random();
		}
		
		return [x, y, taste_quality[elm["quality"]], 'blue', elm["ingredient2"]];		
	
	});	
	
	graph(data_for_graph);	
});

//_.chain.pluck("fat (g)").max.value[];

function graph(data) {
	/* set up canvas, get tallest column height */
	var canvas = document.getElementById('bubble');
	var ctx = canvas.getContext('2d');
	var w = 400,
	    h = 400,
    	max_r = 40;

/* render to canvas */
	_(data).each(bubble);

/* d is of form [x, y, r, color, label] */
	function bubble(d) {
	  ctx.fillStyle = d[3];
	  ctx.beginPath();
	  ctx.arc( w*d[0],
	           h*d[1],
    	       max_r*d[2],
        	   0,
           	2*Math.PI);
	  ctx.closePath();
	  ctx.fill();
	  
	  // the bubble's label
	  ctx.font = "20pt Calibri";
	  ctx.fillStyle = "yellow";
	  ctx.fillText(d[4], w*d[0]-(max_r*d[2]), h*d[1]);

};
};
// when in doubt, just console.log whatever data in the scope
	// to see the format its in and go from there

// _.filter(data, function(d) {
//   2 nutrients as axees. color bubbles based on their food groups
	// scale the data, print bubbles 
</script>