Skip to content

3D Globe — troubleshooting

This page covers issues unique to the 3D Globe (gw.js). Most widget failures are environment-related — see common troubleshooting first.

The Globe is the most dependency-heavy widget. It loads three external resources before it can render:

  • D3.js from https://d3js.org/d3.v6.min.js
  • TopoJSON from https://unpkg.com/topojson@3
  • World atlas (27 KB JSON) from https://statable.com/maps/world-110m.json

If any of these is blocked by an extension, CSP, or corporate firewall, the Globe fails. Walk through common troubleshooting first — most "Globe doesn't load" reports are blocked dependencies, not a Globe-specific bug.

"Failed to load script: https://d3js.org/..."

Widget initialization error: Error: Failed to load script: https://d3js.org/d3.v6.min.js
Widget initialization error: Error: Failed to load script: https://unpkg.com/topojson@3

The Globe couldn't fetch one of the libraries. Almost always a network-policy issue:

  • A privacy extension blocked the public CDN.
  • A corporate firewall doesn't allowlist d3js.org / unpkg.com.
  • A CSP script-src directive doesn't include those hosts — see the shared CSP table.

If your host page already loads D3 itself, make sure it's D3 v6 or newer — see Host page has a different version of D3 or TopoJSON.

World atlas (world-110m.json) fetch fails

Widget initialization error: TypeError: NetworkError when attempting to fetch resource.

…with Network tab showing GET https://statable.com/maps/world-110m.json as the failing request.

D3 and TopoJSON loaded successfully but the JSON fetch was blocked. Causes:

  • CSP connect-src doesn't include https://statable.com.
  • A privacy extension blocks subrequests to statable.com even when the script bundle itself loaded.

"API response is not valid or does not contain a 'points' array"

This error fires only when data-display-mode="cities" is set. The default countries mode doesn't validate a points array and never throws this error.

Widget initialization error: Error: API response is not valid or does not contain a 'points' array.

Possible reasons (in order of likelihood):

  • The site hasn't received enough traffic for the API to return city-level data yet. New sites typically need a few hundred page-views before city aggregation activates. Switch to the default countries mode while you accumulate traffic.
  • A custom data-api proxy returns the wrong response shape.

If you're not setting data-display-mode at all, this error is impossible — the Globe is in countries mode by default.

Globe renders but stays in one position

If the Globe appears but never rotates and dragging does nothing, check:

  • Is data-rotation-speed="off" on the snippet? If so, auto-rotation is disabled by design — drag still works.
  • Is the container being constantly re-mounted by a parent SPA component? The widget cleans up its rotation timer on cleanup; if the cleanup fires immediately after init, rotation stops.

There's no console error for either case.

Globe is much smaller than its container

Without data-width / data-height, the Globe fills the width of the block it sits in. If it comes out small, the container has a fixed height: the Globe then fits itself inside that height instead of driving the width, and a wide, short box leaves empty space on both sides.

Two ways out:

  • Let the container's height be driven by content (drop the fixed height), and the Globe takes the full width.
  • Set data-width and data-height explicitly. Remember the Globe is always a circle, so the smaller of the two wins: data-width="600" data-height="300" gives a 300 × 300 globe.

See Sizing for the full behavior.

Ready to take control of your web analytics? Try Statable free for 30 days — no credit card required, full feature access, GDPR-compliant by default. Start your free trial or view a live demo.