ordinal (cross)filtering

_.md

[ Launch: ordinal (cross)filtering ] 4720078 by enjalot

config.json

{"description":"ordinal (cross)filtering","endpoint":"","display":"div","public":true,"require":[{"name":"crossfilter","url":"https://raw.github.com/enjalot/crossfilter/master/crossfilter.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

data.json

[
  {"name":"ian", "food":"chicken"},
  {"name":"dan", "food":"salad"},
  {"name":"dan", "food":"chicken"},
  {"name":"ian", "food":"salad"},
  {"name":"dan", "food":"chicken"},
  {"name":"ian", "food":"beef"},
  {"name":"dan", "food":"beef"},
  {"name":"ian", "food":"chicken"},
  {"name":"dan", "food":"salad"},
  {"name":"ian", "food":"chicken"},
  {"name":"ian", "food":"chicken"},
  {"name":"pam", "food":"chicken"},
  {"name":"pam", "food":"chicken"},
  {"name":"pam", "food":"chicken"},
  {"name":"pam", "food":"chicken"},
  {"name":"pam", "food":"chicken"}
]

inlet.js

//using filter-custom branch of crossfilter from jason davies

var xf = crossfilter();

var data = tributary.data;

xf.add(data);

var name = xf.dimension(function(d) { return d.name });
var food = xf.dimension(function(d) { return d.food });

var display = d3.select("#display");

//possible names
var names = ["dan", "ian", "pam"];
//var names = ["dan", "pam"];
//var names = ["ian"];
//updateFilter(names);

//use this for filter
var namesList = names;

//input that manipulates your filter
display.selectAll("input.name")
  .data(names)
  .enter()
  .append("input")
  .classed("name", true)
  .attr({
    type: "checkbox",
    checked: true
  })
  .on("change", function(d) {
    //when input changes, need to change how our filter works
    var ind = namesList.indexOf(d);
    console.log(d, ind);
    if(ind < 0) {
      namesList.push(d);
    } else {
      namesList.splice(ind,1);
    }
    console.log("list", namesList);
    
    //update the filter and rerender our vis
    updateFilter(namesList);
    
  })

var svg = display.append("svg")
.attr({ 
  class: "chart",
  width: 400 + "px",
  height: 400 + "px"
})


updateFilter(namesList);

function updateFilter(names) {
  
  //update the filter
  name.filter(function(d) {
    if(names.indexOf(d) >= 0)
      return true;
    return false;
  })
  
  //update our data by redoing the group
  var foods = food.group().all();
  console.log(foods);
  
  //rerender barchart with foods
  var barSel = svg.selectAll("rect.bar")
  .data(foods, function(d) { return d.key });
  
  barSel.enter()
    .append("rect").classed("bar", true)
  
  barSel.attr({
    width: 20,
    height: function(d) { return d.value * 10 },
    x: function(d,i) { return 100 + i * 25 },
    y: function(d) { return 100}
  })

}

style.css

svg.chart {
  top: 100px;
  right: 100px;
 
}