Dev.to No React/D3 slices

by WebComponents

HTML

<script src="https://pie-meister.github.io/PieMeister.min.js"></script>

<pie-chart stroke-width="140" pull="-200" 
           stroke="#8ce8ad,#57e188,#34c768,#2db757,#27acaa,#42c9c2,#60e6e1,#93f0e6,#87d3f2,#4ebeeb,#35a4e8,#188ce5,#542ea5,#724bc3,#9c82d4,#c981b2,#b14891,#ff6d00,#ff810a,#ff9831,#ffb46a,#ff9a91,#ff736a,#f95d54,#ff4136,#c4c4cd">
  <style>
    ::part(text) { font:21px Arial; font-weight:bold; text-anchor:middle }
    tspan { font-weight: normal }
  </style>
  <slice size="29" pull="10">25-29<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="28" pull="10">60-64<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="24" pull="10">15-19<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="23" pull="10">40-44<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="22" pull="10">20-24<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="22" pull="10">30-34<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="21" pull="10">&GreaterEqual; 85<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="20" pull="10">5-9<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="20" pull="10">70-74<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="19" pull="10">&lt; 5<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="19" pull="10">10-14<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="19" pull="10">45-49<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="19" pull="10">55-59<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="18" pull="10">35-39<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="18" pull="10">80-84<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="17" pull="10">65-69<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="17" pull="10">75-79<tspan dx="-40" dy="1em">$size</tspan></slice>
  <slice size="16" pull="10">50-54<tspan dx="-40" dy="1em">$size</tspan></slice>
</pie-chart>

CSS

body {
  background: beige;
  display: flex;
  justify-content: center;
}

pie-chart {
  width: 65vw;
}

JavaScript

// None, zero, zilch, nada dependencies here