Skip to content

Instantly share code, notes, and snippets.

@ctufts

ctufts/.block

Last active October 19, 2021 21:13
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Glycemic Load Per Serving Visualization
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
gi_table_cleaned.csv
food gi ss gload food_category
Banana cake, made with sugar 47 60 14 BAKERY PRODUCTS AND BREADS
Banana cake, made without sugar 55 60 12 BAKERY PRODUCTS AND BREADS
Sponge cake, plain 46 63 17 BAKERY PRODUCTS AND BREADS
Vanilla cake w/ vanilla frosting (Betty Crocker) 42 111 24 BAKERY PRODUCTS AND BREADS
Apple muffin, made w/rolled oats & sugar 44 60 13 BAKERY PRODUCTS AND BREADS
Apple muffin, made w/rolled oats & w/o sugar 48 60 9 BAKERY PRODUCTS AND BREADS
Waffles, Aunt Jemima® 76 35 10 BAKERY PRODUCTS AND BREADS
Bagel, white, frozen 72 70 25 BAKERY PRODUCTS AND BREADS
Baguette, white, plain 95 30 14 BAKERY PRODUCTS AND BREADS
Coarse barley bread, 80% kernels 34 30 7 BAKERY PRODUCTS AND BREADS
Hamburger bun 61 30 9 BAKERY PRODUCTS AND BREADS
Kaiser roll 73 30 12 BAKERY PRODUCTS AND BREADS
Pumpernickel bread 56 30 7 BAKERY PRODUCTS AND BREADS
50% cracked wheat kernel bread 58 30 12 BAKERY PRODUCTS AND BREADS
White wheat flour bread, average 75 30 11 BAKERY PRODUCTS AND BREADS
Wonder® bread, average 73 30 10 BAKERY PRODUCTS AND BREADS
Whole wheat bread, average 69 30 9 BAKERY PRODUCTS AND BREADS
100% Whole Grain® bread (Natural Ovens) 51 30 7 BAKERY PRODUCTS AND BREADS
Pita bread, white 68 30 10 BAKERY PRODUCTS AND BREADS
Corn tortilla 52 50 12 BAKERY PRODUCTS AND BREADS
Wheat tortilla 30 50 8 BAKERY PRODUCTS AND BREADS
Coca Cola® (US formula) 63 250 mL 16 BEVERAGES
Fanta®, orange soft drink 68 250 mL 23 BEVERAGES
Lucozade®, original (sparkling glucose drink) 95 250 mL 40 BEVERAGES
Apple juice, unsweetened 41 250 mL 12 BEVERAGES
Cranberry juice cocktail (Ocean Spray®) 68 250 mL 24 BEVERAGES
Gatorade, orange flavor (US formula) 89 250 mL 13 BEVERAGES
Orange juice, unsweetened, average 50 250 mL 12 BEVERAGES
Tomato juice, canned, no sugar added 38 250 mL 4 BEVERAGES
All-Bran®, average 44 30 9 BREAKFAST CEREALS AND RELATED PRODUCTS
Coco Pops®, average 77 30 20 BREAKFAST CEREALS AND RELATED PRODUCTS
Cornflakes®, average 81 30 20 BREAKFAST CEREALS AND RELATED PRODUCTS
Cream of Wheat® 66 250 17 BREAKFAST CEREALS AND RELATED PRODUCTS
Cream of Wheat®, Instant 74 250 22 BREAKFAST CEREALS AND RELATED PRODUCTS
Grape-Nuts® 75 30 16 BREAKFAST CEREALS AND RELATED PRODUCTS
Muesli, average 56 30 10 BREAKFAST CEREALS AND RELATED PRODUCTS
Oatmeal, average 55 250 13 BREAKFAST CEREALS AND RELATED PRODUCTS
Instant oatmeal, average 79 250 21 BREAKFAST CEREALS AND RELATED PRODUCTS
Puffed wheat cereal 80 30 17 BREAKFAST CEREALS AND RELATED PRODUCTS
Raisin Bran® 61 30 12 BREAKFAST CEREALS AND RELATED PRODUCTS
Special K® (US formula) 69 30 14 BREAKFAST CEREALS AND RELATED PRODUCTS
Pearled barley, average 25 150 11 GRAINS
Sweet corn on the cob 48 60 14 GRAINS
Couscous 65 150 9 GRAINS
Quinoa 53 150 13 GRAINS
White rice, boiled, type non-specified 72 150 29 GRAINS
Quick cooking white basmati 63 150 26 GRAINS
Brown rice, steamed 50 150 16 GRAINS
Parboiled Converted white rice (Uncle Ben's®) 38 150 14 GRAINS
Whole wheat kernels, average 45 50 15 GRAINS
Bulgur, average 47 150 12 GRAINS
Graham crackers 74 25 13 COOKIES AND CRACKERS
Vanilla wafers 77 25 14 COOKIES AND CRACKERS
Shortbread 64 25 10 COOKIES AND CRACKERS
Rice cakes, average 82 25 17 COOKIES AND CRACKERS
Rye crisps, average 64 25 11 COOKIES AND CRACKERS
Soda crackers 74 25 12 COOKIES AND CRACKERS
Ice cream, regular, average 62 50 8 DAIRY PRODUCTS AND ALTERNATIVES
Ice cream, premium (Sara Lee®) 38 50 3 DAIRY PRODUCTS AND ALTERNATIVES
Milk, full-fat, average 31 250 mL 4 DAIRY PRODUCTS AND ALTERNATIVES
Milk, skim, average 31 250 mL 4 DAIRY PRODUCTS AND ALTERNATIVES
Reduced-fat yogurt with fruit, average 33 200 11 DAIRY PRODUCTS AND ALTERNATIVES
Apple, average 36 120 5 FRUITS
Banana, raw, average 48 120 11 FRUITS
Dates, dried, average 42 60 18 FRUITS
Grapefruit 25 120 3 FRUITS
Grapes, black 59 120 11 FRUITS
Oranges, raw, average 45 120 5 FRUITS
Peach, average 42 120 5 FRUITS
Peach, canned in light syrup 52 120 9 FRUITS
Pear, raw, average 38 120 4 FRUITS
Pear, canned in pear juice 44 120 5 FRUITS
Prunes, pitted 29 60 10 FRUITS
Raisins 64 60 28 FRUITS
Watermelon 72 120 4 FRUITS
Baked beans 40 150 6 BEANS AND NUTS
Black-eyed peas 50 150 15 BEANS AND NUTS
Black beans 30 150 7 BEANS AND NUTS
Chickpeas 10 150 3 BEANS AND NUTS
Chickpeas, canned in brine 42 150 9 BEANS AND NUTS
Navy beans, average 39 150 12 BEANS AND NUTS
Kidney beans, average 34 150 9 BEANS AND NUTS
Lentils 28 150 5 BEANS AND NUTS
Soy beans, average 15 150 1 BEANS AND NUTS
Cashews, salted 22 50 3 BEANS AND NUTS
Peanuts 13 50 1 BEANS AND NUTS
Fettucini 32 180 15 PASTA and NOODLES
Macaroni, average 50 180 24 PASTA and NOODLES
Macaroni and Cheese (Kraft®) 64 180 33 PASTA and NOODLES
Spaghetti, white, boiled, average 46 180 22 PASTA and NOODLES
Spaghetti, white, boiled 20 min 58 180 26 PASTA and NOODLES
Spaghetti, whole-grain, boiled 42 180 17 PASTA and NOODLES
Corn chips, plain, salted 42 50 11 SNACK FOODS
Fruit Roll-Ups® 99 30 24 SNACK FOODS
M & M's®, peanut 33 30 6 SNACK FOODS
Microwave popcorn, plain, average 65 20 7 SNACK FOODS
Potato chips, average 56 50 12 SNACK FOODS
Pretzels, oven-baked 83 30 16 SNACK FOODS
Snickers Bar®, average 51 60 18 SNACK FOODS
Green peas 54 80 4 VEGETABLES
Carrots, average 39 80 2 VEGETABLES
Parsnips 52 80 4 VEGETABLES
Baked russet potato 111 150 33 VEGETABLES
Boiled white potato, average 82 150 21 VEGETABLES
Instant mashed potato, average 87 150 17 VEGETABLES
Sweet potato, average 70 150 22 VEGETABLES
Yam, average 54 150 20 VEGETABLES
Hummus (chickpea salad dip) 6 30 0 MISCELLANEOUS
Chicken nuggets 46 100 7 MISCELLANEOUS
Pizza (plain - parmesan & tomato sauce) 80 100 22 MISCELLANEOUS
Pizza, Super Supreme (Pizza Hut®) 36 100 9 MISCELLANEOUS
Honey, average 61 25 12 MISCELLANEOUS
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<style>
#menu{
position: absolute;
top: 65px;
left: 30px;
width: 300px;
}
li.button {
color: #870328;
}
#chart {
position: absolute;
top: 30px;
left: 250px;
width: 900px;
/*margin: 25px auto;*/
}
#about {
position: absolute;
top: 510px;
left: 30px;
width: 800px;
font-size: 16px;
}
#references {
position: absolute;
top:750px;
left: 30px;
}
.label {
/*font-size: 10px;*/
font: 10px sans-serif;
fill: black;
}
.button {
font-size: 16px;
}
rect.bar {
stroke: black;
stroke-width:2;
fill-opacity: 0.6;
fill: #FF0505;
}
text {
font: 14px sans-serif;
text-anchor: end;
}
ul {
list-style: none;
font-size: 12px;
padding: 0;
margin-top: 3px;
}
li {
cursor: pointer;
padding-bottom: 5px;
}
body {
background-color: #DED3D3;
}
</style>
</head>
<body>
<div id="title">
<h2> Glycemic Load of 100+ Common Foods </h2>
</div>
<div id="menu">
<p>
<h3>Food Category</h3>
<ul>
<li class="button" id="BAKERY PRODUCTS AND BREADS">Breads</li>
<li class="button" id="BEVERAGES">Beverages</li>
<li class="button" id="BREAKFAST CEREALS AND RELATED PRODUCTS">Cereals</li>
<li class="button" id="GRAINS">Grains</li>
<li class="button" id="COOKIES AND CRACKERS">Cookies</li>
<li class="button" id="DAIRY PRODUCTS AND ALTERNATIVES">Dairy</li>
<li class="button" id="FRUITS">Fruits</li>
<li class="button" id="BEANS AND NUTS">Beans and Nuts</li>
<li class="button" id="PASTA and NOODLES">Pasta/Noodles</li>
<li class="button" id="SNACK FOODS">Snacks</li>
<li class="button" id="VEGETABLES">Vegatables</li>
<li class="button" id="MISCELLANEOUS">Miscellaneous</li>
</ul>
</div>
<div id = "chart"><svg></svg></div>
<div id = "about">
<h3>Description</h3
<p>
<b>The chart represents the the glycemic load per serving:</b><br/>
To understand a food's complete effect on blood sugar, you need
to know both how quickly the food makes glucose enter the bloodstream, and
how much glucose it will deliver. A separate value called glycemic load does
that. It gives a more accurate picture of a food's real-life impact on
blood sugar.
The glycemic load is determined by multiplying the grams of
a carbohydrate in a serving by the glycemic index, then dividing by 100.
A glycemic load of 10 or below is considered low; 20 or above is considered
high. Watermelon, for example, has a high glycemic index (80).
But a serving of watermelon has so little carbohydrate (6 grams) that
its glycemic load is only 5.<a href="#fn1" id="ref1"><sup>1</sup></a>
The data can be found in the Harvard
Health Publications article <i>Glycemic index and glycemic load for 100+ foods:
Measuring carbohydrate effects can help glucose management<i/>
</div>
<!-- <div id="description">
</div> -->
<script>
var margin = {top: 20, right: 20, bottom: 50, left: 300},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleBand().range([0, height]);
d3.csv("gi_table_cleaned.csv", type, function(error, data) {
// add function for data selection
// add a selector of some sort
var bev_data = data.filter(function(row) {
return row["food_category"] == 'BEVERAGES'});
x.domain([0, d3.max(bev_data, function(d) { return d.gload; })]);
y.domain(bev_data.map(function(d) { return d.food; }));
var barHeight = height/bev_data.length;
var bar = svg.selectAll(".bar")
.data(bev_data)
.enter().append("rect")
.attr("width", function(d) { return x(d.gload); })
.attr("height", barHeight - 3)
.attr("class", "bar")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.attr("class", "x axis")
.call(d3.axisBottom(x))
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", 30)
.style("text-anchor", "end")
.text("Glycemic Load Per Serving");
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(y));
// add event listener
d3.selectAll(".button")
.on("click", function() {
//New values for dataset
var category = this.id
var bev_data = data.filter(function(row) {
return row["food_category"] == category;
});
x.domain([0, d3.max(bev_data, function(d) { return d.gload; })]);
y.domain(bev_data.map(function(d) { return d.food; }));
var barHeight = height/bev_data.length;
var bars = svg.selectAll('rect')
.data(bev_data);
bars.enter().append('rect')
.attr("width", function(d) { return x(d.gload); })
.attr("height", barHeight - 3)
.attr("class", "bar")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bars.transition()
// .duration(500)
.attr("width", function(d) { return x(d.gload); })
.attr("height", barHeight - 3)
.attr("class", "bar")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bars.exit()
.transition()
.remove();
svg.select(".y.axis")
.transition()
.call(d3.axisLeft(y));
svg.select(".x.axis")
.transition()
.call(d3.axisBottom(x));
});
});
function type(d) {
d.gload = +d.gload;
return d;
}
</script>
<div id = "references">
<sup id="fn1"> <a href="http://www.health.harvard.edu/diseases-and-conditions/glycemic_index_and_glycemic_load_for_100_foods">
1.Glycemic index and glycemic load for 100+ foods:
Measuring carbohydrate effects can help glucose management.
Harvard Health Publications.
Harvard Medical School
</a>
<a href="#ref1"></a></sup>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment