▤ Data visualization

Area chart

영역 차트

A line chart with the space beneath it filled — the fill makes volume and cumulative magnitude read more strongly than a bare line.

Also known as: Area graph면적 차트

···

html

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

css

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}}
.fill{fill:var(--accent);fill-opacity:.14;stroke:none}
.ln{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dot{fill:var(--accent)}
.ring{fill:var(--surface)}

js

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 = 10;
var cur = new Array(N).fill(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=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 base = padT+ph;
  var pts = cur.map(function(v,i){
    return { x: padL + (pw*i)/(N-1), y: padT + ph - (v/100)*ph };
  });

  var g0 = se('line');
  sa(g0,{x1:padL,y1:base,x2:W-padR,y2:base,class:'axis'});
  svg.appendChild(g0);
  var z = se('text');
  sa(z,{x:padL-5,y:base+3,'text-anchor':'end',class:'tick minor','font-size':fs-1});
  z.textContent='0';
  svg.appendChild(z);

  var line = pts.map(function(p,i){ return (i===0?'M':'L') + p.x.toFixed(1) + ',' + p.y.toFixed(1); }).join(' ');
  var area = 'M' + pts[0].x.toFixed(1) + ',' + base + ' ' + line.slice(1) + ' L' + pts[pts.length-1].x.toFixed(1) + ',' + base + ' Z';

  var af = se('path');
  sa(af,{d:area,class:'fill'});
  svg.appendChild(af);
  var lp = se('path');
  sa(lp,{d:line,class:'ln'});
  svg.appendChild(lp);

  var last = pts[pts.length-1];
  var ring = se('circle');
  sa(ring,{cx:last.x,cy:last.y,r:5,class:'ring'});
  svg.appendChild(ring);
  var dot = se('circle');
  sa(dot,{cx:last.x,cy:last.y,r:3.2,class:'dot'});
  svg.appendChild(dot);
  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 = 40, out=[];
  for (var i=0;i<N;i++){ v = Math.max(8,Math.min(90, v+R(-20,24))); out.push(v); }
  return out;
}

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

Structurally it's a line chart with the underside filled, but that fill changes the meaning. A filled area reads as "this much has accumulated," so the "skip zero" trick that's fine on a line chart becomes misleading here — area itself is perceived as the value, so the baseline must be zero.

Never fill it solid. Lay the series color down at roughly 10% opacity and let the 2px stroke on top carry the precise boundary. A solid fill hides whatever's underneath and, with overlapping series, hides whichever area sits behind.

Overlapping (not stacked) areas work for at most two series — beyond that, which area sits on top starts distorting how the values read. If the real goal is cumulative totals, use a stacked area/bar instead.

When to use

Use it to emphasize accumulated volume or the overall shape of one series. For precise multi-series comparison, a plain line chart wins.