如何动态创建多级饼图的切片

Question

我正在努力通过使用多级饼图来显示父子关系。我必须通过使用HTML，CSS3和纯JavaScript（没有jQuery或任何库）来实现这一点。我试图实现类似JSFiddle上显示的内容，但我不能使用任何第三方库。

到目前为止，我做到了这一点：

.outer-chart{
  position: relative;
  overflow: hidden;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background-color: #33ccff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2);
}
.outer-circle,
.inner-circle {
  position: absolute;
  border-radius: 50%;
}

.outer-circle {
  top: 15%;
  left: 15%;
  right: 15%;
  bottom: 15%;
  background-color: #ccff66;
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.2);
}
.inner-circle {
  top: 30%;
  left: 30%;
  right: 30%;
  bottom: 30%;
  background-color: #ffffff;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2);
}

<div id="outermost" class="outer-chart" >
  <div id="outer" class="outer-circle">
    <div id="inner" class="inner-circle"> </div>
  </div>
</div>

FIDDLE

但我无法生成如上图所示的切片。我的标签将是动态的，切片将根据父级进行更改。