dropdown group (cross)filtering

_.md

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

config.json

{"description":"dropdown group (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,"fullscreen":false,"thumbnail":"http://i.imgur.com/xLmfkW5.png"}

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 dims = ["name", "food"];


//input that manipulates your filter
var select = display.append("select")
select.selectAll("option.name")
  .data(dims)
  .enter()
  .append("option")
  .classed("name", true)
  .attr({
    value: function(d) { return d }
  })
.text(function(d) { return d })

select.on("change", function(d) {
    console.log(this.selectedIndex, dims[this.selectedIndex])
    //update the filter and rerender our vis
    updateFilter(dims[this.selectedIndex]);
    
  })

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


updateFilter("name");

function updateFilter(dim) {
  //update the filter
  //name.filter(filterName)
  
  //update our data by redoing the group
  var group;
  if(dim === "food") {
    group = food.group().all();
  } else if(dim === "name") {
    group = name.group().all();
  }
  console.log(group);
  
  //rerender barchart with foods
  var barSel = svg.selectAll("rect.bar")
  .data(group, 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}
  })
  
  barSel.exit().remove();

}

style.css

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