Nutrition Parallel Sets

Nutrition d3.parsets

An interactive parallel sets visualisation for D3.js using the USDA Nutrition Data.

Parallel Sets: http://www.jasondavies.com/parallel-sets/.

Nutrition Parallel Coordinates: </syntagmatic/2420080>.

forked from syntagmatic's block: Nutrition Parallel Sets

<!DOCTYPE html>
<head>
<script src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>

<script src="d3.parsets.js"></script>
<link rel="stylesheet" href="d3.parsets.css"></link>
</head>

<body>
  
  <script>
var chart = d3.parsets()
      .dimensions(["group", "protein (g)", "carbohydrate (g)", "water (g)", "calories", "fat (g)", "monounsat (g)"]);

var vis = d3.select("body").append("svg")
    .attr("width", chart.width())
    .attr("height", chart.height());

function band(d, interval) {
  if (d == null || d == undefined) return "No Data";
  return Math.round(d/interval)*interval + ""
}

d3.csv("nutrients.csv", function(csv) {
  (csv).each(function(d) {
    d["protein (g)"] = band(d["protein (g)"],20);
    d["carbohydrate (g)"] = band(d["carbohydrate (g)"],20);
    d["water (g)"] = band(d["water (g)"],20)
    d["calories"] = band(d["calories"],200);
    d["fat (g)"] = band(d["fat (g)"],20);
    d["monounsat (g)"] = band(d["monounsat (g)"],20);
   });
  vis.datum(csv).call(chart);
});
</script>
</body>

Modified http://mbostock.github.com/d3/d3.v2.js to a secure url

Modified http://documentcloud.github.com/underscore/underscore.js to a secure url

https://mbostock.github.com/d3/d3.v2.js

https://documentcloud.github.com/underscore/underscore.js