Creative Gravity of America — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/examples/creative-contours

Creative Gravity of America

A non-topographic surface: metro-level creative industries are sampled into contours, then stacked into an isometric United States. Height is not elevation; it is the selected cultural-production signal.

Composite

active signal

New York

strongest hub

contour shelves

27 x 16

sample grid

Vertical scale1.15x

Combined screen, sound, game, design, and research signal.New York84 creative gravitystrongest anchor

low1528415467peak

What the surface encodes

Each metro contributes a weighted radial field for the selected cultural sector. The page normalizes the sampled field, cuts it into contour shelves, and renders every in-country sample as a raised isometric prism. The contour lines are generated from the same sampled scalar field with marching squares.

Why a custom GeoFrame

The data enters as ordinary lon/lat records and a US outline. The layout owns the contour grid and isometric projection, while GeoCustomChart still supplies hover observation, tooltips, accessible rows, SSR, and the surrounding frame behavior.

JSX

import { GeoCustomChart, geoAreaHitTarget } from "semiotic/geo" function isometricContourLayout(ctx) { return { nodes: sampledCells.map((cell) => geoAreaHitTarget({ pathData: diamondPath(cell.x, cell.y, tileWidth, tileHeight), centroid: [cell.x, cell.y], bounds: cell.bounds, datum: cell, group: ctx.config.signal, })), overlays: <StackedContourMap cells={sampledCells} />, } } <GeoCustomChart areas={[contiguousUsOutline]} points={metroSignals} projection="albersUsa" layout={isometricContourLayout} layoutConfig={{ signal: "games", columns: 42, rows: 25, verticalScale: 1.2, thresholds: [15, 28, 41, 54, 67, 80], }} enableHover tooltip={(cell) => <strong>{cell.scoreLabel}</strong>} accessibleTable />