3D Globe widget

A rotating 3D globe with visitors plotted as country shading or city points. The most visually striking of the four widgets. Built for hero sections, READMEs, and "wow" moments.

3D globe rotating with city dots

When to use it

OSS project READMEs: free on .edu, GitHub Pages, and GitLab Pages with the Hobby tier
Landing-page hero sections: pair with a tagline, lets visitors play with it
Conference closers: a 30-second auto-rotating globe is a great curtain
Internal dashboards: rotate it on a wall display for a fancy "where users are" view

Quick install

Two variants, depending on whether you want city points or country heatmap:

<!-- Globe with city POINTS (dots) -->
<script
  defer
  src="https://statable.com/js/gp.js"
  data-hash="YOUR_PUBLIC_HASH">
</script>

<!-- Globe with country HEATMAP (shading) -->
<script
  defer
  src="https://statable.com/js/gw.js"
  data-hash="YOUR_PUBLIC_HASH">
</script>

Don't copy the snippet from this page. The real one lives in Site settings → Widget → Globe, with data-hash already filled in and a one-click copy button. Both variants share the same options below.

Options

Attribute	Values	Default	Notes
`data-hash`	your public hash	(required)
`data-theme`	`light` / `dark` / `auto`	`auto`	Affects globe surface, ocean, and lighting
`data-period`	`1d` / `7d` / `30d` / `90d`	`7d`	Time window for the data
`data-primary-color`	hex	Statable blue	Country shading or dot colour
`data-rotation-speed`	`off` / `slow` / `medium` / `fast`	`slow`	Auto-rotation speed
`data-tilt-preset`	`default` / `realistic`	`default`	Globe axis tilt; `realistic` matches Earth's 23.5°
`data-shadow-preset`	`none` / `soft` / `strong`	`soft`	Drop shadow under the globe
`data-graticule`	`true` / `false`	`true`	Show meridian / parallel grid lines
`data-lighting`	`true` / `false`	`true`	Subtle lighting effect for depth
`data-width`	`auto` or pixels	`auto`
`data-height`	`auto` or pixels	`auto`	A square ratio works best

The widget refreshes every 10 seconds.

Examples

Default points variant on a hero section:

<section class="hero">
  <h1>Your traffic, visualised.</h1>
  <script defer
    src="https://statable.com/js/gp.js"
    data-hash="03D3Cfb9eA"
    data-width="600"
    data-height="600">
  </script>
</section>

Country heatmap, fast rotation, no shadow, dark theme:

<script defer
  src="https://statable.com/js/gw.js"
  data-hash="03D3Cfb9eA"
  data-theme="dark"
  data-rotation-speed="fast"
  data-shadow-preset="none"
  data-primary-color="#10B981">
</script>

Stationary realistic globe with a graticule:

<script defer
  src="https://statable.com/js/gp.js"
  data-hash="03D3Cfb9eA"
  data-rotation-speed="off"
  data-tilt-preset="realistic"
  data-graticule="true"
  data-shadow-preset="strong">
</script>

README badge, minimum-effort embed for a GitHub project page:

<p align="center">
  <script defer
    src="https://statable.com/js/gp.js"
    data-hash="03D3Cfb9eA"
    data-width="320"
    data-height="320">
  </script>
</p>

Interactions

Drag to rotate manually. Auto-rotation pauses while dragging.
Scroll/pinch to zoom. Limited so the globe doesn't disappear off-axis.
Hover a city dot or country for a tooltip with name and visitor count.

Notes

WebGL required. Modern browsers (Chrome, Safari, Firefox, Edge) qualify. Mobile browsers work too. If WebGL is unavailable, the widget shows a small fallback message. Use the flat map widget for guaranteed support.
Performance: ~15 KB gzipped plus globe geometry (cached after first load). Renders smoothly at 60 fps on modern devices. On older mobiles, set data-rotation-speed="off" to save battery.
Lighting: if the globe looks flat, set data-lighting="true" (default). It adds a subtle highlight on the visible hemisphere.
Two bundles, one widget. Some users want city-level granularity (gp.js, points), others prefer aggregated country shading (gw.js, heatmap). Pick whichever reads better.