Skip to content

Instantly share code, notes, and snippets.

@xmanemran

xmanemran/.block

Created September 5, 2018 12:50
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 xmanemran/c09b302a8e2ecedd76b0f18b34af4241 to your computer and use it in GitHub Desktop.
Save xmanemran/c09b302a8e2ecedd76b0f18b34af4241 to your computer and use it in GitHub Desktop.
Download ZIP
Spider excer
Raw
.block
license: mit
Raw
index.html
<!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>
console.clear();
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
svg = svg.append('g').attr("transform", "translate(250, 250)");
// var axisGrid = svg.selectAll(".lavel")
// .data(d3.range(1,(6+1)).reverse())
// .enter()
// .append("circle")
// .attr("class", "gridCircle")
// .attr("r", function(d, i){return 20*d;})
// .style("fill", "none")
// .style("stroke", "#4A4A4A")
var length = 100;
var total = 8;
var angleSlice = Math.PI * (2 / total)
var axis = svg.selectAll(".axis")
.data(Array(total).fill('a'))
.enter()
.append("g")
.attr("class", "axis")
.append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", function(d, i){
console.log(angleSlice*i - Math.PI/2)
console.log(Math.sin(angleSlice*i - Math.PI/2))
return length * Math.sin(angleSlice*i - Math.PI/2);
})
.attr("y2", function(d, i){ return length * Math.cos(angleSlice*i - Math.PI/2); })
.attr("class", "line")
.style("stroke", "#4A4A4A")
.style("stroke-width", "1px");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment