script type text javascript src https d3js org d3 v7 min js script script var margin top 200 left 200 var width 400 var height 400 Add the svg element to the body and set the dimensions and margins of the graph var svg d3 select body append svg attr width width attr height height append g attr transform translate margin left margin top var data 9 20 30 8 12 var pie d3 pie value function d return d var piedata pie data svg selectAll whatever data piedata enter append path attr d d3 arc innerRadius 0 outerRadius 150 attr fill ff00ff attr stroke black style stroke width 2px style opacity 0 3 console log ready script Make the pie into a donut Add colors script type text javascript src https d3js org d3 v7 min js script script var margin top 200 left 200 var width 400 var height 400 Add the svg element to the body and set the dimensions and margins of the graph var svg d3 select body append svg attr width width attr height height append g attr transform translate margin left margin top var data 9 20 30 8 12 generate range of colors based on the data var myColor d3 scaleOrdinal domain data range d3 schemeSet3 var pie d3 pie value function d return d var piedata pie data svg selectAll whatever data piedata enter append path attr d d3 arc innerRadius 50 outerRadius 150 attr fill function d return myColor d attr stroke black style stroke width 2px style opacity 0 5 console log ready script Add text labels to the pie chart donut script type text javascript src https d3js org d3 v7 min js script script var margin top 200 left 200 var width 400 var height 400 Add the svg element to the body and set the dimensions and margins of the graph var svg d3 select body append svg attr width width attr height height append g attr transform translate margin left margin top var data 9 20 30 8 12 generate range of colors based on the data var myColor d3 scaleOrdinal domain data range d3 schemeSet3 var pie d3 pie value function d return d var piedata pie data svg selectAll mySlices data piedata enter append path attr d d3 arc innerRadius 50 outerRadius 150 attr fill function d return myColor d attr stroke black style stroke width 2px style opacity 0 7 console log adding labels svg selectAll mySlices data piedata enter append text attr transform function d let t d3 arc innerRadius 50 outerRadius 150 centroid d return translate t text function d return d value style text anchor middle style font size 17 console log ready script
ius 150 attr fill function d return myColor d attr stroke black style stroke width 2px style opacity 0 5 console log ready script Add text labels to the pie chart donut script type text javascript src https d3js org d3 v7 min js script script var margin top 200 left 200 var width 400 var height 400 Add the svg element to the body and set the dimensions and margins of the graph var svg d3 select body append svg attr width width attr height height append g attr transform translate margin left margin top var data 9 20 30 8 12 generate range of colors based on the data var myColor d3 scaleOrdinal domain data range d3 schemeSet3 var pie d3 pie value function d return d var piedata pie data svg selectAll mySlices data piedata enter append path attr d d3 arc innerRadius 50 outerRadius 150 attr fill function d return myColor d attr stroke black style stroke width 2px style opacity 0 7 console log adding labels svg selectAll mySlices data piedata enter append text attr transform function d let t d3 arc innerRadius 50 outerRadius 150 centroid d return translate t text function d return d value style text anchor middle style font size 17 console log ready script