d3:arcs

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>

JavaScript

const svg = d3.select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 500)
  .style('border', 'solid 1px blue');

const outerRadius = 130;
const innerRadius = 120;

svg.append("path")
  .attr("transform", `translate(${outerRadius},${outerRadius})`)
  .attr('fill', 'hotpink')
  .attr("d", d3.arc()({
    innerRadius: innerRadius,
    outerRadius: outerRadius,
    startAngle: 0,
    endAngle: Math.PI * 2
  }));