Multiple Control Spans/ Ranges, one dimension in dc.js or crossfilter

Question

I was wondering if it's possible to create multiple simultaneous control span filters in dc.js or crossfilter for a single dimension (e.g., something like the picture below).

I was hoping you could drag a certain area, hold down the command key, and then highlight another area. If it's not possible, any recommendations other packages or ways of manually tinkering the code to get around dc.js's limitation would be greatly appreciated!

I created this jsfiddle with some dummy data to create that graph, but then had to photoshop an extra range for x values 7-8.

For convenience, this is the code that's on jsfiddle:

var chart = new dc.SeriesChart("#test");

var datum = [
  {Run: 1, Speed: 850},
  {Run: 2, Speed: 740},
  {Run: 3, Speed: 900},
  {Run: 4, Speed: 1070},
  {Run: 5, Speed: 1000},
  {Run: 6, Speed: 910},
  {Run: 7, Speed: 750},
  {Run: 8, Speed: 940},
  {Run: 9, Speed: 880},
];

var ndx = crossfilter(datum);

var runDimension = ndx.dimension(function(d) {return [+d.Speed, +d.Run]; });
var runGroup = runDimension.group().reduceSum(function(d) { return +d.Speed; });

var subChart = function(c) {
  return new dc.ScatterPlot(c)
}

chart
  .width(300)
  .height(280)
  .chart(subChart)
  .x(d3.scaleLinear().domain([0,10]))
  .y(d3.scaleLinear().domain([700,1100]))
  .group(runGroup)
  .seriesAccessor(function(d) {return ;})
  .keyAccessor(function(d) {return +d.key[1];})

dc.renderAll();

Thanks in advance!