Loading data into a crossfilter and with d3.csv and displaying a few Top-K lists
Data derived from the USDA National Nutrient Database.
forked from syntagmatic‘s block: Crossfilter with d3.csv
<title>Crossfilter with d3.csv</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="crossfilter.js"></script>
<h3 id="loading">Loading....</h3>
<div>Number of rows: <span id="size">0</span></div>
<h3>Top Protein</h3>
<ol id="protein-list"></ol>
<h3>Top Calcium</h3>
<ol id="calcium-list"></ol>
<h3>Top Sodium</h3>
<ol id="sodium-list"></ol>
<script>
var url = "nutrients.csv";
var numerics = ["protein (g)", "calcium (g)", "sodium (g)"];
var nutrients,
protein, calcium, sodium;
// load the data from an external file
d3.csv(url, function(data) {
// coerce numbers to floats, empty strings to null
data.forEach(function(d) {
numerics.forEach(function(dim) {
d[dim] = isNumber(d[dim]) ? parseFloat(d[dim]) : null;
});
});
// load data into crossfilter
nutrients = crossfilter(data);
// construct filtering dimensions
protein = nutrients.dimension(function(d) { return d["protein (g)"]; });
calcium = nutrients.dimension(function(d) { return d["calcium (g)"]; });
sodium = nutrients.dimension(function(d) { return d["sodium (g)"]; });
// done loading
d3.select("#loading").text("Loaded " + url);
// display dataset size
d3.select("#size").text(nutrients.size());
// display top K lists
renderTopList(protein, 6, "#protein-list");
renderTopList(calcium, 6, "#calcium-list");
renderTopList(sodium, 6, "#sodium-list");
});
// //stackoverflow.com/a/1830844
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function renderTopList(dimension, count, selector) {
d3.select(selector).selectAll("li")
.data(dimension.top(count))
.enter().append("li")
.text(function(d) { return d.name });
}
</script>
<style>
body {
font-size: 13px;
font-family: sans-serif;
}
</style>