Custom Pie Chart - Student Debt in the US

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/RZXYMXGZ

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background: #f6f6f6;
    }

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body class="zc-body">

  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location
    let chartId = 'myChart';

    // DATA
    // -----------------------------
    let i, k, min = Number.MAX_VALUE,
      max = -Number.MAX_VALUE;
    let minsize = 75,
      maxsize = 100;
    let ratio = (maxsize - minsize) / (max - min);


    // CHART DATA
    // -----------------------------
    let usstates = {
      AL: 'Alabama',
      AK: 'Alaska',
      AZ: 'Arizona',
      AR: 'Arkansas',
      CA: 'California',
      CO: 'Colorado',
      CT: 'Connecticut',
      DC: 'District of Columbia',
      DE: 'Delaware',
      FL: 'Florida',
      GA: 'Georgia',
      HI: 'Hawaii',
      ID: 'Idaho',
      IL: 'Illinois',
      IN: 'Indiana',
      IA: 'Iowa',
      KS: 'Kansas',
      KY: 'Kentucky',
      LA: 'Louisiana',
      ME: 'Maine',
      MD: 'Maryland',
      MA: 'Massachusetts',
      MI: 'Michigan',
      MN: 'Minnesota',
      MS: 'Mississippi',
      MO: 'Missouri',
      MT: 'Montana',
      NE: 'Nebraska',
      NV: 'Nevada',
      NH: 'New Hampshire',
      NJ: 'New Jersey',
      NM: 'New Mexico',
      NY: 'New York',
      NC: 'North Carolina',
      ND: 'North Dakota',
      OH: 'Ohio',
      OK: 'Oklahoma',
      OR: 'Oregon',
      PA: 'Pennsylvania',
      RI: 'Rhode Island',
      SC: 'South Carolina',
      SD: 'South Dakota',
      TN: 'Tennessee',
      TX: 'Texas',
      UT: 'Utah',
      VT: 'Vermont',
      VA: 'Virginia',
      WA: 'Washington',
      WV: 'West Virginia',
      WI: 'Wisconsin',
      WY: 'Wyoming'
    };

    // Raw data
    let rawdata = [
      ["Alabama", "$31,899", "50%"],
      ["Alaska", "$25,682", "46%"],
      ["Arizona", "$23,967", "54%"],
      ["Arkansas", "$26,799", "55%"],
      ["California", "$22,785", "50%"],
      ["Colorado", "$26,530", "52%"],
      ["Connecticut", "$38,510", "57%"],
      ["Delaware", "$34,144", "62%"],
      ["District of Columbia", "$30,775", "46%"],
      ["Florida", "$24,041", "50%"],
      ["Georgia", "$28,653", "57%"],
      ["Hawaii", "$25,125", "49%"],
      ["Idaho", "$26,675", "61%"],
      ["Illinois", "$29,214", "61%"],
      ["Indiana", "$29,561", "57%"],
      ["Iowa", "$29,859", "63%"],
      ["Kansas", "$27,720", "59%"],
      ["Kentucky", "$28,447", "64%"],
      ["Louisiana", "$27,210", "48%"],
      ["Maine", "$31,364", "56%"],
      ["Maryland", "$29,314", "56%"],
      ["Massachusetts", "$32,065", "59%"],
      ["Michigan", "$31,289", "58%"],
      ["Minnesota", "$31,734", "68%"],
      ["Mississippi", "$30,439", "58%"],
      ["Missouri", "$27,108", "58%"],
      ["Montana", "$28,466", "59%"],
      ["Nebraska", "$25,750", "54%"],
      ["Nevada", "$22,064", "49%"],
      ["New Hampshire", "$34,415", "74%"],
      ["New Jersey", "$32,247", "61%"],
      ["New Mexico", "$21,237", "54%"],
      ["New York", "$30,931", "60%"],
      ["North Carolina", "$26,526", "57%"],
      ["North Dakota", "*", "*"],
      ["Ohio", "$30,629", "62%"],
      ["Oklahoma", "$25,952", "49%"],
      ["Oregon", "$27,885", "56%"],
      ["Pennsylvania", "$36,854", "67%"],
      ["Rhode Island", "$36,250", "64%"],
      ["South Carolina", "$30,891", "58%"],
      ["South Dakota", "$31,275", "74%"],
      ["Tennessee", "$25,252", "56%"],
      ["Texas", "$26,824", "55%"],
      ["Utah", "$18,838", "38%"],
      ["Vermont", "$30,651", "60%"],
      ["Virginia", "$29,887", "56%"],
      ["Washington", "$23,936", "52%"],
      ["West Virginia", "$27,505", "74%"],
      ["Wisconsin", "$29,569", "64%"],
      ["Wyoming", "$22,524", "47%"]
    ];
    // Clean the rawdata
    for (i = 0; i < rawdata.length; i++) {
      // Copy formatted value
      rawdata[i][3] = rawdata[i][1];
      rawdata[i][1] = parseInt(rawdata[i][1].replace(/\$|\*|,/g, ''), 10);
      rawdata[i][2] = parseInt(rawdata[i][2].replace(/\%/g, ''), 10);
      if (isNaN(rawdata[i][1])) {
        rawdata[i][1] = 0;
      }
      if (isNaN(rawdata[i][2])) {
        rawdata[i][2] = 0;
      }
      if (rawdata[i][1] !== 0) {
        min = Math.min(min, rawdata[i][1]);
        max = Math.max(max, rawdata[i][1]);
      }
      for (k in usstates) {
        if (usstates[k] === rawdata[i][0]) {
          rawdata[i][0] = k;
        }
      }
    }
    // Alpha sort
    rawdata.sort(function(a, b) {
      return a[1] - b[1];
    });


    // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'pie',
      backgroundColor: '#f6f6f6',
      title: {
        text: 'The State of Student Debt in The United States of America',
        fontSize: 19
      },
      subtitle: {
        text: 'Average Debt and Percentage of Graduates with Debt - Class of 2020'
      },
      plotarea: {
        margin: '60px 40px 30px 20px'
      },
      scale: {
        sizeFactor: 1.25
      },
      plot: {
        detach: false,
        animation: {
          effect: 'ANIMATION_FADE_IN',
          method: 'ANIMATION_BACK_EASE_OUT',
          sequence: 'ANIMATION_BY_PLOT',
          speed: 10

        }
      },
      labels: [{
          text: 'Data Source: The Institute for College Access & Success (TICAS)',
          align: 'right',
          fontSize: '10px',
          fontWeight: 'bold',
          paddingRight: '10px',
          url: 'https://ticas.org/sites/default/files/pub_files/classof2017.pdf',
          target: '_blank',
          width: '100%',
          x: 0,
          y: '555px'
        },
        {
          text: 'Original design from https://howmuch.net/articles/student-debt-and-the-class-2017',
          align: 'right',
          fontSize: '10px',
          fontWeight: 'bold',
          paddingRight: '10px',
          url: 'https://howmuch.net/articles/student-debt-and-the-class-2017',
          target: '_blank',
          width: '100%',
          x: 0,
          y: '575px'
        },
        {
          text: 'More than 70%',
          align: 'left',
          borderLeft: '16px solid #A20100',
          fontSize: '10px',
          padding: '1px 1px 1px 20px',
          width: '100px',
          x: '10px',
          y: '495px'
        },
        {
          text: '60% - 70%',
          align: 'left',
          borderLeft: '16px solid #D8060F',
          fontSize: '10px',
          padding: '1px 1px 1px 20px',
          width: '100px',
          x: '10px',
          y: '515px'
        },
        {
          text: '50% - 60%',
          align: 'left',
          borderLeft: '16px solid #FF1121',
          fontSize: '10px',
          padding: '1px 1px 1px 20px',
          width: '100px',
          x: '10px',
          y: '535px'
        },
        {
          text: '40% - 50%',
          align: 'left',
          borderLeft: '16px solid #FF7770',
          fontSize: '10px',
          padding: '1px 1px 1px 20px',
          width: '100px',
          x: '10px',
          y: '555px'
        },
        {
          text: 'Less than 40%',
          align: 'left',
          borderLeft: '16px solid #FFD4D1',
          fontSize: '10px',
          padding: '1px 1px 1px 20px',
          width: '100px',
          x: '10px',
          y: '575px'
        }
      ],
      tooltip: {
        text: '%data-percent% students with debt in %data-state',
        fontSize: '15px',
        padding: '10px',
        rules: [{
          rule: '%data-percent === 0',
          text: 'No data available for %data-state',
          backgroundColor: '#ccc',
          color: '#333'
        }]
      },
      series: []
    };

    // Add data
    for (i = 0; i < rawdata.length; i++) {
      let rpc = Number(80 + 5 * (rawdata[i][1] - min) / (max - min)).toFixed(1);
      let fs = Number(12 + 6 * (rawdata[i][1] - min) / (max - min)).toFixed(1);
      chartConfig.series.push({
        values: [1],
        dataDebt: rawdata[i][3],
        dataPercent: rawdata[i][2],
        dataAbbr: rawdata[i][0],
        dataState: usstates[rawdata[i][0]],
        size: Math.round(minsize + (rawdata[i][1] - min) * ratio) + '%',
        slice: 35,
        backgroundColor: '#c00',
        rules: [{
            rule: '%data-percent === 0',
            backgroundColor: '#ccc'
          },
          {
            rule: '%data-percent > 0 && %data-percent < 40',
            backgroundColor: '#FFD4D1'
          },
          {
            rule: '%data-percent >= 40 && %data-percent < 50',
            backgroundColor: '#FF7770'
          },
          {
            rule: '%data-percent >= 50 && %data-percent < 60',
            backgroundColor: '#FF1121'
          },
          {
            rule: '%data-percent >= 60 && %data-percent < 70',
            backgroundColor: '#D8060F'
          },
          {
            rule: '%data-percent >= 70',
            backgroundColor: '#A20100'
          }
        ],
        valueBox: [{
            shadow: false,
            fontSize: 13,
            placement: 'fixed=' + rpc + '%,50%,+0',
            text: '%data-debt',
            rules: [{
              rule: '%data-percent < 40',
              color: '#333'
            }]
          },
          {
            shadow: false,
            fontSize: fs,
            color: '#000',
            fontWeight: 900,
            placement: 'fixed=105%,50%,+90',
            text: '%data-abbr'
          }
        ]
      });
    }


    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: chartId,
      data: chartConfig,
      width: '100%',
      height: 600,
      output: 'svg',
    });
  </script>
