롤리팝 차트

<div class="viz">
  <svg id="svg"></svg>
</div>

body{display:block}
.viz{position:relative;width:100%;height:100%}
svg{display:block;width:100%;height:100%;overflow:visible}

var svg = document.getElementById('svg');
var NS = 'http://www.w3.org/2000/svg';
function se(t){ return document.createElementNS(NS,t); }
function sa(e,o){ for (var k in o) e.setAttribute(k,o[k]); }
function R(a,b){ return a + Math.random()*(b-a); }

var CATS = ['A','B','C','D','E','F'];
var cur = CATS.map(function(){ return 0; });
var W=300, H=200;

function measure(){
  var r = svg.getBoundingClientRect();
  W = Math.max(r.width,10); H = Math.max(r.height,10);
  sa(svg,{ viewBox: '0 0 ' + W + ' ' + H });
}

function draw(){
  svg.innerHTML = '';
  var padL=22,padR=30,padT=10,padB=8;
  var pw=W-padL-padR, ph=H-padT-padB;
  var n=CATS.length;
  var rowH = ph/n;
  var fs = Math.max(8,Math.min(11,W/40));
  var axis = se('line');
  sa(axis,{ x1:padL, y1:padT, x2:padL, y2:padT+ph, stroke:'var(--line)', 'stroke-width':1 });
  svg.appendChild(axis);
  CATS.forEach(function(name,i){
    var y = padT+rowH*(i+0.5);
    var x = padL+(cur[i]/100)*pw;
    var lab = se('text');
    sa(lab,{ x:padL-6, y:y+3, 'text-anchor':'end', fill:'var(--muted)', 'font-size':fs, 'font-weight':600 });
    lab.textContent = name;
    svg.appendChild(lab);
    var stem = se('line');
    sa(stem,{ x1:padL, y1:y, x2:x, y2:y, stroke:'var(--accent)', 'stroke-width':2 });
    svg.appendChild(stem);
    var dot = se('circle');
    sa(dot,{ cx:x, cy:y, r:5, fill:'var(--accent)' });
    svg.appendChild(dot);
    var val = se('text');
    sa(val,{ x:x+8, y:y+3, fill:'var(--fg)', 'font-size':fs, 'font-weight':700 });
    val.textContent = Math.round(cur[i]);
    svg.appendChild(val);
  });
}

function animate(target){
  var from = cur.slice();
  var t0 = performance.now();
  function step(t){
    var p = Math.min(1,(t-t0)/700);
    var e = 1-Math.pow(1-p,3);
    cur = from.map(function(v,i){ return v+(target[i]-v)*e; });
    draw();
    if (p<1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

new ResizeObserver(function(){ measure(); draw(); }).observe(svg);
measure();
draw();
animate(CATS.map(function(){ return R(20,92); }));
setInterval(function(){ animate(CATS.map(function(){ return R(12,95); })); }, 3400);