<bmx-graph-overview>

<div style="display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap">
  <bmx-graph id="ex-ov-graph" color-by="community" labels="none" node-size="6" label="A network of fifteen hundred nodes" style="flex: 1 1 26rem; --bmx-graph-height: 22rem"></bmx-graph>
  <bmx-graph-overview for="ex-ov-graph" style="--bmx-graph-overview-width: 14rem; --bmx-graph-overview-height: 10rem"></bmx-graph-overview>
</div>
<p class="note">Zoom into the graph with the buttons or Ctrl and the wheel; the box in the overview shows where you are. Drag the box, or click anywhere in the overview, to move there. Tab to the overview and use the arrow keys.</p>

<script type="module">
  await customElements.whenDefined('bmx-graph');
  let seed = 11;
  const rand = () => ((seed = (seed * 16807) % 2147483647) - 1) / 2147483646;
  const nodes = Array.from({ length: 1500 }, (_, i) => ({ id: `n${i}`, label: `Node ${i}` }));
  const links = [];
  for (let i = 1; i < nodes.length; i++) {
    const group = Math.floor(i / 150) * 150;
    const j = i === group ? i - 1 : group + Math.floor(rand() * (i - group));
    links.push({ source: `n${i}`, target: `n${j}` });
    if (rand() < 0.04) links.push({ source: `n${i}`, target: `n${Math.floor(rand() * i)}` });
  }
  const graph = document.getElementById('ex-ov-graph');
  graph.nodes = nodes;
  graph.links = links;
</script>