SVG Based Multiple Pie Chart JavaScript Library – MDMPC

Preview:

Description:

MDMPC is a small JavaScript library used to generate a multiple pie chart using JavaScript and SVG.

How to use it:

Load the MDMPC JavaScript library at the bottom of the web page.

<script src="MDMPC.js"></script>

Create a SVG element for the pie chart.

<svg id="MDMultiplePieChart" width="12cm" height="12cm" viewBox="0 0 1000 1000">
  <rect width="1000" height="1000" style="fill:rgb(255,255,255)">
</svg>

Prepare your data following the structure like this:

var data = {
  category: [{
    label: "2012 Summer Olympics medals (20 first countries)",
    value: "1",
    color: "#84888E",
    alpha: "20",
    category: [
      {
        label: "America",
        color: "#1ABC9C",
        category: [{
          label: "United States",
          category: [{
            label: "Gold",
            value: "46",
          }, {
            label: "Silver",
            value: "29",
          }, {
            label: "Bronze",
            value: "29",
          }]
        }, {
          label: "Cuba",
          category: [{
            label: "Gold",
            value: "5",
          }, {
            label: "Silver",
            value: "3",
          }, {
            label: "Bronze",
            value: "7",
          }]
         }, {
          label: "Jamaica",
          category: [{
            label: "Gold",
            value: "4",
          }, {
            label: "Silver",
            value: "4",
          }, {
            label: "Bronze",
            value: "4",
          }]
         }]
      }, {
        label: "Europe",
        color: "#3498DB",
        category: [{
          label: "Great Britain",
          category: [{
            label: "Gold",
            value: "29",
          }, {
            label: "Silver",
            value: "17",
          }, {
            label: "Bronze",
            value: "19",
          }]
        }, {
          label: "Russia",
          category: [{
            label: "Gold",
            value: "24",
          }, {
            label: "Silver",
            value: "25",
          }, {
            label: "Bronze",
            value: "32",
          }]
         }, {
          label: "Germany",
          category: [{
            label: "Gold",
            value: "11",
          }, {
            label: "Silver",
            value: "19",
          }, {
            label: "Bronze",
            value: "14",
          }]
         }, {
          label: "France",
          category: [{
            label: "Gold",
            value: "11",
          }, {
            label: "Silver",
            value: "11",
          }, {
            label: "Bronze",
            value: "12",
          }]
         }, {
          label: "Italy",
          category: [{
            label: "Gold",
            value: "8",
          }, {
            label: "Silver",
            value: "9",
          }, {
            label: "Bronze",
            value: "11",
          }]
         }, {
          label: "Hungary",
          category: [{
            label: "Gold",
            value: "8",
          }, {
            label: "Silver",
            value: "4",
          }, {
            label: "Bronze",
            value: "6",
          }]
         }, {
          label: "Netherlands ",
          category: [{
            label: "Gold",
            value: "6",
          }, {
            label: "Silver",
            value: "6",
          }, {
            label: "Bronze",
            value: "8",
          }]
         }, {
          label: "Ukraine",
          category: [{
            label: "Gold",
            value: "6",
          }, {
            label: "Silver",
            value: "5",
          }, {
            label: "Bronze",
            value: "9",
          }]
         }, {
          label: "Czech Republic",
          category: [{
            label: "Gold",
            value: "4",
          }, {
            label: "Silver",
            value: "3",
          }, {
            label: "Bronze",
            value: "3",
          }]
         }]
      }, {
        label: "Asia",
        color: "#9B59B6",
        category: [{
          label: "China",
          category: [{
            label: "Gold",
            value: "38",
          }, {
            label: "Silver",
            value: "27",
          }, {
            label: "Bronze",
            value: "19",
          }]
        }, {
          label: "South Korea",
          category: [{
            label: "Gold",
            value: "13",
          }, {
            label: "Silver",
            value: "8",
          }, {
            label: "Bronze",
            value: "7",
          }]
         }, {
          label: "Kazakhstan",
          category: [{
            label: "Gold",
            value: "7",
          }, {
            label: "Silver",
            value: "1",
          }, {
            label: "Bronze",
            value: "5",
          }]
         }, {
          label: "Iran",
          category: [{
            label: "Gold",
            value: "4",
          }, {
            label: "Silver",
            value: "5",
          }, {
            label: "Bronze",
            value: "3",
          }]
         }, {
          label: "Japan",
          category: [{
            label: "Gold",
            value: "7",
          }, {
            label: "Silver",
            value: "14",
          }, {
            label: "Bronze",
            value: "17",
          }]
         }, {
          label: "North Korea",
          category: [{
            label: "Gold",
            value: "4",
          }, {
            label: "Silver",
            value: "0",
          }, {
            label: "Bronze",
            value: "2",
          }]
         }]
      }, {
        label: "Oceania",
        color: "#F1C40F",
        category: [{
          label: "Australia",
          category: [{
            label: "Gold",
            value: "7",
          }, {
            label: "Silver",
            value: "16",
          }, {
            label: "Bronze",
            value: "12",
          }]
        }, {
          label: "New Zealand",
          category: [{
            label: "Gold",
            value: "6",
          }, {
            label: "Silver",
            value: "2",
          }, {
            label: "Bronze",
            value: "5",
          }]
         }]
      }
    ]
  }]
};