Slider for Rotation

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>Slider for Rotation</title>
	<link type="text/css" href="slider.css" rel="stylesheet" />
	<script src="https://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>

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 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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js