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

<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.

Two display modes, set with data-display-mode:

countries (default): country shading by visit share
cities: a dot at each visitor location

<!-- Globe with city points (dots) -->
<script
  defer
  src="https://statable.com/js/gw.js"
  data-hash="YOUR_PUBLIC_HASH"
  data-display-mode="cities">
</script>

Options

Attribute	Values	Default	Notes
`data-hash`	your public hash	(required)
`data-display-mode`	`countries` / `cities`	`countries`	Country shading or city dots
`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	`#0093FF`	Country shading or dot colour
`data-rotation-speed`	`off` / `slow` / `medium` / `fast`	`medium`	Auto-rotation speed
`data-tilt-preset`	`default` / `realistic`	`default`	Globe axis tilt; `realistic` matches Earth's 23.5°
`data-shadow-preset`	`none` / `soft` / `strong`	`strong`	Drop shadow under the globe. Always off in a dark theme
`data-graticule`	`true` / `false`	`true`	Show meridian / parallel grid lines
`data-lighting`	`true` / `false`	`true`	Subtle lighting effect for depth
`data-width`	pixels	`auto`
`data-height`	pixels	`auto`

The globe loads its data once, when the page loads. Reload the page for fresh numbers.

Examples

City points on a hero section:

<section class="hero">
  <h1>Your traffic, visualised.</h1>
  <script defer
    src="https://statable.com/js/gw.js"
    data-hash="03D3Cfb9eA"
    data-display-mode="cities"
    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/gw.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/gw.js"
    data-hash="03D3Cfb9eA"
    data-display-mode="cities"
    data-width="320"
    data-height="320">
  </script>
</p>

Interactions

Drag to rotate manually. Auto-rotation pauses while dragging and resumes when you let go.
Hover a city dot or country for a tooltip with name and visitor count.

Sizing

Leave data-width and data-height off and the globe fills the width of the block it sits in. That suits the typical embed, where the container has no fixed height.

Set both and you get exactly that box, with one catch: the globe is always a circle, so the smaller value wins. data-width="600" data-height="300" renders a 300 × 300 globe.

Inside a container that already has a fixed height (a sized flex or grid cell), the globe fits itself inside instead of driving the width.

Notes

WebGL when available, SVG otherwise. The globe draws through WebGL on modern browsers (Chrome, Safari, Firefox, Edge, and mobile). Without WebGL it falls back to an SVG renderer automatically, with no message and no action needed from you. The fallback is slower on old mobiles but shows the same globe.
Performance: about 9 KB brotli over the wire (30 KB unpacked), plus globe geometry cached after first load. Rotation is capped at ~30 fps to keep CPU and battery use low, and pauses entirely while the globe is scrolled out of view. On older mobiles, set data-rotation-speed="off" to save more.
Lighting: if the globe looks flat, set data-lighting="true" (default). It adds a subtle highlight on the visible hemisphere.
Legacy gp.js. Older embeds point at a separate gp.js bundle for city points. It still works, but it doesn't get new features. Use gw.js with data-display-mode="cities" instead.