Drawing an Arc with D3

by karthick6891

HTML

<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>

<div class="chart">

</div>

CSS

.arc {
    fill: blue;
}

JavaScript

var svg = d3.select(".chart")
    .append("svg")
    .attr("width", 200)
    .attr("height", 200)
    .append("g")
    .attr("transform", "translate(100,100)");

var arc = d3.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(0)
    .endAngle(2 * Math.PI);

svg.append("path")
    .attr("class", "arc")
    .attr("d", arc);