</body>

</html>

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body class="zc-body">

  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

</body>
</html>

// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';

// DATA
// -----------------------------
let i, k, min = Number.MAX_VALUE, max = -Number.MAX_VALUE;
let minsize = 75, maxsize = 100;
let ratio = (maxsize - minsize) / (max - min);


// CHART DATA
// -----------------------------
let usstates = {
  AL: 'Alabama',
  AK: 'Alaska',
  AZ: 'Arizona',
  AR: 'Arkansas',
  CA: 'California',
  CO: 'Colorado',
  CT: 'Connecticut',
  DC: 'District of Columbia',
  DE: 'Delaware',
  FL: 'Florida',
  GA: 'Georgia',
  HI: 'Hawaii',
  ID: 'Idaho',
  IL: 'Illinois',
  IN: 'Indiana',
  IA: 'Iowa',
  KS: 'Kansas',
  KY: 'Kentucky',
  LA: 'Louisiana',
  ME: 'Maine',
  MD: 'Maryland',
  MA: 'Massachusetts',
  MI: 'Michigan',
  MN: 'Minnesota',
  MS: 'Mississippi',
  MO: 'Missouri',
  MT: 'Montana',
  NE: 'Nebraska',
  NV: 'Nevada',
  NH: 'New Hampshire',
  NJ: 'New Jersey',
  NM: 'New Mexico',
  NY: 'New York',
  NC: 'North Carolina',
  ND: 'North Dakota',
  OH: 'Ohio',
  OK: 'Oklahoma',
  OR: 'Oregon',
  PA: 'Pennsylvania',
  RI: 'Rhode Island',
  SC: 'South Carolina',
  SD: 'South Dakota',
  TN: 'Tennessee',
  TX: 'Texas',
  UT: 'Utah',
  VT: 'Vermont',
  VA: 'Virginia',
  WA: 'Washington',
  WV: 'West Virginia',
  WI: 'Wisconsin',
  WY: 'Wyoming'
};

