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

The default size is 300 × 300 px. Without an explicit data-width / data-height, the Globe fits a 300 × 300 viewBox into the available space. Inside a much larger flex/grid cell you'll see a small globe with empty padding.

To make the Globe fill the container, set data-width and data-height to match the container's dimensions in the embed snippet copied from the dashboard.

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.