var width = 960,
    height = 500;

var pack = d3.layout.pack()
    .size([width - 4, height - 4])
    .value(function(d) { return d["water (g)"]; });

var vis = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "pack")
  .append("g")
    .attr("transform", "translate(2, 2)");

d3.csv("nutrients.csv", function(csv) {
  // put csv into a data structure pack layout will accept
  var data = { name: "cheeses", children: csv };

  // draw bubble chart
  var node = vis.data([data]).selectAll("circle")
      .data(pack.nodes)
    .enter().append("circle")
      .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .attr("r", function(d) { return d.r; });

  // change pack value
  pack.value(function(d) { return d["protein (g)"]; });

  // rebind data
  vis.data([data]).selectAll("circle")
      .data(pack.nodes);

  // transition chart
  node.transition()
      .duration(3000)
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .attr("r", function(d) { return d.r; });

});