// Raw data
let rawdata = [
  ["Alabama", "$31,899", "50%"],
  ["Alaska", "$25,682", "46%"],
  ["Arizona", "$23,967", "54%"],
  ["Arkansas", "$26,799", "55%"],
  ["California", "$22,785", "50%"],
  ["Colorado", "$26,530", "52%"],
  ["Connecticut", "$38,510", "57%"],
  ["Delaware", "$34,144", "62%"],
  ["District of Columbia", "$30,775", "46%"],
  ["Florida", "$24,041", "50%"],
  ["Georgia", "$28,653", "57%"],
  ["Hawaii", "$25,125", "49%"],
  ["Idaho", "$26,675", "61%"],
  ["Illinois", "$29,214", "61%"],
  ["Indiana", "$29,561", "57%"],
  ["Iowa", "$29,859", "63%"],
  ["Kansas", "$27,720", "59%"],
  ["Kentucky", "$28,447", "64%"],
  ["Louisiana", "$27,210", "48%"],
  ["Maine", "$31,364", "56%"],
  ["Maryland", "$29,314", "56%"],
  ["Massachusetts", "$32,065", "59%"],
  ["Michigan", "$31,289", "58%"],
  ["Minnesota", "$31,734", "68%"],
  ["Mississippi", "$30,439", "58%"],
  ["Missouri", "$27,108", "58%"],
  ["Montana", "$28,466", "59%"],
  ["Nebraska", "$25,750", "54%"],
  ["Nevada", "$22,064", "49%"],
  ["New Hampshire", "$34,415", "74%"],
  ["New Jersey", "$32,247", "61%"],
  ["New Mexico", "$21,237", "54%"],
  ["New York", "$30,931", "60%"],
  ["North Carolina", "$26,526", "57%"],
  ["North Dakota", "*", "*"],
  ["Ohio", "$30,629", "62%"],
  ["Oklahoma", "$25,952", "49%"],
  ["Oregon", "$27,885", "56%"],
  ["Pennsylvania", "$36,854", "67%"],
  ["Rhode Island", "$36,250", "64%"],
  ["South Carolina", "$30,891", "58%"],
  ["South Dakota", "$31,275", "74%"],
  ["Tennessee", "$25,252", "56%"],
  ["Texas", "$26,824", "55%"],
  ["Utah", "$18,838", "38%"],
  ["Vermont", "$30,651", "60%"],
  ["Virginia", "$29,887", "56%"],
  ["Washington", "$23,936", "52%"],
  ["West Virginia", "$27,505", "74%"],
  ["Wisconsin", "$29,569", "64%"],
  ["Wyoming", "$22,524", "47%"]
];
// Clean the rawdata
for (i = 0; i < rawdata.length; i++) {
  // Copy formatted value
  rawdata[i][3] = rawdata[i][1];
  rawdata[i][1] = parseInt(rawdata[i][1].replace(/\$|\*|,/g, ''), 10);
  rawdata[i][2] = parseInt(rawdata[i][2].replace(/\%/g, ''), 10);
  if (isNaN(rawdata[i][1])) {
    rawdata[i][1] = 0;
  }
  if (isNaN(rawdata[i][2])) {
    rawdata[i][2] = 0;
  }
  if (rawdata[i][1] !== 0) {
    min = Math.min(min, rawdata[i][1]);
    max = Math.max(max, rawdata[i][1]);
  }
  for (k in usstates) {
    if (usstates[k] === rawdata[i][0]) {
      rawdata[i][0] = k;
    }
  }
}
// Alpha sort
rawdata.sort(function (a, b) { return a[1] - b[1]; });


