Skip to content

Instantly share code, notes, and snippets.

@notmatt

notmatt/bd_groups.js

Forked from mbecica/bd_groups.js
Created April 8, 2012 06:38
Show Gist options
  • Save notmatt/2335257 to your computer and use it in GitHub Desktop.
Save notmatt/2335257 to your computer and use it in GitHub Desktop.
Download ZIP
pack to force-directed transition
Raw
bd_groups.js
$(function() {
var w = $('#container').width()/2,
h = w,
format = d3.format(",d"),
fill = d3.scale.category20b(),
padding = 2,
radius = d3.scale.sqrt().range([0, 12]);
var vis = d3.select("#main").append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("class", "pack")
.append("svg:g")
.attr("transform", "translate(2, 2)");
// Load data from Bitdeli
var sourceId = "i-04bb3fe3b92b1b-e31198a8",
groupsUrl = "https://out.bitdeli.com/v1/data/"+sourceId+"/groups/";
window.baseData = [];
// Get group from Bitdeli
function loadGroup(groupId) {
var items = [],
initialUrl = groupsUrl+groupId+"?max=100";
getWholeGroup(initialUrl, function(items) {
baseData = _(items).pluck("object");
redraw([{
name: foodgroups[groupId],
foods: baseData
}]);
});
function getWholeGroup(url, complete) {
$.getJSON(url, function(json) {
items.push.apply(items, json.items);
if (json.next) {
getWholeGroup(json.next, complete);
} else {
complete.call(this, items);
}
});
}
}
// Redraw visualization
function redraw(data) {
$('#main').find('.pack').children('g').empty();
$('h1').text(data[0].name);
var pack = d3.layout.pack()
.size([w - 4, h - 4])
.sort(null)
.value(getRdiFraction)
.children(getRdiChildren);
var node = vis.data(data).selectAll('g.node')
.data(pack.nodes)
.enter().append('svg:g')
.attr('class', function(d) {
return _.isUndefined(nutrients[d.id]) ? "parent" : "";
});
node.append("svg:title")
.text(function(d) {return d.name || nutrients[d.id].name});
node.append("svg:circle")
.attr("r", function(d) {return d.r})
.attr("fill", function(d) {
return _.isUndefined(nutrients[d.id]) ? "#aaa" : fill(nutrients[d.id].name)})
.attr('cx', function(d) { return d.x;})
.attr('cy', function(d) {return d.y})
.attr("class", function(d) {
return _.isUndefined(nutrients[d.id]) ? "" : "nut c" + d.id;})
.attr("id", function(d){
return _.isUndefined(nutrients[d.id]) ? "" : d.id
})
.attr("fill-opacity", function(d) {
return _.isUndefined(nutrients[d.id]) ? 0.5 : 0.7
});
// Attach mouse handlers
$('.nut').hover(function() {
var curC = $(this).attr("class").substr(4);
$('.'+curC).css({"fill-opacity":"1"});
$('h2').text(nutrients[parseFloat(curC.substr(1))].name);
}, function() {
var curC = $(this).attr("class").substr(4);
$('.'+curC).css({"fill-opacity":".7"});
$('h2').text("");
});
function getRdiChildren(parent) {
if (parent.foods) {
return _(parent.foods).filter(function(food) {
return rdiFiltered(food).length > 0;
});
} else if (parent.nutrients) {
return rdiFiltered(parent);
} else {
return undefined;
}
}
function rdiFiltered(food) {
return _(food.nutrients).filter(function(nut) {
return recommendations[nut.id];
});
}
function getRdiFraction(nut) {
return nut.amount/recommendations[nut.id]['rdi'];
}
}
window.drawForce = function() {
var c = vis.selectAll("circle.nut");
var circle = c.each(function(d) {
var my = d3.select(this);
d.radius = parseFloat(my.attr("r"));
d.color = my.attr("fill");
d.id = my.attr("id");
d.x = parseFloat(my.attr("cx"));
d.y = parseFloat(my.attr("cy"));
d.px = d.x;
d.py = d.y;
}).data();
d3.selectAll('g.parent').attr("transform","translate(-800,0)");
var force = d3.layout.force()
.nodes(circle)
.size([w, h])
.gravity(.01)
.charge(0)
.on("tick", tick)
.start();
c.call(force.drag);
function tick(e) {
c
.each(cluster(8 * e.alpha * e.alpha))
.each(collide(.5))
.attr("cx", function(d) {
return d.x; })
.attr("cy", function(d) { return d.y; });
}
// Move d to be adjacent to the cluster node.
function cluster(alpha) {
var max = {};
// Find the largest node for each cluster.
circle.forEach(function(d) {
if (!(d.id in max) || (d.radius > max[d.id].radius)) {
max[d.id] = d;
}
});
return function(d) {
var node = max[d.id],
l,
r,
x,
y,
i = -1;
if (node == d) return;
x = d.x - node.x;
y = d.y - node.y;
l = Math.sqrt(x * x + y * y);
r = d.radius + node.radius;
if (l != r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
node.x += x;
node.y += y;
}
};
}
// Resolves collisions between d and all other circles.
function collide(alpha) {
var quadtree = d3.geom.quadtree(circle);
return function(d) {
var r = d.radius + padding,
nx1 = d.x - r,
nx2 = d.x + r,
ny1 = d.y - r,
ny2 = d.y + r;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== d)) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + quad.point.radius + (d.id !== quad.point.id) * padding;
if (l < r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2
|| x2 < nx1
|| y1 > ny2
|| y2 < ny1;
});
};
}
}
// Initialize group changer
var changer = $("#group-changer");
changer.append(_(foodgroups).map(function(name, id) {
return $("<option/>").text(name).attr("value", id)[0];
})).change(function() {
loadGroup(changer.val());
});
$('#forceDrawer').click(function() {drawForce();});
// Set initial group
changer.val(2200).change();
});
Raw
foodgroups.js
var foodgroups = {
"1300": "Beef Products",
"1200": "Nut and Seed Products",
"1900": "Sweets",
"0400": "Fats and Oils",
"2500": "Snacks",
"0500": "Poultry Products",
"2000": "Cereal Grains and Pasta",
"1500": "Finfish and Shellfish Products",
"0200": "Spices and Herbs",
"1400": "Beverages",
"0300": "Baby Foods",
"2200": "Meals, Entrees, and Sidedishes",
"3600": "Restaurant Foods",
"0100": "Dairy and Egg Products",
"0900": "Fruits and Fruit Juices",
"1700": "Lamb, Veal, and Game Products",
"0700": "Sausages and Luncheon Meats",
"1800": "Baked Products",
"3500": "Ethnic Foods",
"1600": "Legumes and Legume Products",
"0800": "Breakfast Cereals",
"0600": "Soups, Sauces, and Gravies",
"1100": "Vegetables and Vegetable Products",
"2100": "Fast Foods",
"1000": "Pork Products"
};
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Food Groups</title>
<link rel="stylesheet" href="style.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.8.1/d3.v2.min.js"></script>
<script src="foodgroups.js"></script>
<script src="nutrients.js"></script>
<script src="recommendations.js"></script>
<script src="bd_groups.js"></script>
<style>
.nut {
cursor:pointer;
}
h2 {
position:absolute;
right:0;
padding-right:20px;
font-size:26px;
color:#999;
}
#container {
width:auto;
}
button {
border:1px solid #ccc;
border-radius:4px;
margin-left:10px;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Food Group</h1>
<select id="group-changer"></select>
<button id="forceDrawer">Force it!</button>
<h2></h2>
</header>
<div id="charts">
<div id="main"></div>
</div>
</div>
</body>
</html>
Raw
nutrients.js
var nutrients = {
"214": {
"unit": "g",
"name": "Maltose",
"tagname": "MALS"
},
"212": {
"unit": "g",
"name": "Fructose",
"tagname": "FRUS"
},
"213": {
"unit": "g",
"name": "Lactose",
"tagname": "LACS"
},
"210": {
"unit": "g",
"name": "Sucrose",
"tagname": "SUCS"
},
"211": {
"unit": "g",
"name": "Glucose (dextrose)",
"tagname": "GLUS"
},
"666": {
"unit": "g",
"name": "18:2 i",
"tagname": ""
},
"665": {
"unit": "g",
"name": "18:2 t not further defined",
"tagname": ""
},
"664": {
"unit": "g",
"name": "22:1 t",
"tagname": ""
},
"663": {
"unit": "g",
"name": "18:1 t",
"tagname": "F18D1T"
},
"662": {
"unit": "g",
"name": "16:1 t",
"tagname": "F16D1T"
},
"620": {
"unit": "g",
"name": "20:4 undifferentiated",
"tagname": "F20D4"
},
"627": {
"unit": "g",
"name": "18:4",
"tagname": "F18D4"
},
"626": {
"unit": "g",
"name": "16:1 undifferentiated",
"tagname": "F16D1"
},
"693": {
"unit": "g",
"name": "Fatty acids, total trans-monoenoic",
"tagname": "FATRNM"
},
"696": {
"unit": "g",
"name": "13:0",
"tagname": "F13D0"
},
"669": {
"unit": "g",
"name": "18:2 t,t",
"tagname": "F18D2TT"
},
"695": {
"unit": "g",
"name": "Fatty acids, total trans-polyenoic",
"tagname": "FATRNP"
},
"406": {
"unit": "mg",
"name": "Niacin",
"tagname": "NIA"
},
"405": {
"unit": "mg",
"name": "Riboflavin",
"tagname": "RIBF"
},
"404": {
"unit": "mg",
"name": "Thiamin",
"tagname": "THIA"
},
"341": {
"unit": "mg",
"name": "Tocopherol, beta",
"tagname": "TOCPHB"
},
"342": {
"unit": "mg",
"name": "Tocopherol, gamma",
"tagname": "TOCPHG"
},
"343": {
"unit": "mg",
"name": "Tocopherol, delta",
"tagname": "TOCPHD"
},
"629": {
"unit": "g",
"name": "20:5 n-3 (EPA)",
"tagname": "F20D5"
},
"287": {
"unit": "g",
"name": "Galactose",
"tagname": "GALS"
},
"674": {
"unit": "g",
"name": "18:1 c",
"tagname": "F18D1C"
},
"675": {
"unit": "g",
"name": "18:2 n-6 c,c",
"tagname": "F18D2CN6"
},
"676": {
"unit": "g",
"name": "22:1 c",
"tagname": ""
},
"670": {
"unit": "g",
"name": "18:2 CLAs",
"tagname": "F18D2CLA"
},
"671": {
"unit": "g",
"name": "24:1 c",
"tagname": "F24D1C"
},
"672": {
"unit": "g",
"name": "20:2 n-6 c,c",
"tagname": "F20D2CN6"
},
"673": {
"unit": "g",
"name": "16:1 c",
"tagname": "F16D1C"
},
"263": {
"unit": "mg",
"name": "Theobromine",
"tagname": "THEBRN"
},
"262": {
"unit": "mg",
"name": "Caffeine",
"tagname": "CAFFN"
},
"269": {
"unit": "g",
"name": "Sugars, total",
"tagname": "SUGAR"
},
"268": {
"unit": "kJ",
"name": "Energy",
"tagname": "ENERC_KJ"
},
"415": {
"unit": "mg",
"name": "Vitamin B-6",
"tagname": "VITB6A"
},
"417": {
"unit": "mcg",
"name": "Folate, total",
"tagname": "FOL"
},
"410": {
"unit": "mg",
"name": "Pantothenic acid",
"tagname": "PANTAC"
},
"418": {
"unit": "mcg",
"name": "Vitamin B-12",
"tagname": "VITB12"
},
"291": {
"unit": "g",
"name": "Fiber, total dietary",
"tagname": "FIBTG"
},
"319": {
"unit": "mcg",
"name": "Retinol",
"tagname": "RETOL"
},
"318": {
"unit": "IU",
"name": "Vitamin A, IU",
"tagname": "VITA_IU"
},
"313": {
"unit": "mcg",
"name": "Fluoride, F",
"tagname": "FLD"
},
"312": {
"unit": "mg",
"name": "Copper, Cu",
"tagname": "CU"
},
"317": {
"unit": "mcg",
"name": "Selenium, Se",
"tagname": "SE"
},
"618": {
"unit": "g",
"name": "18:2 undifferentiated",
"tagname": "F18D2"
},
"315": {
"unit": "mg",
"name": "Manganese, Mn",
"tagname": "MN"
},
"429": {
"unit": "mcg",
"name": "Dihydrophylloquinone",
"tagname": "VITK1D"
},
"428": {
"unit": "mcg",
"name": "Menaquinone-4",
"tagname": "MK4"
},
"521": {
"unit": "g",
"name": "Hydroxyproline",
"tagname": "HYP"
},
"613": {
"unit": "g",
"name": "16:0",
"tagname": "F16D0"
},
"421": {
"unit": "mg",
"name": "Choline, total",
"tagname": "CHOLN"
},
"309": {
"unit": "mg",
"name": "Zinc, Zn",
"tagname": "ZN"
},
"301": {
"unit": "mg",
"name": "Calcium, Ca",
"tagname": "CA"
},
"303": {
"unit": "mg",
"name": "Iron, Fe",
"tagname": "FE"
},
"304": {
"unit": "mg",
"name": "Magnesium, Mg",
"tagname": "MG"
},
"305": {
"unit": "mg",
"name": "Phosphorus, P",
"tagname": "P"
},
"306": {
"unit": "mg",
"name": "Potassium, K",
"tagname": "K"
},
"307": {
"unit": "mg",
"name": "Sodium, Na",
"tagname": "NA"
},
"697": {
"unit": "g",
"name": "15:1",
"tagname": "F15D1"
},
"641": {
"unit": "mg",
"name": "Beta-sitosterol",
"tagname": "SITSTR"
},
"518": {
"unit": "g",
"name": "Serine",
"tagname": "SER_G"
},
"645": {
"unit": "g",
"name": "Fatty acids, total monounsaturated",
"tagname": "FAMS"
},
"646": {
"unit": "g",
"name": "Fatty acids, total polyunsaturated",
"tagname": "FAPU"
},
"511": {
"unit": "g",
"name": "Arginine",
"tagname": "ARG_G"
},
"510": {
"unit": "g",
"name": "Valine",
"tagname": "VAL_G"
},
"513": {
"unit": "g",
"name": "Alanine",
"tagname": "ALA_G"
},
"512": {
"unit": "g",
"name": "Histidine",
"tagname": "HISTN_G"
},
"515": {
"unit": "g",
"name": "Glutamic acid",
"tagname": "GLU_G"
},
"514": {
"unit": "g",
"name": "Aspartic acid",
"tagname": "ASP_G"
},
"517": {
"unit": "g",
"name": "Proline",
"tagname": "PRO_G"
},
"516": {
"unit": "g",
"name": "Glycine",
"tagname": "GLY_G"
},
"621": {
"unit": "g",
"name": "22:6 n-3 (DHA)",
"tagname": "F22D6"
},
"578": {
"unit": "mcg",
"name": "Vitamin B-12, added",
"tagname": ""
},
"612": {
"unit": "g",
"name": "14:0",
"tagname": "F14D0"
},
"338": {
"unit": "mcg",
"name": "Lutein + zeaxanthin",
"tagname": "LUT+ZEA"
},
"625": {
"unit": "g",
"name": "14:1",
"tagname": "F14D1"
},
"624": {
"unit": "g",
"name": "22:0",
"tagname": "F22D0"
},
"573": {
"unit": "mg",
"name": "Vitamin E, added",
"tagname": ""
},
"334": {
"unit": "mcg",
"name": "Cryptoxanthin, beta",
"tagname": "CRYPX"
},
"337": {
"unit": "mcg",
"name": "Lycopene",
"tagname": "LYCPN"
},
"628": {
"unit": "g",
"name": "20:1",
"tagname": "F20D1"
},
"454": {
"unit": "mg",
"name": "Betaine",
"tagname": "BETN"
},
"257": {
"unit": "g",
"name": "Adjusted Protein",
"tagname": ""
},
"255": {
"unit": "g",
"name": "Water",
"tagname": "WATER"
},
"855": {
"unit": "g",
"name": "20:4 n-6",
"tagname": "F20D4N6"
},
"856": {
"unit": "g",
"name": "18:3i",
"tagname": ""
},
"857": {
"unit": "g",
"name": "21:5",
"tagname": "F21D5"
},
"851": {
"unit": "g",
"name": "18:3 n-3 c,c,c (ALA)",
"tagname": "F18D3CN3"
},
"852": {
"unit": "g",
"name": "20:3 n-3",
"tagname": "F20D3N3"
},
"853": {
"unit": "g",
"name": "20:3 n-6",
"tagname": "F20D3N6"
},
"858": {
"unit": "g",
"name": "22:4",
"tagname": "F22D4"
},
"859": {
"unit": "g",
"name": "18:1-11t (18:1t n-7)",
"tagname": "F18D1TN7"
},
"654": {
"unit": "g",
"name": "24:0",
"tagname": "F24D0"
},
"652": {
"unit": "g",
"name": "15:0",
"tagname": "F15D0"
},
"653": {
"unit": "g",
"name": "17:0",
"tagname": "F17D0"
},
"508": {
"unit": "g",
"name": "Phenylalanine",
"tagname": "PHE_G"
},
"509": {
"unit": "g",
"name": "Tyrosine",
"tagname": "TYR_G"
},
"506": {
"unit": "g",
"name": "Methionine",
"tagname": "MET_G"
},
"507": {
"unit": "g",
"name": "Cystine",
"tagname": "CYS_G"
},
"504": {
"unit": "g",
"name": "Leucine",
"tagname": "LEU_G"
},
"505": {
"unit": "g",
"name": "Lysine",
"tagname": "LYS_G"
},
"502": {
"unit": "g",
"name": "Threonine",
"tagname": "THR_G"
},
"503": {
"unit": "g",
"name": "Isoleucine",
"tagname": "ILE_G"
},
"501": {
"unit": "g",
"name": "Tryptophan",
"tagname": "TRP_G"
},
"630": {
"unit": "g",
"name": "22:1 undifferentiated",
"tagname": "F22D1"
},
"631": {
"unit": "g",
"name": "22:5 n-3 (DPA)",
"tagname": "F22D5"
},
"401": {
"unit": "mg",
"name": "Vitamin C, total ascorbic acid",
"tagname": "VITC"
},
"636": {
"unit": "mg",
"name": "Phytosterols",
"tagname": "PHYSTR"
},
"638": {
"unit": "mg",
"name": "Stigmasterol",
"tagname": "STID7"
},
"639": {
"unit": "mg",
"name": "Campesterol",
"tagname": "CAMD5"
},
"221": {
"unit": "g",
"name": "Alcohol, ethyl",
"tagname": "ALC"
},
"605": {
"unit": "g",
"name": "Fatty acids, total trans",
"tagname": "FATRN"
},
"607": {
"unit": "g",
"name": "4:0",
"tagname": "F4D0"
},
"606": {
"unit": "g",
"name": "Fatty acids, total saturated",
"tagname": "FASAT"
},
"601": {
"unit": "mg",
"name": "Cholesterol",
"tagname": "CHOLE"
},
"609": {
"unit": "g",
"name": "8:0",
"tagname": "F8D0"
},
"608": {
"unit": "g",
"name": "6:0",
"tagname": "F6D0"
},
"322": {
"unit": "mcg",
"name": "Carotene, alpha",
"tagname": "CARTA"
},
"323": {
"unit": "mg",
"name": "Vitamin E (alpha-tocopherol)",
"tagname": "TOCPHA"
},
"320": {
"unit": "mcg_RAE",
"name": "Vitamin A, RAE",
"tagname": "VITA_RAE"
},
"321": {
"unit": "mcg",
"name": "Carotene, beta",
"tagname": "CARTB"
},
"326": {
"unit": "mcg",
"name": "Vitamin D3 (cholecalciferol)",
"tagname": "CHOCAL"
},
"324": {
"unit": "IU",
"name": "Vitamin D",
"tagname": "VITD"
},
"325": {
"unit": "mcg",
"name": "Vitamin D2 (ergocalciferol)",
"tagname": "ERGCAL"
},
"328": {
"unit": "mcg",
"name": "Vitamin D (D2 + D3)",
"tagname": "VITD"
},
"203": {
"unit": "g",
"name": "Protein",
"tagname": "PROCNT"
},
"619": {
"unit": "g",
"name": "18:3 undifferentiated",
"tagname": "F18D3"
},
"205": {
"unit": "g",
"name": "Carbohydrate, by difference",
"tagname": "CHOCDF"
},
"204": {
"unit": "g",
"name": "Total lipid (fat)",
"tagname": "FAT"
},
"207": {
"unit": "g",
"name": "Ash",
"tagname": "ASH"
},
"209": {
"unit": "g",
"name": "Starch",
"tagname": "STARCH"
},
"208": {
"unit": "kcal",
"name": "Energy",
"tagname": "ENERC_KCAL"
},
"610": {
"unit": "g",
"name": "10:0",
"tagname": "F10D0"
},
"611": {
"unit": "g",
"name": "12:0",
"tagname": "F12D0"
},
"617": {
"unit": "g",
"name": "18:1 undifferentiated",
"tagname": "F18D1"
},
"614": {
"unit": "g",
"name": "18:0",
"tagname": "F18D0"
},
"615": {
"unit": "g",
"name": "20:0",
"tagname": "F20D0"
},
"435": {
"unit": "mcg_DFE",
"name": "Folate, DFE",
"tagname": "FOLDFE"
},
"432": {
"unit": "mcg",
"name": "Folate, food",
"tagname": "FOLFD"
},
"689": {
"unit": "g",
"name": "20:3 undifferentiated",
"tagname": "F20D3"
},
"430": {
"unit": "mcg",
"name": "Vitamin K (phylloquinone)",
"tagname": "VITK1"
},
"685": {
"unit": "g",
"name": "18:3 n-6 c,c,c",
"tagname": "F18D3CN6"
},
"687": {
"unit": "g",
"name": "17:1",
"tagname": "F17D1"
},
"431": {
"unit": "mcg",
"name": "Folic acid",
"tagname": "FOLAC"
}
};
Raw
recommendations.js
var recommendations = {
"203": {
"dos": [],
"donts": [],
"rdi": 50,
"unit": "g"
},
"205": {
"dos": [],
"donts": [],
"rdi": 300,
"unit": "g"
},
"406": {
"dos": [41,42,43,44,17,39,45],
"donts": [46,47,48,30],
"rdi": 20,
"unit": "mg"
},
"405": {
"dos": [40,39],
"donts": [],
"rdi": 1.7,
"unit": "mg"
},
"404": {
"dos": [37,38,31,39],
"donts": [],
"rdi": 1.5,
"unit": "mg"
},
"415": {
"dos": [22,16,19,56,61,34],
"donts": [],
"rdi": 2,
"unit": "mg"
},
"418": {
"dos": [],
"donts": [],
"rdi": 6,
"unit": "mcg"
},
"268": {
"dos": [14,15,16,17,04],
"donts": [],
"rdi": 2000,
"unit": "kJ"
},
"291": {
"dos": [14,15,16,17,04],
"donts": [],
"rdi": 25,
"unit": "g"
},
"318": {
"dos": [34,35,13,18,36,50],
"donts": [],
"rdi": 5000,
"unit": "IU"
},
"317": {
"dos": [20,30,45,16],
"donts": [62,06,20],
"rdi": 70,
"unit": "mcg"
},
"301": {
"dos": [18,19,13,20,04,21],
"donts": [],
"rdi": 1000,
"unit": "mg"
},
"303": {
"dos": [22,23,12,24,25,26,27],
"donts": [28,29],
"rdi": 18,
"unit": "mg"
},
"304": {
"dos": [58,19,18,41,56,59,30,60],
"donts": [],
"rdi": 400,
"unit": "mg"
},
"305": {
"dos": [],
"donts": [],
"rdi": 1000,
"unit": "mg"
},
"306": {
"dos": [11,30],
"donts": [31],
"rdi": 4700,
"unit": "mg"
},
"324": {
"dos": [],
"donts": [],
"rdi": 400,
"unit": "IU"
},
"307": {
"dos": [],
"donts": [32,30,01,21,33],
"rdi": 2300,
"unit": "mg"
},
"309": {
"dos": [],
"donts": [],
"rdi": 15,
"unit": "mg"
},
"317": {
"dos": [],
"donts": [],
"rdi": 70,
"unit": "mcg"
},
"646": {
"dos": [08,01,09,10,11,12,13],
"donts": [],
"rdi": 40,
"unit": "g"
},
"401": {
"dos": [49,50,03,51,21,42,53,43,54,55,45,13,30,44],
"donts": [03,04,05,06,07,33,64,61,17,56,57],
"rdi": 60,
"unit": "mg"
},
"601": {
"dos": [],
"donts": [],
"rdi": 300,
"unit": 'mg'
},
"606": {
"dos": [],
"donts": [01,02,03,04,05,06,07],
"rdi": 20,
"unit": 'mg'
},
"321": {
"dos": [63,03,43,64],
"donts": [],
"rdi": 2500,
"unit": "iu"
}
};
Raw
style.css
/* BEGIN RESET */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
body { font:13px/1.231 sans-serif; *font-size:small; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
a:hover, a:active { outline: none; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre {
white-space: pre; white-space: pre-wrap; word-wrap: break-word;
padding: 15px;
}
textarea { overflow: auto; }
.iem7 legend { margin-left: -7px; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.iem7 input[type="checkbox"] { vertical-align: baseline; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid {
border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #FF5E99; }
button { width: auto; overflow: visible; }
.iem7 img { -ms-interpolation-mode: bicubic; }
body, select, input, textarea {
color: #444;
}
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }
.nocallout {-webkit-touch-callout: none;}
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
textarea.contenteditable {-webkit-appearance: none;}
.gifhidden {position: absolute; left: -100%;}
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* END RESET */
* {
background-color: #eee;
}
header h1{
font-size:24px;
margin-bottom:10px;
}
h3 {
font-size: 16px;
margin: 16px 0 8px;
}
#container {
padding:18px;
width:700px;
}
bar {
height: 10px;
margin: 4px 0 0 0;
display: inline-block;
background: #1a2;
position: absolute;
left: 290px;
}
.bar-label {
width: 210px;
text-align: left;
display: block;
}
input {
font-weight: bold;
border: 2px solid #e4e4e4;
padding: 1px 3px;
text-align: right;
}
select {
width:276px;
}
input:focus {
border: 2px solid #2b2;
outline: none;
}
.digit {
width: 40px;
}
.percent {
color: #777;
position: absolute;
left: 240px;
}
.field {
padding: 4px;
float:left;
width:290px;
}
#rdi {
/* width:600px;*/
float:left;
clear:left;
}
.button{
border:none;
float:left;
clear:left;
padding:10px;
background:#1a2;
color:#fff;
margin-top:10px;
}
p {
padding:10px 0 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment