<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0"/>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
style
=
"width:300px; height:300px;"
>
<
center
>
<
h1
style
=
"color:green"
>
GeeksforGeeks
</
h1
>
<
h2
>
d3.pie()
</
h2
>
</
center
>
<
svg
width
=
"300"
height
=
"300"
>
</
svg
>
</
div
>
<
script
>
var data = [1,2,4.4,2,1,5,4];
// Selecting SVG using d3.select()
var svg = d3.select("svg");
// Creating Pie generator
var pie = d3.pie();
// Creating arc
var arc = d3.arc()
.innerRadius(0)
.outerRadius(100);
let g = svg.append("g")
.attr("transform", "translate(150,120)");
// Grouping different arcs
var arcs = g.selectAll("arc")
.data(pie(data))
.enter()
.append("g");
// Appending path
arcs.append("path")
.attr("fill", (data, i)=>{
let value=data.data;
return d3.schemeSet3[i+1];
})
.attr("d", arc);
// Adding data to each arc
arcs.append("text")
.attr("transform",(d)=>{
return "translate("+
arc.centroid(d) + ")";
})
.text(function(d){
return d.data;
});
</
script
>
</
body
>
</
html
>