-
-
Save alxngyn/e1390b68986a3b49d561 to your computer and use it in GitHub Desktop.
visualizing the flavor bible data
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ingredient1 | ingredient2 | quality | |
|---|---|---|---|
| chard | anchovies | heaven | |
| chard | bacon | high_rec | |
| chard | basil | freq_rec | |
| chard | bcheese | rec |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment