Global data visualization kit

Global Data Visualization Kit

A production-ready interactive WebGL globe for product pages, dashboards, launch reports, and CMS embeds. Build JSON scenes with markers, routes, regions, heatmaps, pulse rings, columns, hover callouts, and optional terrain relief.

Buy kit Open live demo

13Data layers

17Surface presets

React + HTMLInstall paths

JSON-first scenes

Markers, arcs, regions, columns, heatmaps, callouts, camera settings, and responsive behavior live in reusable scene config.

SEO-visible product story

The product copy, use cases, layer catalog, comparison table, FAQ, and structured data are rendered as HTML before WebGL starts.

Progressive WebGL

The interactive globe is a visual proof layer. It stays client-only, lazy-mounted on visibility, and separate from the indexable content.

13 data layers

Visualize global data, not just a spinning Earth.

GlobeKit is a layer catalog for real business data: movement, density, regions, KPI magnitude, events, networks, and readable callouts.

Markers

Plot offices, customers, data centers, airports, sensors, or events with labels and hover tooltips.

Animated arcs

Connect origin and destination pairs for route networks, traffic flows, payments, launches, or handoffs.

Flow trails

Render ordered movement paths with animated surface-following trails for live corridors and network traffic.

Moving objects

Show aircraft, vessels, satellites, or tracked assets as live objects over the globe.

Regions

Fill countries or territories for choropleth-style coverage, risk, adoption, or availability stories.

Hex bins

Aggregate dense geographic rows into H3-style cells for analytical density maps.

Network graph

Connect nodes and edges directly on the globe for infrastructure, security, and relationship maps.

Metric columns

Raise city or region values as vertical bars for demand, usage, incidents, capacity, or revenue.

Stacked columns

Compare multiple metrics at one location without leaving the global scene.

Location charts

Add compact charts at key cities for richer KPI comparisons.

Heatmap

Display soft weighted activity for demand, health signals, risk concentration, or incident density.

Pulse rings

Animate event bursts, threat spikes, alerts, launches, or live activity hotspots.

Annotation callouts

Attach readable labels, values, and explanations to the data that matters most.

Surface styles

One kit, many visual languages.

The same scene contract can look credible, editorial, technical, radar-like, holographic, or analytical without rebuilding the data story.

Realistic

Credible Earth texture with atmosphere and optional terrain relief for premium launch moments.

Blueprint

Fast technical default for product pages, docs, and app-like dashboards.

Orbital signal

Rings, glow, and calm route energy for SaaS, network, and launch storytelling.

Hologram

Transparent depth, fresnel glow, and scan energy for developer and operations products.

Radar pulse

Monitoring-focused scanlines for aviation, security, logistics, and command-center scenes.

Heatmap

A density-forward surface for demand, risk, climate, and health dashboards.

Editorial dots

A quieter report-style surface for articles, investor updates, and public data explainers.

Signal constellation

Hotspot and signal language for cyber threat maps and data center network visualization.

Buyer use cases

Use cases that prove range.

The demo scenarios are deliberately different, so buyers can see how the same runtime adapts to operations, logistics, cyber, risk, climate, infrastructure, and launch reporting.

SaaS operations

Show customers, regions, partner hubs, revenue health, and product adoption with markers, columns, and callouts.

Logistics route visualization

Build an animated route map for logistics with ports, lanes, corridors, dwell-time annotations, and flow trails.

Aviation radar

Visualize airports, active routes, delayed arrivals, and radar-style monitoring without a generic stock-map feel.

Cyber threat map

Combine pulse rings, regional risk, traffic arcs, and a signal constellation surface for a cyber threat map globe.

Global risk dashboard

Turn exposure scores, country risk, market incidents, and executive summaries into a global risk dashboard component.

Climate and health dashboard

Use heatmaps, regions, and annotations for climate signals, public health, air quality, or environmental data stories.

Data center network

Show edge POPs, regions, latency, capacity, and global traffic as a data center network visualization.

Launch reports

Use a 3D world map with markers to explain market launches, coverage, adoption, and campaign momentum.

Surface and use-case lab

Inspect the runtime without loading every proof block as a canvas.

The page keeps the sales content server-rendered, then lazy-loads one deeper WebGL lab when the section enters the viewport.

Switch scenarios, surfaces, route arcs, metric layers, regions, pulse events, flow trails, heatmaps, and rotation. The surrounding SEO copy remains plain HTML.

This is the practical pattern for a Next.js globe component: server-render the product meaning, then mount the expensive WebGL proof only when it can be seen.

Configurator workflow

From CSV to globe visualization.

Buyers should not need to understand Three.js before seeing value. The fast path is template, data, mapping, preview, export.

