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>