crossfilter interactive

_.md

[ Launch: crossfilter interactive ] 5465166 by enjalot

config.json

{"description":"crossfilter interactive","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/2zBACel.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

var xf = crossfilter();
var data = tributary.data;
 
var cy = 20;
var cx = 20;
 
xf.add(data);
 
var dims = {
 name: xf.dimension(function(d) { return d.name }),
 food: xf.dimension(function(d) { return d.food })
}
 
var display = d3.select("#display")
var svg = display.append("svg")
.attr({
  width: "400px",
  height: "400px"
})
 
var groupNames = ["name", "food"]
//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() {
  var groupName = groupNames[this.selectedIndex];
  updateXF(groupName)
})
 
 
updateXF(groupNames[0])
function updateXF(groupName) {
  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 * 26 }
  })
  
  
  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 + 26 * i },
    width: function(d,i) { return xscale(d.value) },
    height: 20
  })
  
  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 + 26 * i }
  })
  .text(function(d) { return d.value })
}