pack to force-directed transition

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"));
	}).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();

});

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"
};

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>

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"
  }
};

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"
  } 
};

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;
}