JohnDelacour/index.html

## index.html
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>Slider for Rotation</title>
	<link type="text/css" href="slider.css" rel="stylesheet" />
	<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div id="degrees">0.00°</div>
<svg width="960" height="500">
		<defs>
			<radialGradient id="rg" fx="30%">
			<stop offset="0%" stop-color="#ccc" />
			<stop offset="50%" stop-color="#777" />
			<stop offset="100%" stop-color="#222" />
			</radialGradient>

			<linearGradient id="lg"
				x1="0%" y1="0%" x2="0%" y2="100%">
					<stop offset="0%"  stop-color="gray"/>
					<stop offset="30%" stop-color="white"/>
					<stop offset="95%" stop-color="#111"/>
			</linearGradient>

			<linearGradient id="lgh"
				x1="0%" y1="0%" x2="100%" y2="0%">
					<stop offset="0%"  stop-color="white"/>
					<stop offset="50%" stop-color="gray"/>
					<stop offset="100%" stop-color="white"/>
			</linearGradient>
		</defs>
</svg>

<script>
var svg = d3.select("svg");

var drag = d3.behavior.drag()
	.origin(Object)
	.on("drag",
	function (d) {
		var angle = d.y / 10;
		d3.select("#degrees")
			.text(angle.toFixed(2) + "°")
			.style("top", 103 + d.y + "px")

		d3.select("#lever") .attr("transform",
			"rotate(" + (-angle) + ")");
		d3.select(this)
			.attr("cy", d.y =
			Math.max(0, Math.min(300, d3.event.y)) );
	}
);

var g0 = svg.append("g");


var g1 = svg.append("g")
	.attr("transform", "translate(30 100)");

var track = g1.append("rect") .attr("id", "track")
	.attr("x", 2)
	.attr("rx", 7)
	.attr("y", -25)
	.attr("width", 32)
	.attr("height", 350);

var slot = g1.append("rect") .attr("id", "slot")
	.attr("x", 13)
	.attr("rx", 5)
	.attr("y", -10)
	.attr("width", 10)
	.attr("height", 320);

var knob = g1.append("circle").attr("id", "knob")
	.data([{x: 18, y:0}])
	.attr("r", 10)
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) {return d.y; })
	.call(drag);

var g2 = g0.append("g")
	.attr("transform", "translate(0 150)");

var balance = 180;

var g3 = g2.append("g")
	.attr("transform", "translate(400 100)");

var barrel  = g3.append("circle") .attr("id", "barrel")
	.attr("r", balance);

var centre  = g3.append("circle") .attr("id", "centre")
	.attr("r", 9);

var lever = g3.append("rect").attr("id", "lever")
	.attr("x", -balance)
	.attr("y", -5)
	.attr("ry", balance)
	.attr("width", 580)
	.attr("height", 10)
	.attr("transform", "rotate(0)")

var y_scale = d3.scale.ordinal()
    .domain([0,1,2,3,4,5,6,7,8,9,10,11,12])
    .rangePoints([50, 350]);

var y_axis = d3.svg.axis()
	.scale(y_scale)
	.orient("left")
	.tickValues(y_scale.domain().filter(function(d, i) { return !(i % 1); }))

var ruler = g0.append("g")
	.attr("transform", "translate(36 50)")
    .attr("class", "y_axis")
    .call(y_axis);

</script>
</body>
</html>

## slider.css
svg {
  float: left;
  border: solid 1px #aaa;
  background-color: #ddf;
}

