ordinal scrubber

_.md

[ Launch: ordinal scrubber ] 5820716 by enjalot

config.json

{"description":"ordinal scrubber","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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}},"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/YM14KXL.png"}

inlet.js

var svg = d3.select("svg");
document.onselectstart = function(){ return false; }

var group1 = svg.append("g")
.attr("transform", "translate(100,100)")

var group2 = svg.append("g")
.attr("transform", "translate(100,200)")

var scrubber1 = scrubbah();
scrubber1(group1);
var scrubber2 = scrubbah()
.data(d3.range(50))
scrubber2(group2);

function scrubbah() {
  var w = 300
  var h = 40;
  var data = d3.range(100);
  
  function dubdub(g) {
    var xscale = d3.scale.ordinal()
    .domain(d3.range(data.length))
    .rangeBands([0, w], 0.1)
    
    g.selectAll("rect.bg")
    .data([0])
    .enter().append("rect")
    .attr({
      width:w,
      height: h
    }).classed("bg", true)
    
    var mousedown = false;
    var selected;
    
    var bars = g.selectAll("g.bar")
    .data(data)
    bars.enter()
    .append("g").classed("bar", true)
    .append("rect").classed("bar", true)
    bars.select("rect").attr({
      x: function(d,i) { return xscale(i) },
      y: function(d,i) { return 0 },
      width: xscale.rangeBand(),
      height: h
    })
    .on("mousedown", function(d,i) {
      mousedown = true;
      selected = d;
      d3.select(this).classed("selected", true);
    })
    .on("mouseup", function(d,i) {
      mousedown = false;
    })
    .on("mouseover", function(d,i) {
      if(!mousedown) return;
      bars.select("rect").classed("selected", false);
      selected = d;
      d3.select(this).classed("selected", true);
    })
    
    g.on("mousedown", function() {
      mousedown = true;
    })
    g.on("mouseup", function() {
      mousedown = false;
    })
    g.on("mouseout", function() {
      var to = d3.event.toElement;
      var clazz = d3.select(to).attr("class");
      var ind = data.indexOf(d3.select(to).datum())
      if(ind < 0 && clazz !== "bg") {
        mousedown = false;
      }
    }, true)
  }
  dubdub.data = function(_) {
    if(!arguments.length) return data;
    data = _;
    return dubdub;
  }
  dubdub.width = function(_) {
    if(!arguments.length) return w;
    w = _;
    return dubdub;
  }
  dubdub.height = function(_) {
    if(!arguments.length) return h;
    h = _;
    return dubdub;
  }
  return dubdub
}

style.css

.selected {
  fill: #ff0000;
}

.bg {
  fill: #ffffff;
}