この記事のコード解説 ― SVGの図・対数グラフ・計算機の作り方

// 図の中身を「データ」として先に書いておく
const osi = [
  { n: 7, name: 'アプリケーション層', ex: 'HTTP・DNS・SMTP' },
  { n: 4, name: 'トランスポート層', ex: 'TCP・UDP（ポート番号）' },
  { n: 3, name: 'ネットワーク層', ex: 'IP（IPアドレス）・ルータ' },
  // …
];
const ROW = 46; // 1段の高さ（px）

<svg viewBox="0 0 640 340" role="img" aria-labelledby="fig1t">
  <title id="fig1t">OSI参照モデル7層とTCP/IP4層の対応図</title>
  {osi.map((l, i) => (
    <g transform={`translate(0,${i * ROW})`}>
      <rect x="0" y="2" width="420" height={ROW - 6} rx="6" />
      <text x="14" y="27">{`L${l.n}`}</text>
      <text x="50" y="27">{l.name}</text>
    </g>
  ))}
</svg>

// 1GB（= 8,000Mビット）を送る秒数
const sec = 8000 / l.mbps;          // 800, 80, 8, 0.8

// そのまま長さにすると 800 と 0.8 で1000倍ちがい、短い棒が見えない
// log10 で「桁」をそろえてから長さにする
const w = 40 + (Math.log10(sec) + 0.2) / (Math.log10(800) + 0.2) * 380;

function calc() {
  const mb   = Number($('cSize').value) * Number($('cUnit').value);
  const mbps = Number($('cSpeed').value) * Number($('cSpUnit').value);
  const eff  = Number($('cEff').value) / 100;

  // 入力が空や0のときは計算しない（0で割るのを防ぐ）
  if (!(mb > 0 && mbps > 0)) { out.textContent = '—'; return; }

  const sec = (mb * 8) / (mbps * eff); // 公式そのまま
  out.textContent = `${sec} 秒`;
}
// 'input' は値が変わるたびに起きるイベント。打つそばから答えが変わる
['cSize', 'cUnit', 'cSpeed', 'cSpUnit', 'cEff']
  .forEach(id => $(id).addEventListener('input', calc));

// 図の文字どうしが重なっていないかを調べる（ブラウザのコンソールで実行）
const ts = [...svg.querySelectorAll('text')].map(t => {
  const b = t.getBBox();      // 文字が占める四角形
  const m = t.getCTM();       // translate でずらした量
  return { x1: b.x + m.e, x2: b.x + b.width + m.e,
           y1: b.y + m.f, y2: b.y + b.height + m.f };
});
// 2つの四角形が重なる条件：左右も上下も、たがいに相手の範囲に入っている
const hit = (a, b) => a.x1 < b.x2 && b.x1 < a.x2 && a.y1 < b.y2 && b.y1 < a.y2;