캘린더 히트맵

<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]); }

var COLS = 18, ROWSN = 7;
var cur = []; for (var i=0;i<COLS*ROWSN;i++) cur.push(0.12);
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 pad=10, legendH=16;
  var pw=W-pad*2, ph=H-pad*2-legendH;
  var gap=Math.max(1, Math.min(3,W/220));
  var cw=(pw-gap*(COLS-1))/COLS;
  var ch=(ph-gap*(ROWSN-1))/ROWSN;
  var size=Math.max(1,Math.min(cw,ch));
  for (var c=0;c<COLS;c++){
    for (var r=0;r<ROWSN;r++){
      var idx=c*ROWSN+r;
      var v=cur[idx];
      var rect=se('rect');
      sa(rect,{ x:pad+c*(size+gap), y:pad+r*(size+gap), width:size, height:size, rx:1.5, fill:'var(--accent)', 'fill-opacity': Math.max(0.08, v*0.95) });
      svg.appendChild(rect);
    }
  }
  var ly = pad+ph+legendH-2;
  var lt = se('text');
  sa(lt,{ x:pad, y:ly, fill:'var(--muted)', 'font-size':8, 'font-weight':600 });
  lt.textContent = '적음';
  svg.appendChild(lt);
  for (var k=0;k<5;k++){
    var sw=se('rect');
    sa(sw,{ x:pad+26+k*11, y:ly-8, width:8, height:8, rx:1.5, fill:'var(--accent)', 'fill-opacity':0.12+k*0.22 });
    svg.appendChild(sw);
  }
  var rt = se('text');
  sa(rt,{ x:pad+26+5*11+4, y:ly, fill:'var(--muted)', 'font-size':8, 'font-weight':600 });
  rt.textContent = '많음';
  svg.appendChild(rt);
}

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);
}

function nextTarget(){
  var t=[];
  for (var i=0;i<COLS*ROWSN;i++) t.push(Math.random()<0.14 ? 0.03 : Math.pow(Math.random(),1.6));
  return t;
}

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