KKostya · September 12, 2013 16:58
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <style>
    .axis { font: 10px sans-serif; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
    .axis   .domain { fill: none; stroke: #000; stroke-opacity: .3; stroke-width: 10px; stroke-linecap: round; }
    .axis   .halo   { fill: none; stroke: #ddd; stroke-width: 8px;  stroke-linecap: round; }
    .slider .handle { fill: #fff; stroke: #000; stroke-opacity: .5; stroke-width: 1.25px; pointer-events: none; }
 </style>

 <body>

    <div id="x1">X<sub>1</sub></div><br>
    <div id="x2">X<sub>2</sub></div><br>
    <div id="x3">X<sub>3</sub></div><br>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="Slider.js"></script>
    <script>

        function Constr(src,d1,d2)
        {
            var s_sq = Math.pow(src.value(),2),
                d_sq = Math.pow( d1.value(),2) + Math.pow( d2.value(),2);
            if(d_sq > 0)
            {
                var a =  Math.sqrt((1-s_sq)/d_sq);
                d1.value(a*d1.value());
                d2.value(a*d2.value());
            }
            else
            {
                var a =  Math.sqrt((1-s_sq)/2);
                d1.value(a);
                d2.value(a);
            }
        }

        var s1 = slider(), s2 = slider(), s3 = slider();
        s1.value(1.);

        s1.callback(function(){Constr(s1,s2,s3);})
        s2.callback(function(){Constr(s2,s1,s3);})
        s3.callback(function(){Constr(s3,s1,s2);})
        
        d3.select("#x1").append("svg").call(s1);
        d3.select("#x2").append("svg").call(s2);
        d3.select("#x3").append("svg").call(s3);

    </script>
    
 </body>
diff --git a/Slider.js b/Slider.js
 function slider()
 {
    var margin = {top: 5, left: 15, right: 10, bottom: 5},
        width  = 300 - margin.left - margin.right,
        height = 40  - margin.top  - margin.bottom,
        brush  = d3.svg.brush(),
        handle, slider,
        value  = 0,
        upd    = function(d){value = d;},
        cback  = function(d){};

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

    function chart(el)
    {

        brush.x(x).extent([0,0])
             .on("brush", brushed);

        var svg = el.attr("width",  width  + margin.left + margin.right)
            .attr("height", height + margin.top  + margin.bottom)
            .append("g").attr("transform","translate(" + margin.left + "," + margin.top + ")");

        svg.append("g")
           .attr("class","x axis")
           .attr("transform", "translate(0,"+height/2+")")
           .call(d3.svg.axis().scale(x).orient("bottom").tickSize(0).tickPadding(12));

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

        slider.selectAll(".extent,.resize").remove();
        slider.select(".background").attr("height",height)

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

        function brushed()
        {
            if (d3.event.sourceEvent) value = x.invert(d3.mouse(this)[0]);
            upd(value);
            cback();
        }
        upd = function(v)
        {
            brush.extent([v,v]);
            value = brush.extent()[0];
            handle.attr("cx",x(value));
        }
    }

    chart.margin   = function(_) { if (!arguments.length) return margin;  margin = _; return chart; };
    chart.callback = function(_) { if (!arguments.length) return cback;    cback = _; return chart; };
    chart.value    = function(_) { if (!arguments.length) return value;       upd(_); return chart; };

    return chart;
 }
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>
	.axis { font: 10px sans-serif; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
	.axis .domain { fill: none; stroke: #000; stroke-opacity: .3; stroke-width: 10px; stroke-linecap: round; }
	.axis .halo { fill: none; stroke: #ddd; stroke-width: 8px; stroke-linecap: round; }
	.slider .handle { fill: #fff; stroke: #000; stroke-opacity: .5; stroke-width: 1.25px; pointer-events: none; }
	</style>

	<body>

	<div id="x1">X<sub>1</sub></div><br>
	<div id="x2">X<sub>2</sub></div><br>
	<div id="x3">X<sub>3</sub></div><br>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="Slider.js"></script>
	<script>

	function Constr(src,d1,d2)
	{
	var s_sq = Math.pow(src.value(),2),
	d_sq = Math.pow( d1.value(),2) + Math.pow( d2.value(),2);
	if(d_sq > 0)
	{
	var a = Math.sqrt((1-s_sq)/d_sq);
	d1.value(a*d1.value());
	d2.value(a*d2.value());
	}
	else
	{
	var a = Math.sqrt((1-s_sq)/2);
	d1.value(a);
	d2.value(a);
	}
	}

	var s1 = slider(), s2 = slider(), s3 = slider();
	s1.value(1.);

	s1.callback(function(){Constr(s1,s2,s3);})
	s2.callback(function(){Constr(s2,s1,s3);})
	s3.callback(function(){Constr(s3,s1,s2);})

	d3.select("#x1").append("svg").call(s1);
	d3.select("#x2").append("svg").call(s2);
	d3.select("#x3").append("svg").call(s3);

	</script>

	</body>
	function slider()
	{
	var margin = {top: 5, left: 15, right: 10, bottom: 5},
	width = 300 - margin.left - margin.right,
	height = 40 - margin.top - margin.bottom,
	brush = d3.svg.brush(),
	handle, slider,
	value = 0,
	upd = function(d){value = d;},
	cback = function(d){};

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

	function chart(el)
	{

	brush.x(x).extent([0,0])
	.on("brush", brushed);

	var svg = el.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g").attr("transform","translate(" + margin.left + "," + margin.top + ")");

	svg.append("g")
	.attr("class","x axis")
	.attr("transform", "translate(0,"+height/2+")")
	.call(d3.svg.axis().scale(x).orient("bottom").tickSize(0).tickPadding(12));

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

	slider.selectAll(".extent,.resize").remove();
	slider.select(".background").attr("height",height)

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

	function brushed()
	{
	if (d3.event.sourceEvent) value = x.invert(d3.mouse(this)[0]);
	upd(value);
	cback();
	}
	upd = function(v)
	{
	brush.extent([v,v]);
	value = brush.extent()[0];
	handle.attr("cx",x(value));
	}
	}

	chart.margin = function(_) { if (!arguments.length) return margin; margin = _; return chart; };
	chart.callback = function(_) { if (!arguments.length) return cback; cback = _; return chart; };
	chart.value = function(_) { if (!arguments.length) return value; upd(_); return chart; };

	return chart;
	}