// CHART CONFIG
// -----------------------------
let chartConfig = {
  type: 'pie',
  backgroundColor: '#f6f6f6',
  title: {
    text: 'The State of Student Debt in The United States of America',
    fontSize: 19
  },
  subtitle: {
    text: 'Average Debt and Percentage of Graduates with Debt - Class of 2020'
  },
  plotarea: {
    margin: '60px 40px 30px 20px'
  },
  scale: {
    sizeFactor: 1.25
  },
  plot: {
    detach: false,
    animation: {
      effect: 'ANIMATION_FADE_IN',
      method: 'ANIMATION_BACK_EASE_OUT',
      sequence: 'ANIMATION_BY_PLOT',
      speed: 10

    }
  },
  labels: [
    {
      text: 'Data Source: The Institute for College Access & Success (TICAS)',
      align: 'right',
      fontSize: '10px',
      fontWeight: 'bold',
      paddingRight: '10px',
      url: 'https://ticas.org/sites/default/files/pub_files/classof2017.pdf',
      target: '_blank',
      width: '100%',
      x: 0,
      y: '555px'
    },
    {
      text: 'Original design from https://howmuch.net/articles/student-debt-and-the-class-2017',
      align: 'right',
      fontSize: '10px',
      fontWeight: 'bold',
      paddingRight: '10px',
      url: 'https://howmuch.net/articles/student-debt-and-the-class-2017',
      target: '_blank',
      width: '100%',
      x: 0,
      y: '575px'
    },
    {
      text: 'More than 70%',
      align: 'left',
      borderLeft: '16px solid #A20100',
      fontSize: '10px',
      padding: '1px 1px 1px 20px',
      width: '100px',
      x: '10px',
      y: '495px'
    },
    {
      text: '60% - 70%',
      align: 'left',
      borderLeft: '16px solid #D8060F',
      fontSize: '10px',
      padding: '1px 1px 1px 20px',
      width: '100px',
      x: '10px',
      y: '515px'
    },
    {
      text: '50% - 60%',
      align: 'left',
      borderLeft: '16px solid #FF1121',
      fontSize: '10px',
      padding: '1px 1px 1px 20px',
      width: '100px',
      x: '10px',
      y: '535px'
    },
    {
      text: '40% - 50%',
      align: 'left',
      borderLeft: '16px solid #FF7770',
      fontSize: '10px',
      padding: '1px 1px 1px 20px',
      width: '100px',
      x: '10px',
      y: '555px'
    },
    {
      text: 'Less than 40%',
      align: 'left',
      borderLeft: '16px solid #FFD4D1',
      fontSize: '10px',
      padding: '1px 1px 1px 20px',
      width: '100px',
      x: '10px',
      y: '575px'
    }
  ],
  tooltip: {
    text: '%data-percent% students with debt in %data-state',
    fontSize: '15px',
    padding: '10px',
    rules: [
      {
        rule: '%data-percent === 0',
        text: 'No data available for %data-state',
        backgroundColor: '#ccc',
        color: '#333'
      }
    ]
  },
  series: []
};

