D3 Examples - visualizing the flavor bible data

xxxxxxxxxx
 
<!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>
​
<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>
    