2-speed Revolving Bar

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>2-speed Revolving Bar</title>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="revolving_bar.css">
</head>
<body>
<div id="topline">
<p>Click the background to run</p>
</div>
<script>
var w = 960, h = 500;

var angle_data = [];
var i, n = 0, limit = 360;
var steps = [0.3, 0.1]
while ( n < limit) {
	n < 120 || n > 240 ? n += steps[0] : n += steps[1]
	angle_data.push(n);
}

var svg = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h)
	
svg.append("rect")
	.attr("id", "background")
	.attr("x", "1")
	.attr("y", "1")
	.attr("width", w -3)
	.attr("height", h - 3)

var t = svg.append("text")
	.attr("id", "t")
	.attr("x", "30")
	.attr("y", "40")
	.text("Seconds")
var t = svg.append("text")
	.attr("id", "th")
	.attr("x", "30")
	.attr("y", "60")
	.text("Degrees")

var g1 = svg.append("g")
	.attr("transform", "translate(" + (w/2) + " " + (h/2) + ")")

var circle = g1.append("circle")
	.attr("r", "140")
	.style("fill", "none");

var rect = g1.append("rect")
	.attr("id", "r1")
	.attr("x", "-140")
	.attr("y", -5)
	.attr("width", "280")
	.attr("height", "10")
	.attr("transform", "rotate(0)");

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

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

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