Drawing an Arc with D3

by Abhishek Hingu

HTML

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

CSS

.arc {
    fill: #8c0ae2;
}

JavaScript

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

var defs = svg.append("defs");
var filter = defs.append("filter")
		.attr("id","glow");

	filter.append("feGaussianBlur")
		.attr("class", "blur")
		.attr("stdDeviation","4.5")
		.attr("result","coloredBlur");

	var feMerge = filter.append("feMerge");
	feMerge.append("feMergeNode")
		.attr("in","coloredBlur");
	feMerge.append("feMergeNode")
		.attr("in","SourceGraphic");
    
var arc = d3.arc()
    .innerRadius(50)
    .outerRadius(52)
    .startAngle(0)
    .endAngle(2 * Math.PI);

svg.append("path")
    .attr("class", "arc")
    .attr("d", arc)
    .style("filter","url(#glow)");