.y_axis {
	font-size: 10pt;
	font-family: times new roman ,serif;
	fill: gray;
	stroke: none;
}
.domain {
	stroke: none;
	fill: none;
}
#barrel {
	fill:none;
	stroke-width: 0.5;
	stroke: #777;
}
#degrees {
	position: absolute;
	left: 80px;
	padding: 1em, 1em, 1em, 1em;
	top: 103px;
	color: gray;
	font-size: 10pt;
	font-family: times new roman ,serif;
}
#track {
	fill: url(#lgh);
	stroke-width: 1;
	stroke: #bbb;

}
#slot {
	fill: #ddf;
	stroke: black;
	stroke-width: 0.5;
}
#knob {
	fill: url(#rg)
}
#lever {
	fill: url(#lg);
	stroke: none;
}
#centre {
	stroke: #777;
	fill: none;
}
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>Slider for Rotation</title>
	<link type="text/css" href="slider.css" rel="stylesheet" />
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<div id="degrees">0.00°</div>
	<svg width="960" height="500">
	<defs>
	<radialGradient id="rg" fx="30%">
	<stop offset="0%" stop-color="#ccc" />
	<stop offset="50%" stop-color="#777" />
	<stop offset="100%" stop-color="#222" />
	</radialGradient>

	<linearGradient id="lg"
	x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="0%" stop-color="gray"/>
	<stop offset="30%" stop-color="white"/>
	<stop offset="95%" stop-color="#111"/>
	</linearGradient>

	<linearGradient id="lgh"
	x1="0%" y1="0%" x2="100%" y2="0%">
	<stop offset="0%" stop-color="white"/>
	<stop offset="50%" stop-color="gray"/>
	<stop offset="100%" stop-color="white"/>
	</linearGradient>
	</defs>
	</svg>

	<script>
	var svg = d3.select("svg");

	var drag = d3.behavior.drag()
	.origin(Object)
	.on("drag",
	function (d) {
	var angle = d.y / 10;
	d3.select("#degrees")
	.text(angle.toFixed(2) + "°")
	.style("top", 103 + d.y + "px")

	d3.select("#lever") .attr("transform",
	"rotate(" + (-angle) + ")");
	d3.select(this)
	.attr("cy", d.y =
	Math.max(0, Math.min(300, d3.event.y)) );
	}
	);

	var g0 = svg.append("g");


	var g1 = svg.append("g")
	.attr("transform", "translate(30 100)");

	var track = g1.append("rect") .attr("id", "track")
	.attr("x", 2)
	.attr("rx", 7)
	.attr("y", -25)
	.attr("width", 32)
	.attr("height", 350);

	var slot = g1.append("rect") .attr("id", "slot")
	.attr("x", 13)
	.attr("rx", 5)
	.attr("y", -10)
	.attr("width", 10)
	.attr("height", 320);

	var knob = g1.append("circle").attr("id", "knob")
	.data([{x: 18, y:0}])
	.attr("r", 10)
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) {return d.y; })
	.call(drag);

	var g2 = g0.append("g")
	.attr("transform", "translate(0 150)");

	var balance = 180;

	var g3 = g2.append("g")
	.attr("transform", "translate(400 100)");

	var barrel = g3.append("circle") .attr("id", "barrel")
	.attr("r", balance);

	var centre = g3.append("circle") .attr("id", "centre")
	.attr("r", 9);

	var lever = g3.append("rect").attr("id", "lever")
	.attr("x", -balance)
	.attr("y", -5)
	.attr("ry", balance)
	.attr("width", 580)
	.attr("height", 10)
	.attr("transform", "rotate(0)")

	var y_scale = d3.scale.ordinal()
	.domain([0,1,2,3,4,5,6,7,8,9,10,11,12])
	.rangePoints([50, 350]);

	var y_axis = d3.svg.axis()
	.scale(y_scale)
	.orient("left")
	.tickValues(y_scale.domain().filter(function(d, i) { return !(i % 1); }))

	var ruler = g0.append("g")
	.attr("transform", "translate(36 50)")
	.attr("class", "y_axis")
	.call(y_axis);

	</script>
	</body>
	</html>
	svg {
	float: left;
	border: solid 1px #aaa;
	background-color: #ddf;
	}

	.y_axis {
	font-size: 10pt;
	font-family: times new roman ,serif;
	fill: gray;
	stroke: none;
	}
	.domain {
	stroke: none;
	fill: none;
	}
	#barrel {
	fill:none;
	stroke-width: 0.5;
	stroke: #777;
	}
	#degrees {
	position: absolute;
	left: 80px;
	padding: 1em, 1em, 1em, 1em;
	top: 103px;
	color: gray;
	font-size: 10pt;
	font-family: times new roman ,serif;
	}
	#track {
	fill: url(#lgh);
	stroke-width: 1;
	stroke: #bbb;

	}
	#slot {
	fill: #ddf;
	stroke: black;
	stroke-width: 0.5;
	}
	#knob {
	fill: url(#rg)
	}
	#lever {
	fill: url(#lg);
	stroke: none;
	}
	#centre {
	stroke: #777;
	fill: none;
	}