Skip to content

Instantly share code, notes, and snippets.

@JohnDelacour

JohnDelacour/index.html

Last active December 17, 2015 21:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JohnDelacour/5673836 to your computer and use it in GitHub Desktop.
Save JohnDelacour/5673836 to your computer and use it in GitHub Desktop.
Download ZIP
A Radius Follows the Mouse
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mouse Spoke</title>
<link type="text/css" href="rotating_spoke.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<script>
var w = 960, h = 500 , r = 150;
var svg = d3.select("html").append("svg")
.attr({width: w, height: h})
.on("mousemove", follow_mouse);
var report = svg.append("text") .attr("id", "report")
.attr({x: 80, y: 80})
.text("Angle: 0.00°");
var g0 = svg.append("g").attr("id", "g0")
.attr("transform", "translate(" + [w/2, h/2] + ")");
var spoke_01 = g0.append("path") .attr("id", "spoke_01")
.attr("d", "M 0 0 h " + (r-2) + "l -9 3 2 -3 -2 -3 9 3");
var circle_01 = g0.append("circle").attr("id", "circle_01")
.attr("r", r);
function follow_mouse() {
var xy = d3.mouse(circle_01.node());
var angle = (180/Math.PI * Math.atan2(xy[1], xy[0]));
d3.select("#spoke_01").attr("transform", "rotate(" + angle + ")");
d3.select("#report").text("Angle: " + angle.toFixed(2) + "°");
}
</script>
</html>
Raw
rotating_spoke.css
svg {
background-color: #ddf;
}
#circle_01 {
fill: white;
fill-opacity: 0;
stroke: darkorchid;
stroke-width: 2;
}
#spoke_01 {
fill: none;
stroke: #602;
stroke-width: 2;
stroke-linecap: round;
}
#report {
fill: #602;
stroke: none;
font: 16pt sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment