dhoboy/flavorbible2.csv

## flavorbible2.csv

          
            ingredient1
            ingredient2
            quality

            
              chard
              anchovies
              heaven

            
              chard
              bacon
              high_rec

            
              chard
              basil
              freq_rec

            
              chard
              bcheese
              rec

## index.html
<!DOCTYPE html>
<canvas id="bubble" height="600" width="400"></canvas>
<script src=http://documentcloud.github.com/underscore/underscore.js></script>
<script src=http://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>
ingredient1	ingredient2	quality
chard	anchovies	heaven
chard	bacon	high_rec
chard	basil	freq_rec
chard	bcheese	rec
	<!DOCTYPE html>
	<canvas id="bubble" height="600" width="400"></canvas>
	<script src=http://documentcloud.github.com/underscore/underscore.js></script>
	<script src=http://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 (((xw) - (max_r r) < 0) \|\| ((xw) + (max_r r) > w))
	{
	x = Math.random();
	}

	//var who = ((xw) + (max_r r));
	//console.log(who);

	var y = Math.random();
	// keeping the circle visible along the y axis
	while (((hy) - (max_r r) < 0) \|\| ((hy) + (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], wd[0]-(max_rd[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>