Dot Density Map

About this style

A dot density map places one dot for a fixed number of things, often people, at the places where they are found, so crowding shows as dense tone and empty land stays empty. Unlike a choropleth, which shades a whole region by its average, it keeps the pattern inside each region visible. Census offices and atlas makers have long used dot maps, and in 2013 a University of Virginia project drew every person in the 2010 United States census as a single dot. Newsrooms and planners now use the form to show where people, homes or businesses actually are.

Make a 10-second dot density map: 38,400 dots, one per person, spread evenly over a fictional island nation, then flow to where people really live, clustering into towns and a bright capital.

<inputs>
If I don't give you something, use the default and don't ask.
- Country: Skerra, an island nation (fictional).
- Title: "Where Skerra lives"
- Subtitle: "One dot for each of its 38,400 people. Census 2026."
- Places and people: Holmvik (the capital) 14,200 · Saltby 6,300 · Skarn 3,900 · villages and farms 14,000 (38,400 in all).
- Callout: "Nearly two in three people live in three towns." (24,400 of 38,400)
- Length: 10 seconds.
</inputs>

<direction>
- Palette, a night atlas: sea #0A0F1C, land #131B2B, coastline #3B4A66 at 1.2px with two water-lines offset 7 and 14px seaward at 35% and 18%, highland #18223A with a few hachure ticks, roads #26324B at 1.5px, a ferry route dashed in #2E3B57. Dots #FFE8C4. Title #F3EDE0, secondary #AEB7C9. One accent, coral #FF7A59, for the capital's ring and the callout rule.
- The island: a hand-authored coarse outline roughened by four rounds of seeded midpoint displacement and smoothed once, about 1,060 × 800px, centered at (1250, 580): a long west coast cut by three fjords, a rounded east coast, a hooked peninsula in the south-west and two small islets offshore. Its north-west coast stays clear of the title block. A highland spine runs north-east to south-west. Three roads link the towns; the ferry dashes from Saltby to the larger islet.
- Towns: Holmvik at the head of the middle fjord (1050, 540); Saltby on the east coast (1640, 670); Skarn on the south-west peninsula (860, 850). Twenty villages are seeded along the roads and coasts.
- People: generate the 38,400 home positions once at load by rejection sampling against a population density field, with exact counts: Holmvik 14,200 from a dense core (a Gaussian, σ 18px) inside a wider spread (σ 46px) that follows the fjord's shore; Saltby 6,300 (σ 14 and 36px); Skarn 3,900 (σ 12 and 30px); the other 14,000 over the villages (small Gaussians, σ 6–12px) and farmland (low seeded fBm along valleys and coasts). No dot lands in the sea or on the highland spine.
- Start positions: each dot also gets an even start position, sampled uniformly over the land, so the first state shows the country as if everyone lived the same distance apart.
- Dots: 1.4px radius, round and crisp, 55% opacity with additive blending, so density builds tone: a farm reads as a scatter, a village as a soft knot, the capital as an almost solid bright mass. Draw them in one WebGL points pass (round, anti-aliased sprites made in the fragment shader).
- Flow: each dot moves from its start to its home on a gently curved path (the straight line plus a sideways bow of up to 40px × sin(πs), its side seeded), on easeInOutCubic over 1.4 s, starting at a seeded time within a 1.2 s window. Nothing else moves while they travel.
- Type: title in "Spectral" 600, 72px, top-left at (120, 112); subtitle Spectral 300 italic, 28px, secondary, beneath, at most 620px wide. Town names in "Spectral SC" 500, 24px, tracked 0.12em, with populations under them in "Fragment Mono" 400, 20px, secondary, each on a 1px leader to the side away from the densest dots. A counter at bottom-left (120, 900): "People placed" in Spectral 500, 22px, over the number in Fragment Mono 400, 56px. Beside it, a key: one dot and "= 1 person", 22px.
- Map furniture: a north arrow and a 0–10 km scale bar at bottom-right in #5B6884, labels 20px.
- Motion is quiet and exact: entrances rise 12px as they fade in over 0.6 s on cubic-bezier(0.22, 1, 0.36, 1); leaders draw out from their town over 0.3 s; nothing bounces.
- Premium: tiny crisp dots whose overlap does the shading, empty highlands that stay empty, a capital that becomes a near-solid mass, numbers that add to 38,400. Cheap: big glowing blobs, a heat-map gradient, dots on a grid.
Banned: choropleth fills, heat-map gradients, glow or bloom halos, dots larger than 2px, dots in the sea, dots on a grid, real coastlines or place names, map libraries, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.2s: the sea; the coastline draws around the island clockwise from its north tip as the water-lines ripple out; the highland, roads and ferry route fade in; the title and subtitle rise in.
- 1.2–2.8s: the dots appear at their even start positions in a seeded order, each fading up over 0.2 s, and the counter climbs to 38,400: a uniform haze over all the land.
- 2.8–3.2s: stillness.
- 3.2–5.8s: the flow: dots drain off the highlands and empty farmland and stream along curving paths into the towns; the capital thickens into a bright mass along its fjord; Saltby and Skarn form; villages knot along the roads.
- 5.8–7.0s: the town names and populations attach, Holmvik first, 0.25 s apart; the capital gets a 6px coral ring.
- 7.0–8.0s: the callout rises in above the counter, over a 2px coral rule.
- 8.0–10.0s: hold, completely still.
For other lengths, stretch the flow; keep at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas: the map and type on 2D canvases (the map rendered once at load), the dots in one WebGL canvas pass (preserveDrawingBuffer: true, drawn once per seek), every backing store sized from CSS size × devicePixelRatio. No map libraries. Canvas won't fetch fonts itself, so the awaited loads matter.
- Home and start positions are computed once at load from the seeded PRNG; seek(t) evaluates each dot's closed-form path at t and never steps anything.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Log the dot count per place (14,200, 6,300, 3,900 and 14,000) and confirm none sits in the sea. Check the highlands are empty and the capital reads as a near-solid mass at 6 s and in the final frame, every dot stays round and crisp at 1280×720, and labels sit clear of the densest dots and of each other. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Topographic Contour Map

Made by us

A calm cartographic animation: smooth brown contour lines draw in from valley to summit, the terrain slowly morphs as a…

Cartographic Route Map

Made by us

A print-style travel map that draws itself: water-lined coast, ink mountains and serif labels, then a red route line ca…

Ride-Hailing App

Made by us

A night map seen through a phone that works like a lens, the city dimmed around it: a coral route draws along procedura…

Globe Flight Paths

Made by us

A print-style dotted globe of a fictional world turns on warm paper while vermilion and cobalt arcs fly a new airline's…