// Add data
for (i = 0; i < rawdata.length; i++) {
  let rpc = Number(80 + 5 * (rawdata[i][1] - min) / (max - min)).toFixed(1);
  let fs = Number(12 + 6 * (rawdata[i][1] - min) / (max - min)).toFixed(1);
  chartConfig.series.push({
    values: [1],
    dataDebt: rawdata[i][3],
    dataPercent: rawdata[i][2],
    dataAbbr: rawdata[i][0],
    dataState: usstates[rawdata[i][0]],
    size: Math.round(minsize + (rawdata[i][1] - min) * ratio) + '%',
    slice: 35,
    backgroundColor: '#c00',
    rules: [
      {
        rule: '%data-percent === 0',
        backgroundColor: '#ccc'
      },
      {
        rule: '%data-percent > 0 && %data-percent < 40',
        backgroundColor: '#FFD4D1'
      },
      {
        rule: '%data-percent >= 40 && %data-percent < 50',
        backgroundColor: '#FF7770'
      },
      {
        rule: '%data-percent >= 50 && %data-percent < 60',
        backgroundColor: '#FF1121'
      },
      {
        rule: '%data-percent >= 60 && %data-percent < 70',
        backgroundColor: '#D8060F'
      },
      {
        rule: '%data-percent >= 70',
        backgroundColor: '#A20100'
      }
    ],
    valueBox: [
      {
        shadow: false,
        fontSize: 13,
        placement: 'fixed=' + rpc + '%,50%,+0',
        text: '%data-debt',
        rules: [
          {
            rule: '%data-percent < 40',
            color: '#333'
          }
        ]
      },
      {
        shadow: false,
        fontSize: fs,
        color: '#000',
        fontWeight: 900,
        placement: 'fixed=105%,50%,+90',
        text: '%data-abbr'
      }
    ]
  });
}


// RENDER CHARTS
// -----------------------------
zingchart.render({
  id: chartId,
  data: chartConfig,
  width: '100%',
  height: 600,
  output: 'svg',
});

.zc-body { background:#f6f6f6; }

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

Pie Chart Transformation Infographic 50/281 Distribution Map

Custom Pie Chart - Student Debt in the US

Related Documentation: