function pie (instance) {
  // (A) RANDOM COLOR HELPER
  // credit : https://stackoverflow.com/questions/1484506/random-color-generator
  var rnd = () => {
    let letters = "0123456789ABCDEF", color = "#";
    for (let i=0; i<6; i++) { color += letters[Math.floor(Math.random() * 16)]; }
    return color;
  };

  // (B) TOTAL VALUE + RANDOM COLORS IF REQUIRED
  var total = 0;
  for (let i of instance.data) {
    total += i[1];
    if (i[2] == undefined) { i[2] = rnd(); }
  }

  // (C) CREATE HTML
  var chart = document.createElement("div"),
      legend = document.createElement("div");
  chart.className = "pie";
  legend.className = "legend";
  instance.target.appendChild(chart);
  instance.target.appendChild(legend);
  if (instance.donut) {
    var donut = document.createElement("div");
    donut.className = "hole";
    chart.classList.add("donut")
    chart.appendChild(donut);
  }

  // (D) CREATE SEGMENTS
  var css = "background: conic-gradient(",
      from = 0, to = 0, slice;
  for (let i of instance.data) {
    // (D1) PIE SLICE
    slice = Math.floor((i[1] / total) * 360);
    to += slice;
    css += `${i[2]} ${from}deg ${to}deg,`;
    from = to;

    // (D2) LEGEND
    legend.innerHTML += `<div style="background:${i[2]}"></div>
    <div>${i[0]}</div>`;
  }
  chart.style.cssText = css.slice(0, -1) + ")";
}

window.onload = () => {
  pie({
    target : document.getElementById("demo"), // required, target container
    donut : false, // optional, "convert" to donut chart
    data : [ // required, ["name", quantity, color]
      ["First", 33, "#ff0000"],
      ["Second", 21, "green"],
      ["Third", 14]
    ]
  });
};