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 (~38 KB compressed 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, built for GDPR. Start your free trial or view a live demo.