block by renecnielsen b9a0c2eafb1e655e0680

Crossfilter with d3.csv

Full Screen

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

index.html

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