1Choose a buyer template
2Paste CSV or JSON rows
3Confirm field mapping
4Preview layers and surface
5Export HTML, JSON, React, or WordPress
6Embed the scene on the page

scene.config.ts

const scene = {
  assets: { baseUrl: "/heiner-globe-kit/assets/textures/" },
  surface: { preset: "signalConstellation" },
  markers: officeLocations,
  arcs: routeNetwork,
  dataLayers: {
    regions: countryRisk,
    heatmap: demandPoints,
    hexBins: incidentRows,
    flowTrails: trafficPaths,
    pulses: alertEvents,
    columns: marketDemand,
    annotations: regionCallouts
  },
  responsive: {
    height: "720px",
    mobileHeight: "420px",
    mobileQuality: "auto"
  }
};

Integration

React, Next.js, HTML, WordPress, and Webflow.

Use the framework-free browser runtime for CMS and static pages, or mount the same WebGL core through the React wrapper in app stacks.

plain-html.html

<div
  data-heiner-globe
  data-config="/globes/network.json">
</div>

<script type="module">
  import { initHeinerGlobes } from "/dist/heiner-globe.esm.js";
  initHeinerGlobes();
</script>

next-globe.tsx

const HeinerGlobe = dynamic(
  () => import("@/globe/HeinerGlobe"),
  { ssr: false }
);

export function ProductGlobe() {
  return <HeinerGlobe config={scene} deferUntilVisible />;
}

cms-embed.html

<!-- WordPress, Webflow, Framer, static sites -->
<div data-heiner-globe data-config="/assets/globe-scene.json"></div>

<!-- SEO copy stays outside the canvas as normal HTML. -->

Performance and SEO

The globe proves the product. HTML carries the meaning.

Google Search guidance is simple in practice: keep meaningful content in HTML, and lazy-load non-critical visual work when it enters the viewport.

Server-rendered narrative

The headline, layer catalog, use cases, workflow, comparison, FAQ, and CTAs are readable without waiting for WebGL.

Lazy WebGL mount

The globe panels use dynamic import with SSR disabled and IntersectionObserver visibility checks.

Quality profiles

Use auto or performance texture quality for dense pages, mobile screens, CMS embeds, and below-the-fold scenes.

Lifecycle controls

Pause offscreen scenes, clean up on route changes, and keep one live lab instead of stacking many canvases.

Buyer clarity

The kit replaces one-off globe work with reusable data scenes.

A good product page should make the buying decision obvious: use a productized runtime when you need reusable global data scenes, not a one-off visual.

OptionBuild typeDataInteraction

Static map imageOne-off assetBaked into pixelsNo interaction

Simple globe snippetVisual demoMarkers and routes onlyLimited reuse

Custom Three.js buildBespoke engineeringAnything you build yourselfHigh cost

GlobeKitProductized runtimeJSON, CSV/JSON, runtime rowsBuilt-in layers and selection

FAQ

Common questions before using the kit.

Short, indexable answers for technical buyers and search snippets.

Is the globe content indexable for SEO?+

The WebGL canvas is not the SEO surface. The page keeps the main product story, layer catalog, use cases, comparison table, FAQ answers, metadata, and structured data in server-rendered HTML.

Can I use it without React?+

Yes. GlobeKit has a framework-independent browser runtime for a website globe embed, plus an optional React globe component for React, Vite, and Next.js apps.

Does it work in WordPress, Webflow, or Framer?+

Yes. The plain HTML and ESM runtime path is designed for WordPress globe embed blocks, Webflow globe embed snippets, Framer embeds, static pages, and agency client sites.

What data can drive the scene?+

Locations, route endpoints, ordered paths, moving objects, country values, metric columns, heatmap points, hex bins, pulses, network nodes, annotations, and responsive camera settings can be driven from JSON.

Can I import CSV data?+

The buyer workflow is built around CSV to globe visualization: paste rows, infer field mapping, choose a target layer, preview the result, then export the scene config.

How do I keep a product page fast?+

Keep the SEO content server-rendered, lazy-mount WebGL only when visible, use preview textures for page embeds, choose automatic or performance quality on smaller devices, and pause offscreen scenes.

What is not included?+

GlobeKit is a frontend visualization runtime. It does not include a backend, database, authentication system, or a generic WebSocket/SSE adapter in the launch path.

Who is this for?+

It is for developers, agencies, SaaS teams, product marketers, dashboard builders, and editorial teams that need polished global data visualization without rebuilding Three.js plumbing from scratch.

Checkout ready

Add premium global data visualization to your next product page.

Use it for product heroes, SaaS dashboards, launch reports, agency builds, CMS embeds, and technical articles that need global data to feel concrete.

Buy kit Live demo