⇄
Human bridge
Top tenth for betweenness and a z-score of +2 or more.
4 countries
Examples:
Corridor Control · Style guide
Every part, drawn once
What the post is made of
This page loads corridor.css, the same file the post loads, and shows each component under each skin, palette and table style. Nothing here is a copy of a style: if the guide and the post ever disagree, the stylesheet changed and one of them did not.
Orange is always people. Blue is always access.
Migration (people) Flights (access)
19902024
.status-line · 236 countries · 8,792 migration links · 4,331 flight links
1
Tokens
(custom properties on.corridor)Twelve values. The two network colours carry meaning and only the palette dropdown moves them; a skin may touch the rest and nothing else.
--people--people-soft--access--access-soft--dtu--deep--ink--ink-soft--ink-mute--ground--card--lineType ramp · system sans on the clean skin, tabular numerals everywhere
54/800hero headline
30/700section heading
22/800panel title
13.5/400body
12.5/400notices, status, fineprint
11.5/800 capslabels, chips, eyebrows
11.5/400axis ticks and chart notes
Surface · --radius on cards, 10px inside them, 999px on pills, one two-layer shadow
pill
Rhythm · section gap 26px, card padding 20px 22px, grid gap 18px, shell 1180px with a 24px gutter
2
Components
(every class the post uses)Each is the real markup with the real class. The labels above them name the class so you can find it in the stylesheet.
.w4-term · .w4-pop · .w3-formula · .tex
A A pattern where the share of items with a value of at least k falls off as a fixed power of k, so most items have small values and a few have huge ones. It draws a straight line on log–log axes, but other patterns can look nearly straight too. tail has an exponent \htmlClass{x-alpha-tail}{\alpha}.
\htmlClass{x-p-part}{P_i} = 1 - \htmlClass{x-sum-communities}{\sum_{c}} \htmlClass{x-share-squared}{\left( \frac{\htmlClass{x-s-ic}{s_{ic}}}{\htmlClass{x-s-i}{s_i}} \right)^{2}}
.step-head · .num · .year-tag
3
Popular ≠ bridge
(analysis year: 2020).w4-opener · .w4-opener-num · .w3-scope · .w3-opener-pick
Popular ≠ bridge
The finding, in one line under the title.
(analysis year: 2020)
.card.w4-card · .w3-stack · .rx-drawers.rx-foot · .rx-drawer · .rx-drawer-body · .rx-wide
A card under its opener, with blocks stacked one above the other.
The drawers sit in a row at its foot.
Method
What a drawer holds, shown when it opens.
Table
A drawer holding a chart or a table takes the card's full width.
.chip · .eg-chip · .eg-all
Destination hub
.toggle · .axis-modes · select
.qa-controls · .qa-slider · .qa-slider-now
2024
.type-strip · .type-slice
13 9 Leaf 53 Mixed 141
.chart-table · .chart-table-scroll · .num
Table: what sits under every chart
| Partners | In-degree | Flight degree |
|---|---|---|
| 1 | 0 | 1 |
| 2 | 3 | 3 |
| 3–4 | 12 | 5 |
.echart · .tall · .wide
Where section 10 mounts an ECharts view.
.tall is 640px, .wide 460px; shown short here..notice · .ico
💡 Denmark, in one line. It ranks #63 of 236 by foreign-born residents and #32 as a bridge.
.facts · .fact
- People
- 11,279,561
- Distance
- 1,899 km
- Routes
- 164
.dk-head · .metric · .explains · .dk-name
8
Let's analyse Denmark
🇩🇰Denmark
DNK · 2020
DNK · 2020
Incoming695,816
Betweenness#32
z-score−1.23
.type · .badge · .eg
.type-drawer · .drawer-head · .drawer-table · .drawer-note · .drawer-close
.qa · .qa-cue · .qa-body · .qa-item · .qa-answer
Here you can learn more
1 · A question
And its answer, at 13.5px in a 68ch column.
.chart-tip · .legend · .axis-note
South Sudan13 origins · #160betweenness #17
In-degreeOut-degreeFlight degree
Betweenness vs origins · click any point
.edgebar · two selects, an arrow, a chip
.map-wrap · .map-tools · the twin map's frame
.grid-side · a wide plot beside a narrow panel
The layout section 3 uses
.grid-pair · two linked visuals side by side
Sections 4 and 5 share a row
A. .plot with .chart
A canvas the scripts draw into
B. table.ego
Migrant stock, 2020
| Origin | People |
|---|---|
| Poland | 41,988 |
| Germany | 37,231 |
| Syria | 35,386 |
C. .stage-wrap · .stage-hint · .stage-reset
The globe's frame, empty
Drag to spin. Click a country.
.grid5
three across
for the
role
cards
3
Skins
(?skin=)The same specimen under each skin. Each block is its own .corridor[data-skin] scope, so the stylesheet does the work and the guide copies nothing.
Clean
3
Popular ≠ bridge
South Sudan is 55th on arrivals and 17th on brokerage.
Mixed6.10
Editorial
3
Popular ≠ bridge
South Sudan is 55th on arrivals and 17th on brokerage.
Mixed6.10
Terminal
3
Popular ≠ bridge
South Sudan is 55th on arrivals and 17th on brokerage.
Mixed6.10
Poster
3
Popular ≠ bridge
South Sudan is 55th on arrivals and 17th on brokerage.
Mixed6.10
4
Palettes
(?palette=)Only --people, --access and their soft tints move. A chip, a key and the two swatches show it.
Signal
chip
Ember
chip
Iris
chip
Okabe-Ito
chip
Slate
chip
5
Tables
(?tables=)The same three rows under each table style. The markup never changes.
Rules
| Poland | 41,988 |
| Germany | 37,231 |
| Syria | 35,386 |
Zebra
| Poland | 41,988 |
| Germany | 37,231 |
| Syria | 35,386 |
Cards
| Poland | 41,988 |
| Germany | 37,231 |
| Syria | 35,386 |
Compact
| Poland | 41,988 |
| Germany | 37,231 |
| Syria | 35,386 |