선 차트

<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}
.axis{stroke:var(--line);stroke-width:1}
.tick{fill:var(--muted);font-weight:600}
.val{fill:var(--fg);font-weight:700}
.minor{display:none}
@media (min-width:460px){.minor{display:inline}}
.ln{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dot{fill:var(--accent)}
.ring{fill:var(--surface)}

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 N = 9;
var cur = new Array(N).fill(50);
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=26, padR=14, padT=16, padB=20;
  var pw=W-padL-padR, ph=H-padT-padB;
  var fs = Math.max(8, Math.min(12, W/85));
  var pts = cur.map(function(v,i){
    return { x: padL + (pw*i)/(N-1), y: padT + ph - (v/100)*ph };
  });

  [0,100].forEach(function(v){
    var y = padT + ph - (v/100)*ph;
    var g = se('line');
    sa(g,{x1:padL,y1:y,x2:W-padR,y2:y,class:'axis' + (v===100?' minor':'')});
    svg.appendChild(g);
    var t = se('text');
    sa(t,{x:padL-5,y:y+3,'text-anchor':'end',class:'tick minor','font-size':fs-1});
    t.textContent = v;
    svg.appendChild(t);
  });

  var d = pts.map(function(p,i){ return (i===0?'M':'L') + p.x.toFixed(1) + ',' + p.y.toFixed(1); }).join(' ');
  var path = se('path');
  sa(path,{d:d,class:'ln'});
  svg.appendChild(path);

  pts.forEach(function(p,i){
    if (i%2===0 || i===pts.length-1){
      var ring = se('circle');
      sa(ring,{cx:p.x,cy:p.y,r:4.5,class:'ring minor'});
      svg.appendChild(ring);
      var dot = se('circle');
      sa(dot,{cx:p.x,cy:p.y,r:2.6,class:'dot minor'});
      svg.appendChild(dot);
    }
  });

  var last = pts[pts.length-1];
  var ring2 = se('circle');
  sa(ring2,{cx:last.x,cy:last.y,r:5,class:'ring'});
  svg.appendChild(ring2);
  var dot2 = se('circle');
  sa(dot2,{cx:last.x,cy:last.y,r:3.2,class:'dot'});
  svg.appendChild(dot2);
  var lab = se('text');
  sa(lab,{x:last.x-6,y:last.y-8,'text-anchor':'end',class:'val','font-size':fs});
  lab.textContent = Math.round(cur[cur.length-1]);
  svg.appendChild(lab);
}

function animate(target){
  var from = cur.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 = from.map(function(v,i){ return v+(target[i]-v)*e; });
    draw();
    if (p<1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

function nextTarget(){
  var v = 50, out = [];
  for (var i=0;i<N;i++){ v = Math.max(10,Math.min(92, v + R(-22,22))); out.push(v); }
  return out;
}

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