Crossfilter with d3.csv

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

forked from renecnielsen's block: Crossfilter with d3.csv

<title>Crossfilter with d3.csv</title>
<script src="https://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
  nutrients.protein = nutrients.dimension(function(d) { return d["protein (g)"]; });
  nutrients.calcium = nutrients.dimension(function(d) { return d["calcium (g)"]; });
  nutrients.sodium = nutrients.dimension(function(d) { return d["sodium (g)"]; });
  nutrients.group = nutrients.dimension(function(d) { return d["group"]; });

function reduceAdd(p, v) {
    p.count += v["calcium (g)"]
    p.total++
  return p
}

function reduceRemove(p, v) {
    p.count -= v["calcium (g)"]
    p.total--
  return p
}

function reduceInitial() {
  return {count: 0, total: 0}
}
  
  console.log(nutrients.group.group().reduce(reduceAdd,reduceRemove,reduceInitial).all())

});

// https://stackoverflow.com/a/1830844
function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

</script>
<style>
body {
  font-size: 13px;
  font-family: sans-serif;
}
</style>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js