Bump Chart — Ranking Over Time Line Chart

<div class="bp-card">
  <h3>Ranking over the season</h3>
  <div class="bp-wrap">
    <svg class="bp-svg" id="bpSvg" viewBox="0 0 340 200" aria-label="Bump chart of rankings"></svg>
  </div>
  <div class="bp-legend" id="bpLegend"></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;display:flex;justify-content:center;padding:30px 18px}

.bp-card{background:#1e293b;border:1px solid #334155;border-radius:16px;padding:18px;width:100%;max-width:480px}
.bp-card h3{font-size:15px;font-weight:800;color:#f1f5f9;margin-bottom:12px}
.bp-svg{width:100%;height:auto;display:block;overflow:visible}
.bp-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:opacity .15s,stroke-width .15s}
.bp-node{stroke:#1e293b;stroke-width:2;transition:r .15s}
.bp-col{fill:#64748b;font-size:9px;font-weight:700;text-anchor:middle}
.bp-rank{fill:#475569;font-size:9px;text-anchor:end}
.bp-dim{opacity:.18}
.bp-name{font-size:9px;font-weight:700;dominant-baseline:middle}

.bp-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px}
.bp-leg{display:flex;align-items:center;gap:6px;font-size:12px;color:#cbd5e1;cursor:pointer}
.bp-leg span{width:12px;height:12px;border-radius:3px}
.bp-leg.is-off{opacity:.4}

var ROUNDS = ['Wk1','Wk2','Wk3','Wk4','Wk5'];
var TEAMS = [
  { name:'Falcons', color:'#6366f1', ranks:[1,1,2,3,2] },
  { name:'Comets',  color:'#22d3ee', ranks:[2,3,1,1,1] },
  { name:'Bolts',   color:'#f59e0b', ranks:[3,2,3,2,4] },
  { name:'Sharks',  color:'#34d399', ranks:[4,4,4,5,3] },
  { name:'Ravens',  color:'#f472b6', ranks:[5,5,5,4,5] }
];
var ns = 'http://www.w3.org/2000/svg';
var svg = document.getElementById('bpSvg');
var W = 340, H = 200, L = 30, R = 56, T = 16, B = 16, N = ROUNDS.length, RANKS = TEAMS.length;

function x(i) { return L + i / (N - 1) * (W - L - R); }
function y(rank) { return T + (rank - 1) / (RANKS - 1) * (H - T - B); }

function draw() {
  svg.innerHTML = '';
  ROUNDS.forEach(function (r, i) {
    var t = document.createElementNS(ns, 'text'); t.setAttribute('class', 'bp-col'); t.setAttribute('x', x(i)); t.setAttribute('y', H); t.textContent = r; svg.appendChild(t);
  });
  for (var rk = 1; rk <= RANKS; rk++) {
    var rl = document.createElementNS(ns, 'text'); rl.setAttribute('class', 'bp-rank'); rl.setAttribute('x', L - 8); rl.setAttribute('y', y(rk) + 3); rl.textContent = '#' + rk; svg.appendChild(rl);
  }
  TEAMS.forEach(function (team) {
    if (team.off) return;
    var d = team.ranks.map(function (rank, i) { return (i ? 'L' : 'M') + x(i) + ' ' + y(rank); }).join(' ');
    var path = document.createElementNS(ns, 'path');
    path.setAttribute('class', 'bp-line'); path.setAttribute('d', d); path.setAttribute('stroke', team.color);
    path.dataset.team = team.name;
    path.addEventListener('mouseenter', function () { highlight(team.name); });
    path.addEventListener('mouseleave', clear);
    svg.appendChild(path);
    team.ranks.forEach(function (rank, i) {
      var c = document.createElementNS(ns, 'circle');
      c.setAttribute('class', 'bp-node'); c.setAttribute('cx', x(i)); c.setAttribute('cy', y(rank)); c.setAttribute('r', 4.5); c.setAttribute('fill', team.color);
      svg.appendChild(c);
    });
    // name at the last point
    var last = team.ranks[N - 1];
    var nm = document.createElementNS(ns, 'text'); nm.setAttribute('class', 'bp-name'); nm.setAttribute('x', x(N - 1) + 8); nm.setAttribute('y', y(last)); nm.setAttribute('fill', team.color); nm.textContent = team.name;
    svg.appendChild(nm);
  });
}

function highlight(name) { svg.querySelectorAll('.bp-line').forEach(function (p) { p.classList.toggle('bp-dim', p.dataset.team !== name); p.style.strokeWidth = p.dataset.team === name ? '4.5' : ''; }); }
function clear() { svg.querySelectorAll('.bp-line').forEach(function (p) { p.classList.remove('bp-dim'); p.style.strokeWidth = ''; }); }

function legend() {
  document.getElementById('bpLegend').innerHTML = TEAMS.map(function (t, i) { return '<span class="bp-leg' + (t.off ? ' is-off' : '') + '" data-i="' + i + '"><span style="background:' + t.color + '"></span>' + t.name + '</span>'; }).join('');
  document.querySelectorAll('.bp-leg').forEach(function (el) {
    el.addEventListener('click', function () { var i = +el.getAttribute('data-i'); TEAMS[i].off = !TEAMS[i].off; draw(); legend(); });
    el.addEventListener('mouseenter', function () { if (!TEAMS[+el.getAttribute('data-i')].off) highlight(TEAMS[+el.getAttribute('data-i')].name); });
    el.addEventListener('mouseleave', clear);
  });
}

draw(); legend();