crosfilter training

_.md

[ Launch: crosfilter training ] a5491b1398c562388d4e by danharr

config.json

{"description":"crosfilter training","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},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/KDWMRAo.png"}

data.json

[
  {"Type":"Hotel", "Employee":"Dan", "x": 1},
  {"Type":"Tube", "Employee":"Nigel", "x": 1},
  {"Type":"Tube", "Employee":"Dan", "x": 1},
  {"Type":"Hotel", "Employee":"Nigel", "x": 1},
  {"Type":"Tube", "Employee":"Dan", "x": 1},
  {"Type":"Hotel", "Employee":"Mike", "x": 1},
  {"Type":"Tube", "Employee":"Mike", "x": 1},
  {"Type":"Hotel", "Employee":"Dan", "x": 1},
  {"Type":"Tube", "Employee":"Nigel", "x": 1},
  {"Type":"Hotel", "Employee":"Dan", "x": 1},
  {"Type":"Hotel", "Employee":"Dan", "x": 1},
  {"Type":"Food", "Employee":"Dan", "x": 1},
  {"Type":"Drink", "Employee":"Dan", "x": 1},
  {"Type":"Food", "Employee":"Dan", "x": 1},
  {"Type":"Books", "Employee":"Dan", "x": 1},
  {"Type":"Food", "Employee":"Dan", "x": 1}
]

inlet.js

var xf = crossfilter();
var data = tributary.data;
 
var cy = 20;
var cx = 30;

var w=451;
var h = 372;
 
xf.add(data);
 
var dims = {
 Type: xf.dimension(function(d) { return d.Type }),
 Employee: xf.dimension(function(d) { return d.Employee })
}
 
var display = d3.select("#display")
var svg = display.append("svg")
.attr({
  width: w+"px",
  height: h+"px"
})
 
var groupNames = ["Type", "Employee"]
//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)
  
  pie(groupName)
  
})
 
 
//default
updateXF(groupNames[0])
pie(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 })
  
  
  bars.exit().remove()
  labels.exit().remove()
  tooltips.exit().remove()
}



function pie(groupName) {

  
  var group = dims[groupName].group().all()
  
  
  
    var bars2 = svg
  .selectAll("rect.bar2")
  .data(group)//, function(d) { return d.key })
  bars2.enter()
  .append("rect")
  .classed("bar2", true)
  bars2.attr({
    x: 107,
    y: function(d,i) { return 155 + 24 * i },
    width: function(d,i) { return d.value*40 },
    height: 20,
    fill: "#0084cc"
  })
  
  
    bars2.exit().remove()

  
  
  
}