1d overlap

_.md

[ Launch: 1d overlap ] 943bc7bbdb532f0c4a96 by DeBraid
[ Launch: 1d overlap ] 7579334b640eec66cb5c by enjalot

config.json

{"description":"1d overlap","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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/rCH779n.png"}

inlet.js

var svg = d3.select("svg");

var barHeight = 40;


var scale = d3.scale.linear()
.domain([0, 200])
.range([0, 500])

var brush1 = d3.svg.brush()
.x(scale)
.extent([10, 40])

var brush2 = d3.svg.brush()
.x(scale)
.extent([60, 100])

var b1 = svg.append("g").attr("transform", "translate(50, 50)")
var b2 = svg.append("g").attr("transform", "translate(50, 100)")


brush1(b1);
brush2(b2);

b1.selectAll("rect").attr({ height: barHeight })
b2.selectAll("rect").attr({ height: barHeight })

var txt = svg.append("text")
.attr({
  x: 50,
  y: 200
})
txt.text("not overlapping");

function recalc() {
  var ext1 = brush1.extent();
  var ext2 = brush2.extent();
  
  // check if two lines are overlapping
  if( (ext2[0] >= ext1[0] && ext2[0] <= ext1[1]) ||
    (ext1[0] >= ext2[0] && ext1[0] <= ext2[1]))
  {
    txt.text("overlapping")
  } else {
    txt.text("not overlapping")
  }
}

brush1.on("brush", recalc)
brush2.on("brush", recalc)
recalc()

style.css

.background {
    visibility: visible !important;
    fill: #c6c6c6;
}
.extent {
    visibility: visible !important;
    fill: #fea3f8;
  }
.resize rect { 
    visibility: visible !important;
    fill: #007cf9;
}