D3.js pie() Function - GeeksforGeeks

01 Sep, 2020
The d3.pie() is used to construct a pie generator that has its default settings. This pie generator takes an array of data and then returns an array of objects that contains details about each arc angle.
Syntax:
d3.pie();

Parameters: This function does not accept any parameters.
Return Values: This function returns a pie generator.
Below given are a few examples of the function given above.
Example 1:
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport"          content="width=device-width,                   initial-scale=1.0"/>           <!--Fetching from CDN of D3.js -->    <script src=         "https://d3js.org/d3.v6.min.js">     </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.1,2.2,4.46,2.12,1.36,5.002445,4.1242];          // Selecting SVG using d3.select()        var svg = d3.select("svg");          let g = svg.append("g")               .attr("transform", "translate(150,120)");                  // Creating Pie generator        var pie = d3.pie();          // Creating arc        var arc = d3.arc()                    .innerRadius(0)                    .outerRadius(100);          // 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];            })            .attr("d", arc);    </script> </body>   </html>
Output:
Example 2:
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport"          content="width=device-width,                   initial-scale=1.0"/>       <!--Fetching from CDN of D3.js -->    <script src=         "https://d3js.org/d3.v6.min.js">     </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>
Output:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
How to get character array from string in JavaScript?
How to filter object array based on attributes?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?