block by syntagmatic 2494514

Nutrition Parallel Sets

Full Screen

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: http://bl.ocks.org/2420080/.

index.html

<!doctype html>
<script src="//mbostock.github.com/d3/d3.v2.js"></script>
<script src="//documentcloud.github.com/underscore/underscore.js"></script>
<script src="d3.parsets.js"></script>
<link rel="stylesheet" href="d3.parsets.css"></link>

<body>
</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>

d3.parsets.css

.dimension { cursor: ns-resize; }
.category { cursor: ew-resize; }
.dimension tspan.name { font-size: 1.5em; fill: #333; font-weight: bold; }
.dimension tspan.sort { fill: #000; cursor: pointer; opacity: 0; }
.dimension tspan.sort:hover { fill: #333; }
.dimension:hover tspan.name { fill: #000; }
.dimension:hover tspan.sort { opacity: 1; }
line { stroke: #000; }
rect { fill: #fff; fill-opacity: 0; }
.dimension rect, .category rect { stroke: none; }
.dimension > rect { display: none; }
.category:hover rect { fill-opacity: .3; }
.dimension:hover > rect { fill-opacity: .3; }
path { fill-opacity: .5; }
.ribbon path { stroke-opacity: 0; }
path.active { fill-opacity: .9; }
.ribbon-mouse path { fill-opacity: 0; }

.category-0 { fill: #1f77b4; stroke: #1f77b4; }
.category-1 { fill: #ff7f0e; stroke: #ff7f0e; }
.category-2 { fill: #2ca02c; stroke: #2ca02c; }
.category-3 { fill: #d62728; stroke: #d62728; }
.category-4 { fill: #9467bd; stroke: #9467bd; }
.category-5 { fill: #8c564b; stroke: #8c564b; }
.category-6 { fill: #e377c2; stroke: #e377c2; }
.category-7 { fill: #7f7f7f; stroke: #7f7f7f; }
.category-8 { fill: #bcbd22; stroke: #bcbd22; }
.category-9 { fill: #17becf; stroke: #17becf; }
.category-10 { fill: #1f77b4; stroke: #1f77b4; }
.category-11 { fill: #ff7f0e; stroke: #ff7f0e; }
.category-12 { fill: #2ca02c; stroke: #2ca02c; }
.category-13 { fill: #d62728; stroke: #d62728; }
.category-14 { fill: #9467bd; stroke: #9467bd; }
.category-15 { fill: #8c564b; stroke: #8c564b; }
.category-16 { fill: #e377c2; stroke: #e377c2; }
.category-17 { fill: #7f7f7f; stroke: #7f7f7f; }
.category-18 { fill: #bcbd22; stroke: #bcbd22; }
.category-19 { fill: #17becf; stroke: #17becf; }
.category-20 { fill: #e377c2; stroke: #e377c2; }
.category-21 { fill: #7f7f7f; stroke: #7f7f7f; }
.category-22 { fill: #bcbd22; stroke: #bcbd22; }
.category-23 { fill: #17becf; stroke: #17becf; }