Paul Blickle

I'd suggest to replace the first line with the following to ensure that the canvas gets cleared properly when the window is resized (i.e., width decreases):

  const dpr = window.devicePixelRatio || 1;
  const context = this?.width === width * dpr ? this.getContext("2d") : DOM.context2d(width, height, dpr);

Fabian Iwand

Thanks, Fabian. Your help is appreciated. I implemented the suggested change.

This fails to load for me. You may want to try https://cdn.jsdelivr.net/npm/world-atlas@1/world/50m.json as a source instead.

Seems to work for me. Feel free to fork the notebook and try the suggested source.

I did, wouldn't have suggested it otherwise :)

I'm getting quite long delays before unpkg.com resolves the version identifier to the matching semantic version and redirects, maybe because it fetches the package first internally. You may want to try to wait a few minutes, then load the notebook in a private window (i.e. with no cached resources). The alternative would be to specify the version as "1.1.4".

Fair enough. I experienced the delays now, too. Your suggestion is now implemented for both sources. Thank you for the input. (Any idea on how to increase performance? This is quite the CPU hog …)

You could try to simplify the path geometry via turf (see e.g. https://observablehq.com/@caseymm/simplify-geojson). I imagine that could reduce the number of calculations that d3.geoPath has to make quite a bit.

Thanks for the advice. Turf is now simplifying 'land'. Alas, no performance improvement.

If you can spare the time I encourage you to create a topic on https://talk.observablehq.com/ - maybe someone else has some insight to share, especially with respect to the d3 components.