Skip to content

Instantly share code, notes, and snippets.

@bendazz

bendazz/.block

Created May 25, 2019 15:00
Show Gist options
  • Save bendazz/d9fefd7b6f6431d1921d419d5ea8bdfd to your computer and use it in GitHub Desktop.
Save bendazz/d9fefd7b6f6431d1921d419d5ea8bdfd to your computer and use it in GitHub Desktop.
Download ZIP
d3.arc
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;padding: 20px;}
</style>
</head>
<body>
<script>
const svg = d3.select("body")
.append("svg")
.attr("width",500)
.attr("height",300)
.style("background-color","white")
.style("border","1px black solid")
const arc1 = d3.arc()
.innerRadius(0)
.outerRadius(60)
.startAngle(0)
.endAngle(Math.PI/3)
svg.append("path")
.attr("d",arc1())
.attr("transform","translate(50,150)")
.attr("fill","blue")
.attr("opacity",.5)
const arc2 = d3.arc()
.innerRadius(50)
.outerRadius(60)
.startAngle(0)
.endAngle(Math.PI/2)
svg.append("path")
.attr("d",arc2())
.attr("transform","translate(200,150)")
.attr("fill","blue")
.attr("opacity",.5)
const arc3 = d3.arc()
.innerRadius(50)
.outerRadius(60)
.startAngle(0)
.endAngle(3*Math.PI/2)
svg.append("path")
.attr("d",arc3())
.attr("transform","translate(350,150)")
.attr("fill","blue")
.attr("opacity",.5)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment