Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Pie chart

I created the SVG file with the rectangle in VS Code and then asked co-pilot to: "add a piechart to the svg file". It created this example and gave me an explanation of it.

Then I asked it to "Write a python function that will get the segments as parameters and will generate a similar SVG file" and it created a nice one though it did not use any 3rd party library.

So I asked "is there a 3rd party library that could be used instead of implementing the creation of the chart?"

It suggested Pygal, Matplotlib, and Plotly.

Stacked

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" stroke="black" stroke-width="1" fill="white" />
  
  <!-- Pie Chart centered at (250, 250) with radius 150 -->
  <g transform="translate(250, 250)">
    
    <!-- Segment 1: 40% - Red -->
    <path d="M 0,0 L 150,0 A 150,150 0 0,1 46.35,142.66 Z" 
          fill="#FF6B6B" stroke="white" stroke-width="2"/>
    
    <!-- Segment 2: 30% - Blue -->
    <path d="M 0,0 L 46.35,142.66 A 150,150 0 0,1 -121.35,92.71 Z" 
          fill="#4ECDC4" stroke="white" stroke-width="2"/>
    
    <!-- Segment 3: 20% - Green -->
    <path d="M 0,0 L -121.35,92.71 A 150,150 0 0,1 -136.60,-54.41 Z" 
          fill="#45B7D1" stroke="white" stroke-width="2"/>
    
    <!-- Segment 4: 10% - Orange -->
    <path d="M 0,0 L -136.60,-54.41 A 150,150 0 0,1 150,0 Z" 
          fill="#FFA07A" stroke="white" stroke-width="2"/>
          
    <!-- Center circle (optional - creates a donut effect) -->
    <circle cx="0" cy="0" r="30" fill="white" stroke="#666" stroke-width="1"/>
    
  </g>
  
  <!-- Legend -->
  <g transform="translate(50, 50)">
    <rect x="0" y="0" width="15" height="15" fill="#FF6B6B"/>
    <text x="20" y="12" font-family="Arial" font-size="14" fill="black">Segment 1 (40%)</text>
    
    <rect x="0" y="25" width="15" height="15" fill="#4ECDC4"/>
    <text x="20" y="37" font-family="Arial" font-size="14" fill="black">Segment 2 (30%)</text>
    
    <rect x="0" y="50" width="15" height="15" fill="#45B7D1"/>
    <text x="20" y="62" font-family="Arial" font-size="14" fill="black">Segment 3 (20%)</text>
    
    <rect x="0" y="75" width="15" height="15" fill="#FFA07A"/>
    <text x="20" y="87" font-family="Arial" font-size="14" fill="black">Segment 4 (10%)</text>
  </g>
  
</svg>