visualizing the flavor bible data by dhoboy

index.html

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

<script>

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

	var data = _.filter(csv, function(d) {
		return d["ingredient1"] == "chard";
		});
		
	console.log(data[0]["quality"]);
		
	var taste_quality = {
	  heaven: 2,
	  high_rec: 1.4,
	  freq_rec: .8,
	  rec: .2
	};
	
	var data_for_graph = _.map(data, function(elm){
		
          		var w = 400, h = 400, max_r = 40,
			r = taste_quality[elm["quality"]];
			
		var x = Math.random();
		// keeping the circle visible along the x axis
		while (((x*w) - (max_r * r) < 0)  || ((x*w) + (max_r * r) > w)) 
		{
			x = Math.random();
		}
		
		//var who = ((x*w) + (max_r *r));
		//console.log(who);

		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>

flavorbible2.csv

ingredient1,ingredient2,quality
chard,anchovies,heaven
chard,bacon,high_rec
chard,basil,freq_rec
chard,bcheese,rec