마리메꼬 차트

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

:root{--viz-4:#e8a23a}
body{display:block}
.viz{position:relative;width:100%;height:100%}
svg{display:block;width:100%;height:100%;overflow:visible}
.legend{position:absolute;top:4px;right:6px;display:flex;gap:8px;font:600 9px/1 system-ui,sans-serif;color:var(--muted)}
.legend b{display:inline-flex;align-items:center;gap:3px;font-weight:600}
.legend i{width:7px;height:7px;border-radius:2px;display:inline-block}

var svg = document.getElementById('svg');
var lg = document.getElementById('lg');
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); }
function sum(arr){ return arr.reduce(function(a,b){ return a+b; },0); }

var CATS = ['수도권','영남','호남','기타'];
var SERIES = [
  { name: '온라인', color: 'var(--accent)' },
  { name: '오프라인', color: 'var(--viz-4)' },
  { name: '제휴', color: 'var(--accent-3)' }
];
lg.innerHTML = SERIES.map(function(s){ return '<b><i style="background:'+s.color+'"></i>'+s.name+'</b>'; }).join('');

var cur = { weight: CATS.map(function(){ return 25; }), share: CATS.map(function(){ return SERIES.map(function(){ return 1; }); }) };
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=6,padR=6,padT=8,padB=20;
  var pw=W-padL-padR, ph=H-padT-padB;
  var gap=2;
  var totalW = sum(cur.weight);
  var fs = Math.max(7,Math.min(10,W/48));
  var x = padL;
  CATS.forEach(function(name,ci){
    var w = Math.max(2,(cur.weight[ci]/totalW)*(pw-gap*(CATS.length-1)));
    var shareRow = cur.share[ci];
    var rowSum = sum(shareRow);
    var y = padT+ph;
    shareRow.forEach(function(v,si){
      var segH = (v/rowSum)*ph;
      y -= segH;
      var rect = se('rect');
      sa(rect,{ x:x, y:y, width:w, height:Math.max(segH-1,0.5), fill:SERIES[si].color });
      svg.appendChild(rect);
    });
    var lab = se('text');
    sa(lab,{ x:x+w/2, y:padT+ph+13, 'text-anchor':'middle', fill:'var(--muted)', 'font-size':fs, 'font-weight':600 });
    lab.textContent = name;
    svg.appendChild(lab);
    x += w+gap;
  });
}

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

function nextTarget(){
  return {
    weight: CATS.map(function(){ return R(10,42); }),
    share: CATS.map(function(){ return SERIES.map(function(){ return R(6,85); }); })
  };
}

new ResizeObserver(function(){ measure(); draw(); }).observe(svg);
measure();
draw();
animate(nextTarget());
setInterval(function(){ animate(nextTarget()); }, 3800);