just another inlet to tributary

inlet.js

var svg = d3.select("svg");
var rectBar = function(svg, x, y, width, height, color) {
	return svg
      	.append("svg:rect")
        .attr("x", x + 0.5)
        .attr("y", y + 0.5)
        .attr("width", width)
        .attr("height", height)
        .style("fill", color)
        .style("stroke", 'black')
        .style('stroke-width', 1);
};

/*svg.append("svg:rect")
  	.attr('x', 5)
  	.attr('y', 5)
  	.attr('width', 25)
  	.attr('height', 20)
  	.attr('fill', 'blue')
*/

var sliderWidth = 10;
var totalWidth = 259;
var margin = sliderWidth / 2;
var barWidth = totalWidth / 2 - margin;
var redBar = rectBar(svg, margin, margin, barWidth, 19, '#FB6262');
var greenBar = rectBar(svg, margin + barWidth, margin, barWidth, 19, 'green');
var sliderBar = rectBar(svg, (totalWidth - sliderWidth) / 2, 0, 10, 30, 'brown');

var moveSlideTo = function(slider, position) {
  	position = Math.min(1, position);
  	position = Math.max(-1, position);
  	var x = (position + 1) * (totalWidth - sliderWidth) / 2;
  	console.log('x', x);
  	slider.transition()
      	.duration(1000)
      	.attr("x", x);
}

var updateSlider = function() {
	moveSlideTo(sliderBar, 1);
};

setTimeout(updateSlider, 300);