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.

<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
  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");
});

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

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

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