▤ Data visualization

Histogram

히스토그램

Buckets a continuous variable into bins and counts how many observations fall in each — the chart for "how is this value distributed."

Also known as: Frequency distribution

···

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}
.minor{display:none}
@media (min-width:460px){.minor{display:inline}}
.bar{fill:var(--accent)}

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 BINS = 12;
var cur = new Array(BINS).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 bellTarget(){
  var peak = R(3,BINS-4);
  var out = [];
  for (var i=0;i<BINS;i++){
    var d = (i-peak)/2.1;
    out.push(Math.max(4, 96*Math.exp(-d*d) + R(-6,6)));
  }
  return out;
}

function draw(){
  svg.innerHTML = '';
  var padL=24, padR=8, padT=14, padB=20;
  var pw=W-padL-padR, ph=H-padT-padB;
  var bw = pw/BINS;
  var fs = Math.max(8, Math.min(11, W/85));
  var base = se('line');
  sa(base,{x1:padL,y1:H-padB,x2:W-padR,y2:H-padB,class:'axis'});
  svg.appendChild(base);
  cur.forEach(function(v,i){
    var h = (v/100)*ph;
    var x = padL+i*bw;
    var y = H-padB-h;
    var rect = se('rect');
    sa(rect,{x:x,y:y,width:Math.max(bw-1,0),height:Math.max(h,0.5),class:'bar'});
    svg.appendChild(rect);
    if (i===0 || i===BINS-1 || i===Math.floor(BINS/2)){
      var t = se('text');
      sa(t,{x:x+bw/2,y:H-padB+13,'text-anchor':'middle',class:'tick minor','font-size':fs-1});
      t.textContent = (i*8);
      svg.appendChild(t);
    }
  });
}

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(bellTarget());
setInterval(function(){ animate(bellTarget()); }, 3600);

It looks like a bar chart, but the x-axis means something different. A bar chart's x-axis holds unrelated categories (apples, bananas), so gaps between bars are correct; a histogram's x-axis is one continuous variable cut into ranges, so bars must touch — a gap would falsely suggest neighboring bins are unrelated.

Bin count changes the story. Too few bins and a bimodal distribution can look unimodal; too many and noise starts looking like pattern. The same data can look like a completely different distribution depending on bin count, so it's worth checking a few bin counts before trusting the shape.

The y-axis can be a raw count or a normalized density — when comparing two groups of different sizes, normalize to density, or the comparison isn't fair.

When to use

Use it to see the shape of one continuous variable’s distribution — skew, number of peaks, spread.