chart = { const w = Math.max(200, Math.min(930, width)); const ratio = w / 930; const h = w; const labelTop = html`
`; const labelBottom = html`
`; const popup = html`
   ${labelTop}
   ${labelBottom}
`;

  let timer = 0; // when did we last touch the globe

  projection.fitExtent([[10, 10], [w-10, h-10]], {type:"Sphere"});

  const context = DOM.context2d(w, h);
  const path = d3.geoPath(projection, context);

  function render(land) {
    context.clearRect(0, 0, w, h);
    context.beginPath(),
      path({type: "Sphere"}),
      (context.fillStyle = "#fff"),
      context.fill();
    context.beginPath(),
      path(land),
      (context.fillStyle = "#000"),
      context.fill();
    context.beginPath(),
      path({type: "Sphere"}),
      (context.strokeStyle = "#000"),
      context.stroke();
    context.beginPath(),
      path.pointRadius(ratio < 0.7 ? 4 : 6)(centroids),
      (context.fillStyle = "#8BE4D8"),
      context.fill();
    context.beginPath(),
      path.pointRadius(ratio < 0.7 ? 7.5 : 10)(centroids),
      (context.strokeStyle = "#8BE4D8"),
      context.stroke();

    // context.beginPath();
    // context.fillStyle = "#000"
    // context.fillText(`width: ${w}`, 10, 10)
  }

  const total = d3.sum(visits, d => d[1]);
  const fmt = d3.format(".1%");
  d3.select(context.canvas)
    .on("pointermove", (event) => {
      timer = Date.now();
      const p = d3.pointers(event)[0];
      let distance = 30; // max distance
      let found;
      path.context(null);
      for (const c of centroids.coordinates) {
        const d = Math.hypot(...projection(c).map((k, i) => k - p[i]));
        if (d < distance && path({ type: "Point", coordinates: c })) {
          found = c;
          distance = d;
        }
      }
      path.context(context);
      if (found) {
        const iso3 = found[2];
        const count = visits.get(countryCodes.get(iso3)?.iso2);
        labelTop.textContent = `${count / total < 0.01 ? "≤ 1%" : fmt(count / total)} users`;
        labelBottom.textContent = `are in ${countryCodes.get(iso3)?.name}`;
        popup.style.display = "";
        popup.style.left = `${Math.max(5, Math.min(w - 300, p[0] - 150))}px`;
        popup.style.top = `${-h + p[1] + (p[1] > 200 ? -80 : 10)}px`;
      } else popup.style.display = "none";
    })
    .call(
      drag(projection)
        .on("drag.render", () => (render(land110), (timer = Date.now())))
        .on("end.render", () => render(land110))
    )
    .call(() => render(land110));

  const pause = 1500; // delay after a user navigates away before we resume rotating
  const animate = d3.timer(() => {
    const slept = Date.now() - timer;
    if (slept < pause) return;
    const r = projection.rotate();
    r[0] += 0.067 * Math.atan((slept - pause) / 2000);
    projection.rotate(r);
    render(land110);
  });

  invalidation.then(() => animate.stop());

  // hide the changed bar
  const style = html`