crossfilter interactive pt 2

_.md

[ Launch: crossfilter interactive pt 2 ] 5465277 by enjalot
[ Launch: crossfilter interactive ] 5465166 by enjalot

config.json

{"description":"crossfilter interactive pt 2","endpoint":"","display":"div","public":true,"require":[{"name":"crossfilter","url":"http://square.github.io/crossfilter/crossfilter.v1.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/zUqnOX5.png"}

data.json

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

inlet.js

var xf = crossfilter();
var data = tributary.data;

var cy = 20;
var cx = 20;
var spacing = 30;

xf.add(data);

var dims = {
  name: xf.dimension(function(d) { return d.name }),
  food: xf.dimension(function(d) { return d.food }),
  x: xf.dimension(function(d) { return d.x })
}


var display = d3.select("#display")
var svg = display.append("svg")
.attr({
  width: "353px",
  height: "400px"
})

var groupNames = ["food", "x"]
var groupName = groupNames[0];
//dropdown for grouping
var select = display.append("select")
select.selectAll("option")
.data(groupNames)
.enter()
.append("option")
.attr("value", function(d) { return d })
.text(function(d) { return d })
select.on("change", function() {
  groupName = groupNames[this.selectedIndex];
  updateXF()
})

//checkboxes for filtering
var nameslist = _.pluck(dims.name.top(Infinity), "name")
var names = _.uniq(nameslist);
var checks = display.append("div")
.classed("check", true)
.selectAll("div.check")
.data(names)
.enter()
.append("div")
checks
.append("input")
.attr({
  "type": "checkbox",
  "checked": true
})
.on("change", function(d,i) {
  console.log(d);
  var ind = names.indexOf(d)
  if(ind >= 0) {
    names.splice(ind,1)
  } else {
    names.push(d)
  }
  updateXF();
})
checks.append("span")
.text(function(d) { return d })


updateXF()
function updateXF() {
 
  dims.name.filter(function(d) {
    if(names.indexOf(d) >= 0)
      return true;
    return false;
  })
  
  
  var group = dims[groupName].group().all()
  

  var xscale = d3.scale.linear()
  .domain([0, d3.max(group, function(d) { return d.value })])
  .range([0, 100])
  
  var labels = svg
  .selectAll("text.label")
  .data(group)//, function(d) { return d.key })
  labels.enter()
  .append("text")
  .classed("label", true)
  labels.text(function(d) { return d.key })
  .attr({
    x: cx,
    y: function(d,i) { return cy + i * spacing }
  })
  labels.exit().remove()
  
  var bars = svg
  .selectAll("rect.bar")
  .data(group)//, function(d) { return d.key })
  bars.enter()
  .append("rect")
  .classed("bar", true)
  bars.attr({
    x: 100,
    y: function(d,i) { return 3 + spacing * i },
    width: function(d,i) { return xscale(d.value) },
    height: 20
  })
  bars.exit().remove()
  
  var tooltips = svg
  .selectAll("text.tooltip")
  .data(group)//, function(d) { return d.key })
  tooltips.enter()
  .append("text")
  .classed("tooltip", true)
  tooltips.attr({
    x: 236,
    y: function(d,i) { return cy + spacing * i }
  })
  .text(function(d) { return d.value })
  tooltips.exit().remove();
}

style.css

select {
  float:left
        clear:left
}

.check {
  float:left
        clear:left
}

svg {
  float:left

}