Trying out Bostock's brush slider

_.md

[ Launch: Bostock's brush slider ] eb55e0e157def999b331 by markarios

config.json

{"description":"Trying out Bostock's brush slider","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.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/gBgFjGC.png"}

inlet.js

var margin = { left: 100, top: 100, right: 100, bottom: 100};

var width = tributary.sw - margin.left - margin.right,
    height = tributary.sh - margin.top - margin.bottom;

var svg = d3.select("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.style("background-color","#FFF")
   .append("g")
    .attr("transform","translate(" + margin.left + "," + margin.top + ")");	

var x = d3.scale.linear()
	.domain([0, 180])
	.range([0, width])
	.clamp(true);

svg.append("g")
	.attr("class","x axis")
	.attr("transform","translate(0," + height/2 + ")")
	.call(d3.svg.axis()
          .scale(x)
          .orient("bottom")
          .tickFormat(function(d) { return d + "°";})
          .tickSize(0)
          .tickPadding(15))
	.select(".domain")
.select(function() { return this.parentNode.appendChild(this.cloneNode(true));})
	.attr("class","halo");

var brush = d3.svg.brush()
	.x(x)
	.extent([0,0])
	.on("brush",brushed);

var slider = svg.append("g")
	.attr("class","slider")
	.call(brush);

slider.select(".background")
	.attr("height", height);

var handle = slider.append("circle")
	.attr("class","handle")
	.attr("transform","translate(0," + height / 2 + ")")
	.attr("r",9);

slider
	.call(brush.event)
	.transition()
	.duration(750)
	.call(brush.extent([70, 70]))
	.call(brush.event);

function brushed() {
  var value = brush.extent()[0];
  
  if (d3.event.sourceEvent) {
    value = x.invert(d3.mouse(this)[0]);
    brush.extent([value,value]);
  }
  
  handle.attr("cx", x(value));
  d3.select("svg.tributary_svg")
  .style("background-color",d3.hsl(value, 0.8, 0.8));
}




	

styles.css

.axis {
  font: 10px sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  
}

.axis .domain {
  fill: none;
  stroke: #000000;
  stroke-opacity: .2;
  stroke-width: 4.96px;
  stroke-linecap: round;

}

.axis .halo {
  fill: none;
  stroke: #ffffff;
  stroke-width: 4px;
  stroke-linecap: round;
}

.slider .handle {
	fill: #fff;
  stroke: #000;
  stroke-opacity: .5;
  stroke-width: 0.24px;
  pointer-events:none;
}

div#id {
  cursor:default;
}


}

thumbnail.png