Recipes — Geographic Grid Maps — 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/recipes/geographic-grid-maps

Geographic Grid Maps

Recipe

semiotic/georeact

import { GeoCustomChart, geographicDotGridLayout, geographicGridLayout } from "semiotic/geo"

Wraps: GeoCustomChart

“Gridified geography” describes two useful but very different moves. A dot field samples a projected land silhouette onto a dense lattice, retaining one dot for every cell center inside the mask. A tile cartogram gives each named place one equal cell. Semiotic now provides a reusable layout for each approach.

Choose the claim: a dot field preserves the projected land silhouette but tiny islands may disappear at coarse densities. A tile cartogram preserves named units but intentionally loses exact boundary, distance, and land area.

USA as a geographic dot field

This is the sampled-mask technique: Semiotic fits the U.S. geometry with an Albers USA projection, lays a screen-space grid across it, inverts every cell center, and emits a dot only when that location is inside the land polygon.

Sampling the U.S. land mask…

The world as a geographic dot field

Increasing columns raises the sampling density whileradiusRatio controls how much of each cell the dot occupies. The geometry remains a regular Equal Earth lattice rather than a random point cloud. This is the map-sampling family popularized in lightweight dotted-globe treatments such asCOBE, rendered here as a projection-aware Semiotic scene.

Sampling the world land mask…

JSX

import { GeoCustomChart, geographicDotGridLayout, resolveReferenceGeography, } from "semiotic/geo" const land = await resolveReferenceGeography("world-110m") <GeoCustomChart areas={land} projection="equalEarth" layout={geographicDotGridLayout} layoutConfig={{ columns: 104, radiusRatio: 0.23, shape: "circle", featureFilter: feature => String(feature.id) !== "010", fillAccessor: d => d.latitude > 0 ? "#85ede1" : "#3bb9c5", }} accessibleTable={false} description="World land sampled onto a regular projected lattice." />

Equal-place cartograms

The original recipes remain useful when the task is to give each state or country one mark rather than to rasterize its land.

USA as gridified circles

Fifty circles shift attention from land area to state identity. The authored table keeps a recognizable west-to-east / north-to-south silhouette; Census region supplies color.

Each state receives one equal mark. Position preserves broad geography and color identifies Census region.

USA as a square cartogram

Changing only shape produces the familiar tile-grid cartogram. The same IDs, labels, palette, tooltip, and accessibility projection carry across representations.

Every state occupies the same square area. The authored grid preserves broad west-to-east and north-to-south position.

JSX

import { GeoCustomChart, geographicGridLayout } from "semiotic/geo" <GeoCustomChart points={states} xAccessor="gridColumn" yAccessor="gridRow" layout={geographicGridLayout} layoutConfig={{ source: "points", rowAccessor: "gridRow", columnAccessor: "gridColumn", idAccessor: "abbr", labelAccessor: "abbr", categoryAccessor: "region", shape: "circle", // or "square" / "hexagon" }} colorScheme={regionColors} enableHover tooltip />

The world as gridified circles

This version starts with Natural Earth polygons instead of an authored table. Semiotic calculates each projected centroid, allocates a collision-free cell, and leaves deliberate whitespace so the result still reads as a world rather than a filled rectangle.

Gridifying country centroids…

JSX

import { GeoCustomChart, geographicGridLayout, resolveReferenceGeography, } from "semiotic/geo" const countries = await resolveReferenceGeography("world-110m") <GeoCustomChart areas={countries} projection="equalEarth" layout={geographicGridLayout} layoutConfig={{ source: "areas", columns: 24, occupancy: 0.66, shape: "circle", labelAccessor: d => d.name.slice(0, 3).toUpperCase(), }} enableHover tooltip />

Layout contract

Task	Configuration
Projected land dot field	`geographicDotGridLayout` + polygon `areas`
Dot-field resolution	Set `columns` or a pixel `cellSize`
Dot-to-cell proportion	`radiusRatio` from `0.05` to `0.5`
Known tile cartogram	`rowAccessor` + `columnAccessor`
Automatic point grid	`source="points"` + longitude/latitude accessors
Automatic area grid	`source="areas"`; projected centroids are gridified
Equal geographic units	Omit `sizeAccessor`
Value cartogram	Set `sizeAccessor`; mark area follows the value through square-root scaling
Visual grammar	`shape="circle" \| "square" \| "hexagon"`

Data note

The U.S. table combines an authored schematic placement with fixed2020 Census resident population. The world examples use bundled Natural Earth geometry either as a land mask for lattice sampling or for country identity and centroid placement.

The Equal Places Atlas— a high-touch exploration of sampled land and equal-place grids
Distance Cartogram— distort distance rather than area
Custom layouts— author reusable scene geometry

Source Code

Abbreviated for readability — data arrays and steps are truncated. See the full runnable source in docs/src/examples/recipes/.

JSX

1 import {
2  GeoCustomChart,
3  geographicDotGridLayout,
4  resolveReferenceGeography,
5 } from "semiotic/geo"
6 
7 const land = await resolveReferenceGeography("world-110m")
8 
9 <GeoCustomChart
10  areas={land}
11  projection="equalEarth"
12  layout={geographicDotGridLayout}
13  layoutConfig={{
14  columns: 104,
15  radiusRatio: 0.23,
16  shape: "circle",
17  featureFilter: feature => String(feature.id) !== "010",
18  fillAccessor: d => d.latitude > 0 ? "#85ede1" : "#3bb9c5",
19  }}
20  accessibleTable={false}
21  description="World land sampled onto a regular projected lattice."
22 />
23 
24 import { GeoCustomChart, geographicGridLayout } from "semiotic/geo"
25 
26 <GeoCustomChart
27  points={states}
28  xAccessor="gridColumn"
29  yAccessor="gridRow"
30  layout={geographicGridLayout}
31  layoutConfig={{
32  source: "points",
33  rowAccessor: "gridRow",
34  columnAccessor: "gridColumn",
35  idAccessor: "abbr",
36  labelAccessor: "abbr",
37  categoryAccessor: "region",
38  shape: "circle", // or "square" / "hexagon"
39  }}
40  colorScheme={regionColors}
41  enableHover
42  tooltip
43 />
44 
45 import {
46  GeoCustomChart,
47  geographicGridLayout,
48  resolveReferenceGeography,
49 } from "semiotic/geo"
50 
51 const countries = await resolveReferenceGeography("world-110m")
52 
53 <GeoCustomChart
54  areas={countries}
55  projection="equalEarth"
56  layout={geographicGridLayout}
57  layoutConfig={{
58  source: "areas",
59  columns: 24,
60  occupancy: 0.66,
61  shape: "circle",
62  labelAccessor: d => d.name.slice(0, 3).toUpperCase(),
63  }}
64  enableHover
65  tooltip
66 />