Skip to content

Instantly share code, notes, and snippets.

@ruridge
Last active September 25, 2017 12:25
Show Gist options
  • Save ruridge/4715a6aa24b574bcb7be02a3471a170a to your computer and use it in GitHub Desktop.
Save ruridge/4715a6aa24b574bcb7be02a3471a170a to your computer and use it in GitHub Desktop.
Spirals1: 8 points with 45° spacing
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var width = 500,
height = 500,
margin = {top: 0, left: 0, right: 0, bottom: 0};
var data = [],
i = 0;
for (i; i < 8; i++) {
var x = Math.cos(degToRad(i * 45)) * 200;
var y = Math.sin(degToRad(i * 45)) * 200;
data.push({x: x, y: y});
}
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width/2, -height/2, width, height]);
svg.append("g")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 5)
.attr("cx", d => d.x)
.attr("cy", d => d.y);
// Helpers
function degToRad(deg) {
return deg * Math.PI / 180;
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment