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
xxxxxxxxxx
<head>
<script src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/underscore@1.12.1/underscore-min.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