43:["$","title",null,{"children":"Day 6: Vintage | Xavier Olive | Observable"}] 4b:T7d4,**Details of the period.** The longitudes along the top count from the meridian of Peking (京師), as on Chinese maps of the time, and those along the bottom from Greenwich. The scale bar runs from right to left in *li* (華里, about 576 m), numbers are written in Chinese numerals, and a vermilion seal reads 輿地全圖, *complete map of the lands*. Foreign concessions are in red: Tsingtao (German), Weihaiwei (British), Kwangchowan (French), Port Arthur (Japanese), Hong Kong and Macao. 東京(法) north of Vietnam is Tonkin, not Tokyo: that was the Chinese name of the time, as in 東京灣, the Gulf of Tonkin. The fine print revealed by zooming names the prefectures (府, 州) and treaty ports of the time, placed so as not to overlap the larger names. English names follow the postal romanisation, in use from 1906 (Peking, Tientsin, Chungking, Kweilin). **Type.** As on Republican maps, the Chinese version is set in Ming type only (Noto Serif TC), in three weights: black and red for the title, bold and red for provinces and regions, regular for towns and waters. Labels sit straight on the colour, without halos, except a faint paper edge for the names that fall on the sea, so that the water lines do not run through them. The English version is set in IM Fell DW Pica, with its italic for waters, and IM Fell French Canon for the title, both digitised from old printed type; a slight ink spread roughens the edges of the letters. **How it was made.** The design started as a first draft made with Claude, redrawn here with D3. The provinces of 1912 are modern Natural Earth units merged (Ningxia into Kansu, Hainan into Kwangtung, Inner Mongolia into Mongolia…), coloured so that neighbours differ; the water lines are offsets of the coast computed in the projection, an equidistant conic with standard parallels at 25° and 47°. Mountains, deserts, railways and the Great Wall are drawn by hand from lists of coordinates. Data: [Natural Earth](https://www.naturalearthdata.com/).4c:T1100c,// Hybrid version of vintageMap: the painted layers (paper, sea, watercolour, hachures, stippling, // aging) on canvases, text and line work in SVG between them. vintageMapHybrid(data, lang) // lang: "zh" (traditional characters, written right to left) or "en" (English postal // romanisation). // The sheet can be zoomed (drag, ⌘/Ctrl + wheel or // pinch, double click): from 2× on, a layer of smaller towns in fine type appears. // ink: how far (in points) the ink spread may push the edges of the English letters (0 = clean). function vintageMap(data, lang = "zh", {ink = 0.3} = {}) { // A list of SVG-like drawing operations, replayed on a canvas at any resolution const drawList = () => { const ops = []; return {ops, append() { const a = {}; ops.push(a); const o = {attr(k, v) { a[k] = v; return o; }}; return o; }}; }; const ZH = lang === "zh"; const L = (en, zh) => (ZH ? zh : en); // ── page: sizes in points (1/72 in) ───────────────────────────────────────── const [X0, X1, Y0, Y1] = data.frame; // projected metres, equidistant conic const R = 6371000; const WM = 14.6 * 72, HM = WM * (Y1 - Y0) / (X1 - X0); const ML = 0.78 * 72, MR = 0.78 * 72, MB = 1.0 * 72, MT = 0.9 * 72; const W = WM + ML + MR, H = HM + MB + MT; const s = WM / (X1 - X0); // points per metre const km = (v) => v * 1e3 * s; // kilometres to points const projection = d3.geoConicEquidistant().parallels([25, 47]).rotate([-105, 0]).center([0, 35]) .scale(R * s).translate([ML - X0 * s, MT + Y1 * s]) .clipExtent([[ML - 40, MT - 40], [ML + WM + 40, MT + HM + 40]]); const path = d3.geoPath(projection); const P = (lon, lat) => projection([lon, lat]); const fx = (f) => ML + f * WM, fy = (f) => MT + (1 - f) * HM; // axes fractions // ── palette ─────────────────────────────────────────────────────────────── // one palette for both versions (the warmer one, first designed for the Chinese map) const C = {paper: "#eedfb6", ink: "#2b1c12", sea: "#bdd2d1", wink: "#2c5670", red: "#b3302a", brown: "#5e3f25", wall: "#8a2a1c", prov: ["#e8988a", "#eec664", "#a2c27c", "#8bbdbd", "#bc9bc8", "#e5a15e"], fill: 0.40, band: 0.62}; const EMPIRE = {russia: "#a8bf86", brit: "#dd9893", hk: "#dd9893", fr: "#9cafd6", japan: "#e6a273", korea: "#e6a273", formosa: "#e6a273", macao: "#c49ec5", phil: "#b3a1cd", nepal: "#dcc982", bhutan: "#dcc982", siam: "#dcc982", afg: "#dcc982"}; // ── fonts, by role ──────────────────────────────────────────────────────── // Chinese: Ming type throughout, in three weights, as on Republican maps (title and provinces // heavy and red); English: IM Fell (DW Pica for the text, French Canon for the title), digitised // from old printed type, with a slight ink spread (the `ink` option, in points). const CJK = "'Noto Serif TC', serif", LATIN = "'IM Fell DW Pica', serif"; const FONT = ZH ? {title: [CJK, "normal", 900], reg: [CJK], it: [CJK], bold: [CJK, "normal", 700], head: [CJK, "normal", 700], latin: [LATIN]} : {title: ["'IM Fell French Canon', serif"], reg: [LATIN], it: [LATIN, "italic"], bold: [LATIN, "normal", 600], head: [LATIN], latin: [LATIN]}; // ── text helpers ────────────────────────────────────────────────────────── const swap = {"(": ")", ")": "(", "（": "）", "）": "（"}; const rtl = (t) => [...t].reverse().map((c) => swap[c] ?? c).join(""); const T = (t) => (ZH ? rtl(t) : t); const spaced = (t, n = 1) => { const g = ZH ? "　" : " ".repeat(n); // SVG collapses runs of ordinary spaces return t.split("\n").map((line) => line.split(" ").map((w) => [...w].join(g)).join(g.repeat(ZH ? 2 : 3))).join("\n"); }; const zhn = (n) => { // Chinese numerals: 115 -> 百一十五, 1500 -> 一千五百 const d = "〇一二三四五六七八九"; if (n === 0) return "〇"; let out = "", zero = false; for (const [val, unit] of [[1000, "千"], [100, "百"], [10, "十"], [1, ""]]) { const q = Math.floor(n / val); n %= val; if (q) { if (zero && out) out += "〇"; if (!(q === 1 && (unit === "十" || unit === "百") && !out)) out += d[q]; out += unit; zero = false; } else if (out) zero = true; } return out; }; // ── random numbers and geometry helpers ─────────────────────────────────── const rng = (seed) => { let a = seed >>> 0; return () => { a = (a + 0x6d2b79f5) >>> 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; }; const uniform = (r, a, b) => a + (b - a) * r(); const chaikin = (c, n = 3, closed = false) => { for (let k = 0; k < n; k++) { const c2 = closed ? [...c, c[0]] : c, out = []; for (let i = 0; i < c2.length - 1; i++) { const [ax, ay] = c2[i], [bx, by] = c2[i + 1]; out.push([0.75 * ax + 0.25 * bx, 0.75 * ay + 0.25 * by], [0.25 * ax + 0.75 * bx, 0.25 * ay + 0.75 * by]); } c = closed ? out : [c[0], ...out, c[c.length - 1]]; } return c; }; const projLine = (pts, step = 0.2) => { // densify in degrees, then project const out = []; for (let i = 0; i < pts.length - 1; i++) { const [a, b] = [pts[i], pts[i + 1]], n = Math.max(1, Math.ceil(Math.hypot(b[0] - a[0], b[1] - a[1]) / step)); for (let j = 0; j < n; j++) out.push(P(a[0] + (b[0] - a[0]) * j / n, a[1] + (b[1] - a[1]) * j / n)); } out.push(P(...pts[pts.length - 1])); return out; }; const measure = (c) => { const d = [0]; for (let i = 1; i < c.length; i++) d.push(d[i - 1] + Math.hypot(c[i][0] - c[i - 1][0], c[i][1] - c[i - 1][1])); return d; }; const at = (c, d, t) => { // point at distance t along c (d = cumulative lengths) t = Math.max(0, Math.min(d[d.length - 1], t)); let i = d3.bisectRight(d, t) - 1; i = Math.max(0, Math.min(c.length - 2, i)); const f = (t - d[i]) / ((d[i + 1] - d[i]) || 1); return [c[i][0] + f * (c[i + 1][0] - c[i][0]), c[i][1] + f * (c[i + 1][1] - c[i][1])]; }; const line = d3.line(); // ── SVG skeleton ────────────────────────────────────────────────────────── const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).attr("width", W).attr("style", "max-width: 100%; height: auto; display: block;") .attr("font-family", FONT.reg[0]).attr("lang", ZH ? "zh-Hant" : lang); const uid = `v${Math.random().toString(36).slice(2, 8)}`, id = (k) => `${uid}-${k}`; const defs = svg.append("defs"); defs.append("clipPath").attr("id", id("frame")).append("rect").attr("x", ML).attr("y", MT).attr("width", WM).attr("height", HM); // paper: a light mottling and a fine grain, from fractal noise const mottle = defs.append("filter").attr("id", id("mottle")).attr("x", 0).attr("y", 0).attr("width", 1).attr("height", 1); mottle.append("feTurbulence").attr("type", "fractalNoise").attr("baseFrequency", 0.012).attr("numOctaves", 4).attr("seed", 11); mottle.append("feColorMatrix").attr("values", "0 0 0 0 0.42 0 0 0 0 0.29 0 0 0 0 0.15 0.55 0 0 0 -0.22"); const grain = defs.append("filter").attr("id", id("grain")).attr("x", 0).attr("y", 0).attr("width", 1).attr("height", 1); grain.append("feTurbulence").attr("type", "fractalNoise").attr("baseFrequency", 0.9).attr("numOctaves", 1).attr("seed", 3); grain.append("feColorMatrix").attr("values", "0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0 0.12 0.35 0 0 0 -0.12"); const map = svg.append("g").attr("clip-path", `url(#${id("frame")})`); const under = drawList(); // painted on the canvas under the SVG const framePath = `M${ML},${MT}h${WM}v${HM}h${-WM}Z`; // ── sea and water lines ─────────────────────────────────────────────────── under.append("path").attr("d", framePath + path(data.land)).attr("fill-rule", "evenodd").attr("fill", C.sea).attr("opacity", 0.65); data.water.forEach((w, i) => under.append("path").attr("d", path(w.geometry)).attr("fill", "none").attr("stroke", C.wink) .attr("stroke-width", Math.max(0.22, 0.62 - i * 0.065)).attr("opacity", Math.max(0.18, 0.78 - i * 0.09))); // ── watercolour: a fill slightly off register, and a darker band along the border ─ const shift = [3500 * s, 2500 * s]; for (const f of data.provinces) { const col = C.prov[f.properties.colour], d = path(f); under.append("path").attr("d", d).attr("fill", col).attr("opacity", C.fill).attr("transform", `translate(${shift})`); const cid = id(`p-${f.properties.key}`); defs.append("clipPath").attr("id", cid).append("path").attr("d", d); for (const [lw, a] of [[9, C.band * 0.55], [3.2, C.band * 0.8]]) under.append("path").attr("d", d).attr("fill", "none").attr("stroke", col).attr("stroke-width", lw).attr("opacity", a) .attr("stroke-linejoin", "round").attr("clip-path", `url(#${cid})`); } for (const f of data.groups) { const col = EMPIRE[f.properties.group]; if (!col) continue; const d = path(f), cid = id(`g-${f.properties.group}`); defs.append("clipPath").attr("id", cid).append("path").attr("d", d); under.append("path").attr("d", d).attr("fill", "none").attr("stroke", col).attr("stroke-width", 7).attr("opacity", 0.5) .attr("stroke-linejoin", "round").attr("clip-path", `url(#${cid})`); } // ── relief: "caterpillar" hachures along the main ranges ────────────────── const MOUNTAINS = [ [[[74.5, 35.4], [77, 33.2], [79.5, 31.0], [81.5, 30.0], [84, 28.6], [86.9, 27.95], [89, 27.8], [91.5, 27.9], [94, 28.6], [95.5, 29.3]], 70], [[[76.5, 36.6], [80, 36.1], [84, 36.0], [88, 36.2], [92, 35.8], [95, 35.5], [98, 35.0], [101, 34.4]], 62], [[[74.5, 40.4], [77, 41.4], [80, 42.2], [83, 43.0], [86, 43.3], [89, 43.4], [92, 43.2], [95, 43.1]], 60], [[[85.5, 49.6], [88, 48.8], [90, 48.0], [92, 47.0], [95, 46.0], [98, 45.3], [101, 44.8]], 48], [[[94, 39.3], [96.5, 38.8], [99, 38.3], [101.5, 37.6], [103, 37.0]], 45], [[[104.5, 34.0], [106.5, 33.8], [108.5, 33.9], [110.5, 33.7], [112, 33.4]], 38], [[[119.6, 53.2], [121, 50.5], [120.5, 48.5], [119.5, 46.5], [118.5, 44.5], [117.5, 43.0]], 42], [[[126.5, 50.3], [127.8, 49.0], [129.2, 48.0]], 32], [[[125.8, 41.3], [127.5, 41.9], [128.5, 42.4], [130, 43.6]], 34], [[[99.0, 32.6], [99.2, 30.0], [99.3, 28.0], [99.6, 25.8]], 30], [[[101.6, 32.2], [101.8, 30.3], [102.1, 28.4]], 28], [[[109.8, 25.6], [112, 25.3], [114, 25.0], [116, 25.3]], 30], [[[81, 31.2], [85, 30.6], [90, 30.4], [93, 30.6]], 32], [[[90.5, 33.2], [93, 32.9], [95.5, 32.4]], 30], [[[108, 41.2], [110, 41.0], [112, 41.2], [114, 41.5]], 28], [[[115.8, 26.2], [117.4, 27.5], [118.6, 28.4]], 26], [[[73.6, 38.8], [74.8, 37.6], [75.2, 36.6]], 34], [[[97.5, 52.0], [100, 51.6], [102.5, 51.4]], 30], ]; const hachures = (pts, width, seed, step = 6.5, lw = 0.48) => { const c = chaikin(pts.map((p) => P(...p)), 3), d = measure(c), Ln = d[d.length - 1], r = rng(seed); const n = Math.max(4, Math.floor(Ln / km(step))); let inner = "", outer = ""; for (let i = 0; i <= n; i++) { const t = Ln * i / n, p = at(c, d, t), a = at(c, d, t - km(3)), b = at(c, d, t + km(3)); let tx = b[0] - a[0], ty = b[1] - a[1]; const nr = Math.hypot(tx, ty) || 1; tx /= nr; ty /= nr; const nx = ty, ny = -tx; // normal pointing "left" (north for a west-east range), screen coordinates const taper = 0.3 + 0.7 * Math.max(0, Math.sin(Math.PI * t / Ln)) ** 0.5; for (const [side, k] of [[1, 1.0], [-1, 0.8]]) { const l = km(width) * taper * uniform(r, 0.45, 1.0) * k, j = uniform(r, -0.3, 0.3); const x0 = p[0] + side * nx * km(1.2), y0 = p[1] + side * ny * km(1.2); const xm = p[0] + side * nx * l * 0.45 + tx * j * l * 0.15, ym = p[1] + side * ny * l * 0.45 + ty * j * l * 0.15; const x1 = p[0] + side * nx * l + tx * j * l * 0.35, y1 = p[1] + side * ny * l + ty * j * l * 0.35; inner += `M${x0},${y0}L${xm},${ym}`; outer += `M${xm},${ym}L${x1},${y1}`; } } under.append("path").attr("d", inner).attr("stroke", C.brown).attr("stroke-width", lw * 1.5).attr("opacity", 0.75).attr("stroke-linecap", "round"); under.append("path").attr("d", outer).attr("stroke", C.brown).attr("stroke-width", lw * 0.65).attr("opacity", 0.6).attr("stroke-linecap", "round"); }; MOUNTAINS.forEach(([pts, w], i) => hachures(pts, w * 0.72, i + 3)); // ── deserts: stippling, thinner towards the edges ───────────────────────── const stipple = (poly, seed, perKm2 = 1 / 110) => { const c = chaikin(poly.map((p) => P(...p)), 3, true), r = rng(seed); const area = Math.abs(d3.polygonArea(c)) / (s * s) / 1e6, n = Math.floor(area * perKm2 * 2.2); const [x0, x1] = d3.extent(c, (p) => p[0]), [y0, y1] = d3.extent(c, (p) => p[1]); const edge = (x, y) => { // distance to the polygon boundary, in points let m = Infinity; for (let i = 0; i < c.length; i++) { const [ax, ay] = c[i], [bx, by] = c[(i + 1) % c.length], dx = bx - ax, dy = by - ay; const t = Math.max(0, Math.min(1, ((x - ax) * dx + (y - ay) * dy) / (dx * dx + dy * dy || 1))); m = Math.min(m, Math.hypot(x - ax - t * dx, y - ay - t * dy)); } return m; }; let dots = ""; for (let i = 0; i < n; i++) { const x = uniform(r, x0, x1), y = uniform(r, y0, y1), keep = r(), size = uniform(r, 0.15, 1.1); if (!d3.polygonContains(c, [x, y])) continue; if (keep >= Math.min(1, Math.max(0.05, edge(x, y) / km(70))) ** 0.8) continue; const rr = Math.sqrt(size / Math.PI); // the size is an area in points² dots += `M${x - rr},${y}a${rr},${rr} 0 1,0 ${2 * rr},0a${rr},${rr} 0 1,0 ${-2 * rr},0`; } under.append("path").attr("d", dots).attr("fill", C.brown).attr("opacity", 0.55); }; stipple([[95.5, 42.6], [99, 41.4], [103, 41.2], [107, 41.7], [110.5, 42.6], [113.5, 43.6], [115.5, 45.0], [113, 45.9], [109, 45.4], [104, 45.0], [99.5, 44.6], [96.2, 43.9]], 1); stipple([[78.3, 38.6], [79.8, 40.1], [83, 40.5], [86, 40.4], [88.4, 39.5], [87.8, 38.5], [85, 37.6], [82, 37.4], [79.4, 37.7]], 2); stipple([[107.3, 38.6], [108.5, 39.6], [110, 39.8], [110.3, 39.0], [109.0, 38.3]], 3); // ── lakes and rivers ────────────────────────────────────────────────────── for (const f of data.lakes) map.append("path").attr("d", path(f)).attr("fill", C.sea).attr("stroke", C.wink).attr("stroke-width", 0.55).attr("opacity", 0.95); for (const f of data.rivers) { const sr = f.properties.scalerank ?? 8; map.append("path").attr("d", path(f)).attr("fill", "none").attr("stroke", C.wink).attr("opacity", 0.9).attr("stroke-linecap", "round") .attr("stroke-width", sr <= 2 ? 1.25 : sr <= 4 ? 0.95 : sr <= 6 ? 0.65 : 0.45); } // ── graticule, boundaries, coast ────────────────────────────────────────── let grat = ""; for (let lon = 55; lon <= 160; lon += 5) grat += line(projLine([[lon, 0], [lon, 70]], 0.5)); for (let lat = 5; lat <= 65; lat += 5) grat += line(projLine([[45, lat], [175, lat]], 0.5)); map.append("path").attr("d", grat).attr("fill", "none").attr("stroke", C.ink).attr("stroke-width", 0.32).attr("opacity", 0.55); const dashes = (lw, pattern) => pattern.map((v) => v * lw).join(" "); map.append("path").attr("d", path(data.provLines)).attr("fill", "none").attr("stroke", C.ink).attr("stroke-width", 0.6).attr("opacity", 0.85) .attr("stroke-dasharray", dashes(0.6, [4.5, 1.6, 1.0, 1.6])); map.append("path").attr("d", path(data.intl)).attr("fill", "none").attr("stroke", C.ink).attr("stroke-width", 1.05) .attr("stroke-dasharray", dashes(1.05, [5.5, 1.5, 1.2, 1.5, 1.2, 1.5])); map.append("path").attr("d", path(data.land)).attr("fill", "none").attr("stroke", C.ink).attr("stroke-width", 0.4).attr("opacity", 0.85); // fine, so that coastal names stay legible // ── the Great Wall: a line with crenels on its northern side ────────────── { const c = chaikin(projLine([[119.75, 40.0], [119.0, 40.25], [118.0, 40.45], [117.2, 40.65], [116.6, 40.45], [116.0, 40.4], [115.0, 40.7], [114.0, 40.75], [113.3, 40.35], [112.4, 39.95], [111.5, 39.45], [110.6, 38.95], [109.7, 38.3], [108.6, 37.75], [107.6, 37.55], [106.5, 37.8], [105.4, 37.6], [104.0, 37.35], [102.6, 37.9], [101.5, 38.4], [100.4, 38.95], [99.2, 39.4], [98.5, 39.75], [98.22, 39.8]], 0.15), 2); const d = measure(c); let ticks = ""; for (let t = 0; t < d[d.length - 1]; t += km(12)) { const p = at(c, d, t), a = at(c, d, t - km(2)), b = at(c, d, t + km(2)); let tx = b[0] - a[0], ty = b[1] - a[1]; const nr = Math.hypot(tx, ty) || 1; let nx = ty / nr, ny = -tx / nr; if (ny > 0) { nx = -nx; ny = -ny; } // towards the north (up) ticks += `M${p[0]},${p[1]}l${nx * km(8)},${ny * km(8)}`; } map.append("path").attr("d", line(c)).attr("fill", "none").attr("stroke", C.wall).attr("stroke-width", 1.25).attr("stroke-linecap", "round"); map.append("path").attr("d", ticks).attr("stroke", C.wall).attr("stroke-width", 0.9); } // ── railways about 1912: black and white chequered lines ────────────────── const RAILWAYS = [ [[104.3, 52.3], [104.6, 51.75], [106.0, 51.5], [107.6, 51.83], [110, 51.6], [113.5, 52.03], [115.5, 50.7], [117.4, 49.6], [119.7, 49.2], [122.0, 48.4], [123.9, 47.25], [126.63, 45.75], [128.5, 44.9], [129.6, 44.6], [131.1, 44.4], [131.95, 43.8], [131.9, 43.12]], [[104.3, 52.3], [102.0, 53.2], [99.0, 54.6], [96.5, 55.6]], [[131.95, 43.8], [132.6, 45.4], [133.5, 46.6], [134.5, 47.6], [135.07, 48.48]], [[126.63, 45.75], [125.32, 43.88], [123.43, 41.8], [123.17, 41.27], [122.6, 40.7], [122.0, 39.6], [121.6, 38.92], [121.25, 38.81]], [[116.4, 39.9], [117.2, 39.13], [118.18, 39.63], [119.75, 40.0], [121.13, 41.1], [123.43, 41.8]], [[116.4, 39.9], [115.9, 40.4], [114.88, 40.82]], [[116.4, 39.9], [115.47, 38.87], [114.5, 38.05], [114.35, 36.1], [113.65, 34.75], [114.07, 32.13], [114.10, 30.72]], [[114.5, 38.05], [113.6, 37.9], [112.55, 37.87]], [[114.3, 34.8], [113.65, 34.75], [112.45, 34.62]], [[117.2, 39.13], [116.3, 37.45], [117.0, 36.67], [117.1, 36.2], [117.18, 34.26], [117.37, 32.92], [118.7, 32.1]], [[120.38, 36.07], [119.1, 36.7], [117.0, 36.67]], [[121.47, 31.23], [120.62, 31.3], [120.3, 31.57], [119.95, 31.78], [119.45, 32.2], [118.78, 32.06]], [[121.47, 31.23], [120.75, 30.75], [120.15, 30.27]], [[113.26, 23.13], [114.0, 22.7], [114.17, 22.32]], [[106.68, 20.86], [105.85, 21.03], [104.8, 21.7], [103.97, 22.5], [103.4, 23.4], [103.25, 24.0], [103.0, 24.6], [102.71, 25.04]], [[125.32, 43.88], [126.55, 43.84]], [[124.39, 40.13], [124.2, 41.0], [123.43, 41.8]], [[124.4, 40.1], [125.75, 39.03], [126.6, 38.0], [126.98, 37.57], [127.4, 36.35], [128.6, 35.87], [129.04, 35.1]], [[88.36, 22.57], [87.0, 24.5], [85.1, 25.6], [83.0, 25.32], [80.3, 26.45], [77.2, 28.6], [75.8, 30.9], [74.3, 31.55]], [[88.36, 22.57], [88.5, 24.8], [88.4, 26.7], [88.26, 27.04]], [[96.2, 16.8], [96.1, 19.7], [96.08, 21.97], [96.4, 24.0], [97.4, 25.38]], [[69.2, 41.3], [71.0, 40.6], [72.3, 40.8], [72.8, 40.75]], ]; const rails = RAILWAYS.map((r) => line(chaikin(projLine(r, 0.15), 2))).join(""); map.append("path").attr("d", rails).attr("fill", "none").attr("stroke", C.ink).attr("stroke-width", 2.1); map.append("path").attr("d", rails).attr("fill", "none").attr("stroke", C.paper).attr("stroke-width", 0.95).attr("stroke-dasharray", `${2.4 * 0.95} ${2.4 * 0.95}`); // ── label placement: every label reserves its extent; minor towns give way ─ const placed = []; const hits = (bs) => bs.some((b) => placed.some((o) => b[0] < o[2] && b[2] > o[0] && b[1] < o[3] && b[3] > o[1])); const reserve = (bs) => placed.push(...bs); const measureCtx = document.createElement("canvas").getContext("2d"); const widths = new Map(); const textWidth = (str, role, size) => { const key = `${role}|${size}|${str}`; if (!widths.has(key)) { const [family, style = "normal", weight = 400] = FONT[role] ?? FONT.reg; measureCtx.font = `${style} ${weight} ${size}px ${family}`; widths.set(key, measureCtx.measureText(str).width); } return widths.get(key); }; // the extents of a label, one box per run of characters (spaced letters leave room between them) const extents = (x, y, str, {role = "reg", size = 8, ha = "center", va = "center", rot = 0, ls = 1, margin = 0.6} = {}) => { const lines = str.split("\n"), lh = size * 1.2 * ls, out = []; // glyph extents around the baseline used: central, alphabetic (bottom) or hanging (top) const [up, h] = va === "center" ? [lines.length * lh / 2 + (size * 1.1 - lh) / 2, size * 1.1] : va === "bottom" ? [(lines.length - 1) * lh + size * 0.92, size * 1.12] : [size * 0.05, size * 1.05]; const top = -up; const cos = Math.cos(rot * Math.PI / 180), sin = Math.sin(rot * Math.PI / 180); lines.forEach((line, i) => { const w = textWidth(line, role, size), x0 = ha === "left" ? 0 : ha === "right" ? -w : -w / 2; const y0 = top + i * lh; for (const m of line.matchAll(/\S+/g)) { const a = x0 + textWidth(line.slice(0, m.index), role, size), b = a + textWidth(m[0], role, size); const corners = [[a, y0], [b, y0], [a, y0 + h], [b, y0 + h]].map(([u, v]) => [x + u * cos - v * sin, y + u * sin + v * cos]); out.push([d3.min(corners, (c) => c[0]) - margin, d3.min(corners, (c) => c[1]) - margin, d3.max(corners, (c) => c[0]) + margin, d3.max(corners, (c) => c[1]) + margin]); } }); return out; }; // the cartouche and the legend are drawn later, over the map: nothing should hide under them const [CX0, CY0, CX1, CY1] = [0.763, 0.033, 0.988, 0.378]; const items = [["cap", L("Capital", "首都")], ["chef", L("Provincial capital", "省會")], ["town", L("Town, treaty port", "城鎮及商埠")], ["col", L("Foreign possession", "外國屬地")], ["rail", L("Railway", "鐵路")], ["wall", L("Great Wall", "萬里長城")], ["intl", L("International boundary", "國界")], ["prov", L("Provincial boundary", "省界")], ["mtn", L("Mountains", "山脈")], ["des", L("Desert", "沙漠")]]; // the legend box fits its content: symbol column, gap, longest label, with even margins const rowH = 0.0245, symW = 0.036, pad = 0.013, gap = 0.012, legendSize = ZH ? 8.2 : 7.2; const textW = (t, size) => [...t].length * size * (ZH ? 1.0 : 0.5) / WM; // in axes fractions const legendTitle = L(spaced("REFERENCES"), "圖　例"); const contentW = Math.max(symW + gap + d3.max(items, ([, t]) => textW(t, legendSize)), textW(legendTitle, ZH ? 11 : 7.2)); const [LX0, LY0, LY1] = [0.012, 0.033, 0.330], LX1 = LX0 + 2 * pad + contentW; reserve([[fx(CX0) - 2, fy(CY1) - 2, fx(CX1) + 2, fy(CY0) + 2], [fx(LX0) - 2, fy(LY1) - 2, fx(LX1) + 2, fy(LY0) + 2]]); // ── labels ──────────────────────────────────────────────────────────────── const labels = svg.append("g").attr("clip-path", `url(#${id("frame")})`).style("white-space", "pre"); // ink: the edges of the English letters pushed by a fine noise, as ink spreads unevenly on paper const INK = {freq: 2.2, scale: ink}; const inked = (g) => { if (ZH || !INK.scale) return g; if (!defs.select(`#${id("ink")}`).size()) { const f = defs.append("filter").attr("id", id("ink")).attr("x", "-2%").attr("y", "-2%").attr("width", "104%").attr("height", "104%"); f.append("feTurbulence").attr("type", "fractalNoise").attr("baseFrequency", INK.freq).attr("numOctaves", 2).attr("seed", 7).attr("result", "n"); f.append("feDisplacementMap").attr("in", "SourceGraphic").attr("in2", "n").attr("scale", INK.scale) .attr("xChannelSelector", "R").attr("yChannelSelector", "G"); } return g.attr("filter", `url(#${id("ink")})`); }; inked(labels); const styleText = (t, role, size, color, alpha) => { const [family, style = "normal", weight = 400] = FONT[role] ?? FONT.reg; return t.attr("font-family", family).attr("font-style", style).attr("font-weight", weight).attr("font-size", size) .attr("fill", color).attr("opacity", alpha); }; // halo "light": a faint paper edge for names over the sea, so that the water lines do not cut through the letters const halo = (t, on = true) => on ? t.attr("stroke", C.paper).attr("stroke-width", on === "light" ? 1.8 : 2.4) .attr("stroke-opacity", on === "light" ? 0.6 : 0.8).attr("stroke-linejoin", "round").attr("paint-order", "stroke") : t; const atSea = (bs) => bs.some(([x0, y0, x1, y1]) => [[x0, y0], [x1, y0], [x0, y1], [x1, y1], [(x0 + x1) / 2, (y0 + y1) / 2]] .some((xy) => !d3.geoContains(data.land, projection.invert(xy)))); const anchor = {center: "middle", left: "start", right: "end"}; const baseline = {center: "central", top: "hanging", bottom: "alphabetic"}; const text = (g, x, y, str, {role = "reg", size = 8, color = C.ink, alpha = 1, ha = "center", va = "center", rot = 0, ls = 1, withHalo = false} = {}) => { const lines = str.split("\n"), lh = size * 1.2 * ls; const t = styleText(g.append("text"), role, size, color, alpha).attr("text-anchor", anchor[ha]).attr("dominant-baseline", baseline[va]) .attr("transform", `translate(${x},${y})${rot ? ` rotate(${rot})` : ""}`); const top = va === "center" ? -(lines.length - 1) * lh / 2 : va === "bottom" ? -(lines.length - 1) * lh : 0; lines.forEach((l, i) => t.append("tspan").attr("x", 0).attr("y", top + i * lh).text(l)); return halo(t, withHalo); }; const label = (lon, lat, str, {role = "reg", size = 8, color = C.ink, ha = "center", va = "center", sp = 0, dx = 0, dy = 0, along = null, ls = 1, alpha = 1, withHalo = false, optional = false, whole = false} = {}) => { const [x, y] = P(lon, lat); let t = T(str); if (sp) t = spaced(t, sp); let rot = 0; if (along) { const [a, b] = along.map((p) => P(...p)); rot = Math.atan2(b[1] - a[1], b[0] - a[0]) * 180 / Math.PI; } let bs = extents(x + dx, y - dy, t, {role, size, ha, va, rot, ls}); // whole: one box over the spaced letters, so that no town name slips between them if (whole) bs = [[d3.min(bs, (b) => b[0]), d3.min(bs, (b) => b[1]), d3.max(bs, (b) => b[2]), d3.max(bs, (b) => b[3])]]; if (optional && hits(bs)) return null; // a minor name gives way reserve(bs); return text(labels, x + dx, y - dy, t, {role, size, color, alpha, ha, va, rot, ls, withHalo}); }; const pathText = (str, pts, size, {role = "reg", color = C.ink, slot = 1.25, alpha = 1, withHalo = false} = {}) => { const t = [...T(str)], c = projLine(pts, 0.1), d = measure(c), Ln = d[d.length - 1], st = slot * size; const start = Ln / 2 - st * (t.length - 1) / 2; t.forEach((ch, i) => { if (!ch.trim()) return; const u = start + i * st, p = at(c, d, u), a = at(c, d, u - 4), b = at(c, d, u + 4); const rot = Math.atan2(b[1] - a[1], b[0] - a[0]) * 180 / Math.PI; reserve(extents(p[0], p[1], ch, {role, size, rot})); text(labels, p[0], p[1], ch, {role, size, color, alpha, rot, withHalo}); }); }; const along = (lon, lat, half = 20) => [[lon - half, lat], [lon + half, lat]]; // great regions, in spaced letters following the parallels const REGION_COL = ZH ? C.red : "#5b3b2a"; for (let [lon, lat, size, slot, en, zh, col, a] of [ [106.5, 46.45, 19, 1.55, "MONGOLIA", "蒙古", REGION_COL, 0.82], [88.0, 32.05, 18, 1.6, "TIBET", "西藏", REGION_COL, 0.82], [83.6, 45.55, 11.5, 1.12, "SINKIANG", "新疆", REGION_COL, 0.82], [120.6, 44.25, 10, 1.05, "MANCHURIA", "東三省", REGION_COL, 0.5], [127.0, 51.6, 12, 1.4, "SIBERIA", "西伯利亞", C.ink, 0.6], [88.5, 51.7, 10.5, 1.4, "RUSSIAN EMPIRE", "俄羅斯", C.ink, 0.6], [77.5, 49.6, 10, 1.25, "RUSSIAN TURKESTAN", "俄屬中亞", C.ink, 0.6], ]) { if (ZH) { size *= 1.05; slot = 1.9; } pathText(L(en, zh), along(lon, lat), size, {role: "head", color: col, slot, alpha: a}); } for (const [lon, lat, size, en, zh] of [[80.2, 26.9, 9.5, "BRITISH INDIA", "英屬印度"], [104.4, 17.2, 8.5, "FRENCH\nINDO-CHINA", "法屬印度支那"]]) label(lon, lat, L(en, zh), {role: "head", size: size * (ZH ? 1.15 : 1), sp: 1, alpha: 0.65, ls: 1.3}); // seas and gulfs for (const [lon, lat, size, en, zh] of [[123.7, 35.0, 10, "YELLOW\nSEA", "黃海"], [125.6, 29.3, 9, "EASTERN\nSEA", "東海"], [114.9, 18.3, 10.5, "CHINA SEA", "南海"], [134.6, 40.4, 9, "SEA OF\nJAPAN", "日本海"], [135.6, 30.4, 10, "PACIFIC OCEAN", "太平洋"]]) label(lon, lat, L(en, zh), {role: "it", size: size * (ZH ? 1.2 : 1), sp: 1, color: C.wink, ls: 1.5}); for (const [lon, lat, size, en, zh] of [[120.25, 38.55, 6.5, "Gulf of\nPechili", "渤海"], [107.9, 19.7, 7, "Gulf of\nTonkin", "東京灣"], [91.6, 19.7, 7.5, "Bay of\nBengal", "孟加拉灣"], [120.3, 24.6, 6.5, "Formosa\nStr.", "臺灣海峽"]]) label(lon, lat, L(en, zh), {role: "it", size, color: C.wink, ls: 0.95}); // provinces for (const [lon, lat, en, zh, size] of [ [116.65, 38.2, "CHIHLI", "直隸", 7.4], [118.4, 35.25, "SHANTUNG", "山東", 7.4], [112.1, 36.45, "SHANSI", "山西", 7.4], [113.4, 33.55, "HONAN", "河南", 7.4], [119.6, 33.6, "KIANGSU", "江蘇", 7.0], [116.7, 32.35, "ANHWEI", "安徽", 7.0], [120.0, 29.15, "CHEKIANG", "浙江", 7.0], [115.6, 27.35, "KIANGSI", "江西", 7.4], [117.5, 26.25, "FUKIEN", "福建", 7.0], [113.9, 24.3, "KWANGTUNG", "廣東", 7.4], [108.7, 24.1, "KWANGSI", "廣西", 7.4], [101.0, 23.45, "YUNNAN", "雲南", 8.0], [106.6, 27.25, "KWEICHOW", "貴州", 7.0], [111.6, 27.0, "HUNAN", "湖南", 7.4], [111.9, 31.55, "HUPEH", "湖北", 7.4], [105.0, 31.65, "SZECHWAN", "四川", 8.0], [109.0, 36.8, "SHENSI", "陝西", 7.4], [104.6, 35.05, "KANSU", "甘肅", 7.4], [96.3, 37.0, "KOKONOR", "青海", 8.5], [122.6, 42.65, "FENGTIEN", "奉天", 6.8], [128.7, 42.45, "KIRIN", "吉林", 6.8], [127.6, 48.65, "HEILUNGKIANG", "黑龍江", 6.8], ]) { label(lon, lat, L(en, zh), {role: "head", size: size * (ZH ? 1.25 : 1), sp: 1, color: ZH ? C.red : "#3a271c", alpha: ZH ? 0.85 : 1, whole: true}); } // neighbours for (const [lon, lat, size, en, zh] of [[127.4, 40.4, 8, "KOREA (Jap.)", "朝鮮(日)"], [133.7, 35.2, 8.5, "JAPAN", "日本"], [83.9, 28.35, 6.5, "NEPAL", "尼泊爾"], [90.45, 27.42, 5.8, "BHUTAN", "不丹"], [95.2, 23.6, 7.5, "BURMA\n(Br.)", "緬甸(英)"], [104.2, 22.35, 7, "TONGKING (Fr.)", "東京(法)"], [101.0, 16.4, 7.5, "SIAM", "暹羅"], [76.0, 34.4, 6.5, "KASHMIR", "克什米爾"]]) label(lon, lat, L(en, zh), {size: size * (ZH ? 1.15 : 1), sp: 1, alpha: 0.8}); label(119.4, 16.2, L("PHILIPPINES (U.S.)", "菲律賓(美)"), {size: 7 * (ZH ? 1.15 : 1), alpha: 0.8, ha: "right"}); label(120.55, 21.75, L("FORMOSA (Jap.)", "臺灣(日)"), {size: 7 * (ZH ? 1.15 : 1), alpha: 0.8, ha: "right"}); // cities const symbols = svg.append("g"); const citySymbol = (g, x, y, rank) => { const circle = (r, fill, stroke, w) => g.append("circle").attr("cx", x).attr("cy", y).attr("r", r).attr("fill", fill) .attr("stroke", stroke).attr("stroke-width", w); if (rank === 0) { circle(4.0, C.paper, C.ink, 1.0); circle(2.3, C.red, C.ink, 0.6); } else if (rank === 1) { circle(2.8, C.paper, C.ink, 0.85); circle(0.95, C.ink, "none", 0); } else if (rank === 3) g.append("rect").attr("x", x - 1.7).attr("y", y - 1.7).attr("width", 3.4).attr("height", 3.4) .attr("fill", C.red).attr("stroke", C.ink).attr("stroke-width", 0.5); else circle(1.75, C.paper, C.ink, 0.75); }; const OFF = {r: [1, 0, "left", "center"], l: [-1, 0, "right", "center"], t: [0, 1, "center", "bottom"], b: [0, -1, "center", "top"], tr: [0.7, 0.7, "left", "bottom"], tl: [-0.7, 0.7, "right", "bottom"], br: [0.7, -0.7, "left", "top"], bl: [-0.7, -0.7, "right", "top"]}; // Hankow and Hanyang are displaced slightly from Wuchang, as a map of this scale would: the three // towns of Wuhan are about 5 km apart, less than the size of their symbols. const CITIES = [ [116.40, 39.90, 0, "PEKING", "北京", "l"], [117.20, 39.13, 2, "Tientsin", "天津", "r"], [115.47, 38.87, 1, "Paotingfu", "保定", "l"], [117.00, 36.67, 1, "Tsinan", "濟南", "l"], [121.40, 37.53, 2, "Chefoo", "芝罘", "t"], [120.38, 36.07, 3, "Tsingtao (Ger.)", "青島(德)", "b"], [122.12, 37.50, 3, "Weihaiwei (Br.)", "威海衛(英)", "r"], [121.25, 38.81, 3, "Port Arthur (Jap.)", "旅順(日)", "r"], [122.23, 40.67, 2, "Newchwang", "營口", "l"], [123.43, 41.80, 1, "Mukden", "奉天", "r"], [126.55, 43.84, 1, "Kirin", "吉林", "r"], [126.63, 45.75, 2, "Harbin", "哈爾濱", "r"], [123.97, 47.34, 1, "Tsitsihar", "齊齊哈爾", "l"], [106.92, 47.92, 1, "Urga", "庫倫", "r"], [114.88, 40.82, 2, "Kalgan", "張家口", "t"], [111.65, 40.82, 2, "Kweihwacheng", "歸化", "t"], [112.55, 37.87, 1, "Taiyuan", "太原", "l"], [114.30, 34.80, 1, "Kaifeng", "開封", "r"], [108.94, 34.34, 1, "Sianfu", "西安", "r"], [103.83, 36.06, 1, "Lanchow", "蘭州", "r"], [106.27, 38.47, 2, "Ningsia", "寧夏", "r"], [101.78, 36.62, 2, "Sining", "西寧", "b"], [87.62, 43.83, 1, "Urumchi", "迪化", "r"], [75.99, 39.47, 2, "Kashgar", "喀什噶爾", "r"], [81.30, 43.92, 2, "Kuldja", "伊犁", "r"], [93.50, 42.83, 2, "Hami", "哈密", "r"], [91.13, 29.65, 1, "Lhasa", "拉薩", "r"], [88.88, 29.27, 2, "Shigatse", "日喀則", "l"], [104.07, 30.67, 1, "Chengtu", "成都", "t"], [106.55, 29.56, 2, "Chungking", "重慶", "r"], [101.96, 30.05, 2, "Tatsienlu", "打箭爐", "l"], [102.71, 25.04, 1, "Yunnanfu", "雲南府", "l"], [103.40, 23.37, 2, "Mengtsz", "蒙自", "l"], [98.50, 25.02, 2, "Tengyueh", "騰越", "l"], [106.71, 26.58, 1, "Kweiyang", "貴陽", "r"], [110.29, 25.27, 1, "Kweilin", "桂林", "r"], [108.37, 22.82, 2, "Nanning", "南寧", "b"], [111.28, 23.48, 2, "Wuchow", "梧州", "b"], [109.12, 21.48, 2, "Pakhoi", "北海", "l"], [110.36, 21.20, 3, "Kwangchowan (Fr.)", "廣州灣(法)", "r"], [113.26, 23.13, 1, "Canton", "廣州", "l"], [114.17, 22.30, 3, "Hong Kong (Br.)", "香港(英)", "r"], [113.54, 22.19, 3, "Macao (Port.)", "澳門(葡)", "bl"], [116.68, 23.35, 2, "Swatow", "汕頭", "r"], [118.09, 24.48, 2, "Amoy", "廈門", "r"], [119.30, 26.08, 1, "Foochow", "福州", "r"], [120.67, 28.00, 2, "Wenchow", "溫州", "r"], [121.55, 29.87, 2, "Ningpo", "寧波", "r"], [120.15, 30.27, 1, "Hangchow", "杭州", "l"], [121.47, 31.23, 2, "Shanghai", "上海", "r"], [118.78, 32.06, 1, "Nanking", "南京", "l"], [117.05, 30.52, 1, "Anking", "安慶", "r"], [115.99, 29.70, 2, "Kiukiang", "九江", "b"], [115.86, 28.68, 1, "Nanchang", "南昌", "r"], [114.10, 30.72, 2, "Hankow", "漢口", "tl"], [114.31, 30.55, 1, "Wuchang", "武昌", "r"], [111.29, 30.70, 2, "Ichang", "宜昌", "t"], [112.94, 28.23, 1, "Changsha", "長沙", "r"], [131.90, 43.12, 4, "Vladivostok", "海參崴", "r"], [126.98, 37.57, 4, "Seoul", "京城", "r"], [129.87, 32.75, 4, "Nagasaki", "長崎", "r"], [105.85, 21.03, 4, "Hanoi", "河內", "b"], [88.36, 22.57, 4, "Calcutta", "加爾各答", "r"], [77.20, 28.60, 4, "Delhi", "德里", "r"], [85.32, 27.70, 4, "Katmandu", "加德滿都", "b"], [88.26, 27.04, 4, "Darjeeling", "大吉嶺", "l"], [96.08, 21.97, 4, "Mandalay", "瓦城", "r"], [104.30, 52.30, 4, "Irkutsk", "伊爾庫次克", "l"], [106.45, 50.35, 4, "Kiakhta", "恰克圖", "r"], [127.53, 50.27, 4, "Blagoveshchensk", "海蘭泡", "r"], [135.07, 48.48, 4, "Khabarovsk", "伯力", "r"], [76.90, 43.25, 4, "Vernyi", "維爾內", "t"], ]; const inFrame = ([x, y]) => x > ML && x < ML + WM && y > MT && y < MT + HM; // Capital and provincial capitals always show; then concessions, towns and foreign towns, each trying // its preferred side and then the others, left out when no position is free. const symbolBox = (x, y, rank) => { const r = rank === 0 ? 4.6 : rank === 1 ? 3.4 : 2.3; return [x - r, y - r, x + r, y + r]; }; const priority = [0, 1, 3, 2, 4]; const KEEP = new Set(["Tientsin", "Hankow", "Shanghai", "Harbin"]); // treaty ports always shown const HALO = new Set(["Nanking"]); // inland names that still need the light halo (crossed by the Yangtze and the coast lines) const towns = CITIES.map((c) => ({c, p: P(c[0], c[1])})).filter((t) => inFrame(t.p)) .sort((a, b) => priority.indexOf(a.c[2]) - priority.indexOf(b.c[2]) || KEEP.has(b.c[3]) - KEEP.has(a.c[3])); reserve(towns.filter((t) => t.c[2] <= 1).map((t) => symbolBox(...t.p, t.c[2]))); for (const {c: [lon, lat, rank, en, zh, pos], p: [x, y]} of towns) { const major = rank <= 1 || KEEP.has(en); if (!major && hits([symbolBox(x, y, rank)])) continue; // too close to a larger town or a name const gap = {0: 6.5, 1: 4.6, 2: 3.8, 3: 3.8, 4: 3.6}[rank]; const [role, size] = (ZH ? {0: ["bold", 10.5], 1: ["reg", 8.4], 2: ["reg", 7.0], 3: ["reg", 7.0], 4: ["reg", 6.6]} : {0: ["bold", 9.6], 1: ["reg", 7.5], 2: ["reg", 6.4], 3: ["it", 6.4], 4: ["reg", 6.1]})[rank]; const t = T(L(en, zh)); const options = [pos, ...["r", "l", "t", "b", "tr", "tl", "br", "bl"].filter((o) => o !== pos)].map((o) => { const [sx, sy, ha, va] = OFF[o]; return {ha, va, dx: sx * gap, dy: sy * gap, bs: extents(x + sx * gap, y - sy * gap, t, {role, size, ha, va})}; }); const pick = options.find((o) => !hits(o.bs)) ?? (major ? options[0] : null); if (!pick) continue; if (!major) reserve([symbolBox(x, y, rank)]); citySymbol(symbols, x, y, rank); reserve(pick.bs); text(labels, x + pick.dx, y - pick.dy, t, {role, size, color: rank === 3 ? C.red : C.ink, ha: pick.ha, va: pick.va, alpha: rank === 4 ? 0.85 : 1, withHalo: (atSea(pick.bs) || HALO.has(en)) && "light"}); } // rivers, lakes for (const [lon, lat, size, en, zh, al] of [ [109.2, 30.4, 7.2, "Yangtze Kiang", "揚子江", [[108.3, 30.15], [110.3, 30.6]]], [112.2, 35.25, 7.2, "Hwang Ho (Yellow R.)", "黃河", null], [109.6, 23.25, 6.5, "Si Kiang", "西江", [[109.0, 23.1], [110.5, 23.4]]], [129.4, 49.15, 6.8, "Amur", "黑龍江", [[128.4, 49.8], [130.4, 48.4]]], [128.7, 46.35, 6.3, "Sungari", "松花江", [[127.8, 46.0], [129.6, 46.6]]], [110.6, 32.45, 6.0, "Han", "漢水", [[110.0, 32.8], [111.4, 32.1]]], [84.2, 41.3, 6.3, "Tarim", "塔里木河", null], [93.7, 29.0, 6.3, "Tsangpo", "雅魯藏布", null], [99.75, 22.8, 6.3, "Mekong", "瀾滄江", [[99.95, 21.9], [99.6, 23.7]]], [106.3, 52.55, 6.5, "L. Baikal", "貝加爾湖", null], [100.2, 37.55, 6.0, "Koko Nor", "青海湖", null], [90.6, 40.35, 6.0, "Lob Nor", "羅布泊", null], [76.2, 46.4, 6.5, "L. Balkhash", "巴爾喀什湖", null], [77.4, 41.95, 5.8, "Issyk Kul", "伊塞克湖", null], [90.6, 31.15, 5.8, "Tengri Nor", "騰格里湖", null], ]) label(lon, lat, L(en, zh), {role: "it", size: size * (ZH ? 1.1 : 1), color: C.wink, along: al, ls: 0.95, optional: size < 7}); // all but the Yangtze and the Yellow River give way // mountain ranges, in spaced capitals along a line for (const [en, zh, pts, size] of [ ["HIMALAYA", "喜馬拉雅山", [[75.6, 31.9], [78.2, 29.7], [81.2, 28.4]], 7.5], ["KUEN LUN", "崑崙山", [[80.5, 35.25], [86, 35.3], [91, 35.1]], 7.5], ["TIEN SHAN", "天山", [[78.6, 40.95], [81.5, 41.6], [84.3, 42.2]], 7.0], ["ALTAI", "阿爾泰山", [[91.3, 48.75], [93.5, 47.85], [95.6, 46.95]], 7.0], ["TSINLING", "秦嶺", [[105.4, 33.25], [107.8, 33.2], [110.0, 33.1]], 6.3], ["GREAT KHINGAN", "大興安嶺", [[118.15, 46.4], [118.9, 48.6], [119.3, 50.6]], 6.3], ["NAN LING", "南嶺", [[111.5, 25.95], [113.5, 25.75], [115.5, 25.85]], 6.0], ["NAN SHAN", "祁連山", [[94.8, 39.95], [96.6, 39.45], [98.0, 39.1]], 6.0], ]) pathText(L(en, zh), pts, size * (ZH ? 1.15 : 1), {color: C.brown, slot: ZH ? 1.7 : 1.18, alpha: 0.95}); for (const [lon, lat, size, en, zh, al] of [ [106.0, 43.25, 9, "Gobi or Shamo\nDesert", "大戈壁", null], [83.3, 38.85, 8, "Takla Makan\nDesert", "塔克拉瑪干", null], [101.6, 38.9, 6.3, "Great Wall", "萬里長城", [[100.4, 39.35], [102.6, 38.3]]], ]) label(lon, lat, L(en, zh), {role: "it", size: size * (ZH ? 1.1 : 1), color: en.includes("Wall") ? C.wall : C.brown, along: al, ls: 0.95}); // ── fine print: smaller towns, shown from 2× zoom ───────────────────────── const DETAIL = [ // lon, lat, English postal name, Chinese name (about 1912) [117.93, 40.97, "Chengteh", "承德"], [118.18, 39.63, "Tangshan", "唐山"], [119.75, 40.0, "Shanhaikwan", "山海關"], [119.6, 39.93, "Chinwangtao", "秦皇島"], [114.5, 37.07, "Shunteh", "順德"], [115.15, 36.28, "Taming", "大名"], [116.1, 38.44, "Hokien", "河間"], [116.83, 38.3, "Tsangchow", "滄州"], [114.35, 36.1, "Changteh", "彰德"], [119.1, 36.7, "Weihsien", "濰縣"], [116.83, 35.55, "Yenchow", "兗州"], [116.58, 35.41, "Tsining", "濟寧"], [118.35, 35.05, "Ichow", "沂州"], [120.75, 37.8, "Tengchow", "登州"], [119.94, 37.18, "Laichow", "萊州"], [117.13, 36.2, "Taian", "泰安"], [115.7, 36.84, "Lintsing", "臨清"], [116.3, 37.45, "Tehchow", "德州"], [113.3, 40.09, "Tatung", "大同"], [111.52, 36.08, "Pingyang", "平陽"], [113.1, 36.2, "Luan", "潞安"], [110.42, 34.83, "Puchow", "蒲州"], [111.78, 37.27, "Fenchow", "汾州"], [112.45, 34.62, "Honanfu", "河南府"], [113.65, 34.75, "Chengchow", "鄭州"], [112.53, 33.0, "Nanyang", "南陽"], [114.37, 32.98, "Juning", "汝寧"], [115.65, 34.41, "Kweiteh", "歸德"], [114.07, 35.4, "Weihwei", "衛輝"], [114.07, 32.13, "Sinyang", "信陽"], [120.62, 31.3, "Soochow", "蘇州"], [119.45, 32.2, "Chinkiang", "鎮江"], [119.42, 32.39, "Yangchow", "揚州"], [119.15, 33.5, "Hwaian", "淮安"], [117.18, 34.26, "Suchow", "徐州"], [120.86, 32.01, "Tungchow", "通州"], [120.3, 31.57, "Wusih", "無錫"], [119.95, 31.78, "Changchow", "常州"], [119.18, 34.6, "Haichow", "海州"], [118.38, 31.33, "Wuhu", "蕪湖"], [117.27, 31.86, "Luchow", "廬州"], [117.56, 32.87, "Fengyang", "鳳陽"], [118.43, 29.87, "Hweichow", "徽州"], [115.81, 32.89, "Yingchow", "潁州"], [120.09, 30.87, "Huchow", "湖州"], [120.75, 30.75, "Kashing", "嘉興"], [120.58, 30.0, "Shaohing", "紹興"], [119.65, 29.08, "Kinhwa", "金華"], [119.92, 28.45, "Chuchow", "處州"], [121.13, 28.85, "Taichow", "台州"], [118.87, 28.97, "Kuchow", "衢州"], [114.93, 25.83, "Kanchow", "贛州"], [114.99, 27.11, "Kian", "吉安"], [116.36, 27.95, "Fuchow", "撫州"], [116.68, 29.0, "Jaochow", "饒州"], [117.2, 29.3, "Kingtehchen", "景德鎮"], [114.38, 27.8, "Yuanchow", "袁州"], [118.18, 26.65, "Yenping", "延平"], [118.58, 24.91, "Chuanchow", "泉州"], [117.65, 24.51, "Changchow", "漳州"], [118.32, 27.03, "Kienning", "建寧"], [116.36, 25.83, "Tingchow", "汀州"], [113.6, 24.8, "Shiuchow", "韶州"], [110.35, 20.0, "Kiungchow", "瓊州"], [113.08, 22.58, "Kongmoon", "江門"], [112.9, 23.16, "Samshui", "三水"], [116.12, 24.29, "Kaying", "嘉應"], [114.41, 23.11, "Waichow", "惠州"], [116.62, 23.66, "Chaochow", "潮州"], [112.47, 23.05, "Shiuhing", "肇慶"], [110.92, 21.92, "Kaochow", "高州"], [109.41, 24.33, "Liuchow", "柳州"], [110.64, 24.63, "Pingloh", "平樂"], [106.85, 22.35, "Lungchow", "龍州"], [106.62, 23.9, "Pose", "百色"], [109.6, 23.1, "Kweihsien", "貴縣"], [100.23, 25.6, "Talifu", "大理"], [100.97, 22.79, "Szemao", "思茅"], [103.72, 27.33, "Chaotung", "昭通"], [100.23, 26.87, "Likiang", "麗江"], [99.17, 25.12, "Yungchang", "永昌"], [101.0, 23.07, "Puerh", "普洱"], [106.93, 27.7, "Tsunyi", "遵義"], [105.93, 26.25, "Anshun", "安順"], [109.19, 27.72, "Tungjen", "銅仁"], [107.52, 26.26, "Tuyun", "都勻"], [111.69, 29.03, "Changteh", "常德"], [112.94, 27.83, "Siangtan", "湘潭"], [112.6, 26.9, "Hengchow", "衡州"], [113.13, 29.37, "Yochow", "岳州"], [111.47, 27.24, "Paoking", "寶慶"], [110.4, 28.42, "Shenchow", "辰州"], [113.03, 25.79, "Chenchow", "郴州"], [114.06, 30.53, "Hanyang", "漢陽", true], [112.25, 30.3, "Shasi", "沙市"], [112.14, 32.04, "Siangyang", "襄陽"], [109.48, 30.28, "Shihnan", "施南"], [110.8, 32.83, "Yunyang", "鄖陽"], [103.76, 29.56, "Kiating", "嘉定"], [104.63, 28.77, "Suifu", "敘州"], [105.44, 28.87, "Luchow", "瀘州"], [108.4, 30.82, "Wanhsien", "萬縣"], [109.47, 31.04, "Kweichowfu", "夔州"], [106.0, 31.58, "Paoning", "保寧"], [106.08, 30.79, "Shunking", "順慶"], [103.0, 29.98, "Yachow", "雅州"], [102.27, 27.89, "Ningyuan", "寧遠"], [99.11, 30.0, "Batang", "巴塘"], [100.27, 30.0, "Litang", "理塘"], [107.03, 33.07, "Hanchung", "漢中"], [109.49, 36.6, "Yenan", "延安"], [109.73, 38.29, "Yulin", "榆林"], [107.39, 34.52, "Fengsiang", "鳳翔"], [102.64, 37.93, "Liangchow", "涼州"], [100.45, 38.93, "Kanchow", "甘州"], [98.5, 39.74, "Suchow", "肅州"], [106.67, 35.54, "Pingliang", "平涼"], [105.72, 34.58, "Tsinchow", "秦州"], [94.66, 40.14, "Tunhwang", "敦煌"], [95.77, 40.52, "Anhsi", "安西"], [77.24, 38.41, "Yarkand", "莎車"], [79.92, 37.11, "Khotan", "和闐"], [80.26, 41.17, "Aksu", "阿克蘇"], [82.96, 41.72, "Kucha", "庫車"], [86.57, 42.06, "Karashar", "焉耆"], [89.18, 42.95, "Turfan", "吐魯番"], [82.98, 46.75, "Chuguchak", "塔城"], [93.0, 43.6, "Barkul", "巴里坤"], [96.84, 47.73, "Uliassutai", "烏里雅蘇台"], [91.64, 48.0, "Kobdo", "科布多"], [116.47, 42.18, "Dolonnor", "多倫諾爾"], [119.7, 49.2, "Hailar", "海拉爾"], [117.43, 49.6, "Manchuli", "滿洲里"], [109.84, 40.65, "Paotow", "包頭"], [125.32, 43.88, "Changchun", "長春"], [124.39, 40.13, "Antung", "安東"], [123.17, 41.27, "Liaoyang", "遼陽"], [123.84, 42.29, "Tieling", "鐵嶺"], [129.47, 44.35, "Ninguta", "寧古塔"], [129.8, 46.33, "Sansing", "三姓"], [124.82, 45.13, "Petuna", "伯都訥"], [126.59, 45.98, "Hulan", "呼蘭"], [121.13, 41.1, "Chinchow", "錦州"], [121.6, 38.92, "Dalny (Jap.)", "大連(日)"], [89.6, 28.92, "Gyantse", "江孜"], [97.17, 31.14, "Chamdo", "昌都"], [80.38, 31.73, "Gartok", "噶大克"], [92.05, 31.48, "Nagchu", "那曲"], [88.9, 27.48, "Yatung", "亞東"], [101.25, 36.68, "Tankar", "丹噶爾"], [97.0, 33.0, "Jyekundo", "結古"], [121.52, 25.05, "Taihoku", "臺北"], [106.68, 20.86, "Haiphong", "海防"], [96.16, 16.8, "Rangoon", "仰光"], [97.24, 24.27, "Bhamo", "八莫"], [126.62, 37.47, "Chemulpo", "濟物浦"], [129.04, 35.1, "Fusan", "釜山"], [135.5, 34.69, "Osaka", "大阪"], [77.58, 34.16, "Leh", "列城"], [69.24, 41.3, "Tashkent", "塔什干"], [80.23, 50.4, "Semipalatinsk", "塞米巴拉金斯克"], ]; const detailSymbols = symbols.append("g").attr("display", "none"); const detailLabels = labels.append("g").attr("display", "none"); { const size = ZH ? 4.4 : 4.0, gap = 2.0; const width = (t) => textWidth(t, "reg", size); const overlaps = (b) => hits([b]); for (const [lon, lat, en, zh, always] of DETAIL) { // always: shown even when crowded (Hanyang) const p = P(lon, lat); if (!inFrame(p)) continue; const [x, y] = p, t = T(ZH ? zh : en), w = width(t), h = size; if (!always && overlaps([x - 1.2, y - 1.2, x + 1.2, y + 1.2])) continue; // too close to another town const candidates = [["left", x + gap, y, [x + gap, y - h / 2, x + gap + w, y + h / 2]], ["right", x - gap, y, [x - gap - w, y - h / 2, x - gap, y + h / 2]], ["center", x, y - gap - h / 2, [x - w / 2, y - gap - h, x + w / 2, y - gap]], ["center", x, y + gap + h / 2, [x - w / 2, y + gap, x + w / 2, y + gap + h]]]; const pick = candidates.find((c) => !overlaps(c[3])) ?? candidates[always ? 1 : 0]; reserve([[x - 1.2, y - 1.2, x + 1.2, y + 1.2], pick[3]]); detailSymbols.append("circle").attr("cx", x).attr("cy", y).attr("r", 1.1).attr("fill", C.paper).attr("stroke", C.ink).attr("stroke-width", 0.45); text(detailLabels, pick[1], pick[2], t, {size, ha: pick[0], color: C.ink, alpha: 0.9, withHalo: atSea([pick[3]]) && "light"}); } } // ── frame: chequered degrees, graduations ───────────────────────────────── const frame = inked(svg.append("g")); const bw = 0.085 * 72, ob = bw + 0.04 * 72; const crossings = (edge, step = 1) => { // where meridians (top, bottom) or parallels (left, right) cut the frame const n = 4000, vertical = edge === "left" || edge === "right", q = [], pos = []; for (let i = 0; i < n; i++) { const f = i / (n - 1); const xy = vertical ? [edge === "left" ? ML : ML + WM, MT + HM - f * HM] : [ML + f * WM, edge === "top" ? MT : MT + HM]; const ll = projection.invert(xy); q.push(vertical ? ll[1] : ll[0]); pos.push(vertical ? xy[1] : xy[0]); } const out = [], lo = d3.min(q), hi = d3.max(q); for (let v = Math.ceil(lo / step) * step; v < hi; v += step) { const i = q.findIndex((x, k) => k > 0 && (q[k - 1] - v) * (x - v) <= 0); if (i > 0) out.push([v, pos[i - 1] + (v - q[i - 1]) / (q[i] - q[i - 1]) * (pos[i] - pos[i - 1])]); } return {out, q, pos}; }; for (const edge of ["bottom", "top", "left", "right"]) { const {out} = crossings(edge), vertical = edge === "left" || edge === "right"; const bounds = [vertical ? MT + HM : ML, ...out.map((c) => c[1]), vertical ? MT : ML + WM]; const parity = out.length ? ((Math.floor(out[0][0] - 1) % 2) + 2) % 2 : 0; for (let i = 0; i < bounds.length - 1; i++) { if ((parity + i) % 2) continue; const a = Math.min(bounds[i], bounds[i + 1]), b = Math.max(bounds[i], bounds[i + 1]); const r = edge === "bottom" ? [a, MT + HM, b - a, bw] : edge === "top" ? [a, MT - bw, b - a, bw] : edge === "left" ? [ML - bw, a, bw, b - a] : [ML + WM, a, bw, b - a]; frame.append("rect").attr("x", r[0]).attr("y", r[1]).attr("width", r[2]).attr("height", r[3]).attr("fill", C.ink); } } for (const [inset, w] of [[0, 0.8], [bw, 0.6], [ob, 2.0]]) frame.append("rect").attr("x", ML - inset).attr("y", MT - inset).attr("width", WM + 2 * inset).attr("height", HM + 2 * inset) .attr("fill", "none").attr("stroke", C.ink).attr("stroke-width", w); const degText = (v) => ZH ? T(zhn(Math.round(v))) : `${Math.round(v)}°`; const labOff = ob + 0.07 * 72, fsDeg = ZH ? 8.5 : 8; for (const [v, x] of crossings("bottom", 5).out) text(frame, x, MT + HM + labOff, degText(v), {size: fsDeg, va: "top"}); for (const [v, y] of crossings("left", 5).out) text(frame, ML - labOff, y, degText(v), {size: fsDeg, ha: "right"}); for (const [v, y] of crossings("right", 5).out) text(frame, ML + WM + labOff, y, degText(v), {size: fsDeg, ha: "left"}); // the top graduation counts from Greenwich (en) or Peking (zh) const top = crossings("top", 1); const topTicks = (origin, values, fmt) => { for (const v of values) { const g = origin + v, i = top.q.findIndex((x, k) => k > 0 && (top.q[k - 1] - g) * (x - g) <= 0); if (i <= 0) continue; const x = top.pos[i - 1] + (g - top.q[i - 1]) / (top.q[i] - top.q[i - 1]) * (top.pos[i] - top.pos[i - 1]); if (x < ML + 0.15 * 72 || x > ML + WM - 0.15 * 72) continue; frame.append("path").attr("d", `M${x},${MT - ob}v${-0.05 * 72}`).attr("stroke", C.ink).attr("stroke-width", 0.8); text(frame, x, MT - labOff, fmt(v), {size: fsDeg, va: "bottom"}); } }; let capTop, capBottom; if (!ZH) { topTicks(0, d3.range(60, 155, 5), (v) => `${v}°`); capTop = capBottom = "Longitude East of Greenwich"; } else { topTicks(116.3912, d3.range(-50, 35, 5), (v) => v === 0 ? T("京師") : T((v > 0 ? "東" : "西") + zhn(Math.abs(v)))); capTop = T("以京師為中線之經度"); capBottom = T("以格林威治為中線之經度"); } text(frame, ML + WM / 2, MT - labOff - 0.2 * 72, capTop, {role: "it", size: 8.5, va: "bottom"}); text(frame, ML + WM / 2, MT + HM + labOff + 0.2 * 72, capBottom, {role: "it", size: 8.5, va: "top"}); // ── cartouche and legend, in axes fractions as in the original ──────────── const box = inked(svg.append("g")); const atxt = (x, y, str, role = "reg", size = 8, {color = C.ink, ha = "center", raw = false} = {}) => text(box, fx(x), fy(y), raw ? str : T(str), {role, size, color, ha}); const boxed = (x0, y0, x1, y1) => { box.append("rect").attr("x", fx(x0)).attr("y", fy(y1)).attr("width", fx(x1) - fx(x0)).attr("height", fy(y0) - fy(y1)) .attr("fill", C.paper).attr("fill-opacity", 0.96).attr("stroke", C.ink).attr("stroke-width", 1.4); const e = 0.0045; box.append("rect").attr("x", fx(x0 + e)).attr("y", fy(y1 - e * 1.37)).attr("width", fx(x1 - e) - fx(x0 + e)) .attr("height", fy(y0 + e * 1.37) - fy(y1 - e * 1.37)).attr("fill", "none").attr("stroke", C.ink).attr("stroke-width", 0.5); const c = 0.006 * WM; for (const [cx, cy] of [[x0, y0], [x1, y0], [x0, y1], [x1, y1]]) box.append("rect").attr("x", fx(cx) - c / 2).attr("y", fy(cy) - c / 2).attr("width", c).attr("height", c).attr("fill", C.ink); }; const ornament = (xc, y, half = 0.06) => { const d = `M${fx(xc - half)},${fy(y)}H${fx(xc - 0.008)}M${fx(xc + 0.008)},${fy(y)}H${fx(xc + half)}`; const d2 = `M${fx(xc - half * 0.8)},${fy(y - 0.004)}H${fx(xc - 0.012)}M${fx(xc + 0.012)},${fy(y - 0.004)}H${fx(xc + half * 0.8)}`; box.append("path").attr("d", d).attr("stroke", C.ink).attr("stroke-width", 0.7); box.append("path").attr("d", d2).attr("stroke", C.ink).attr("stroke-width", 0.3); box.append("path").attr("d", `M${fx(xc - 0.006)},${fy(y)}L${fx(xc)},${fy(y + 0.0075)}L${fx(xc + 0.006)},${fy(y)}L${fx(xc)},${fy(y - 0.0075)}Z`).attr("fill", C.ink); }; const xc = (CX0 + CX1) / 2; boxed(CX0, CY0, CX1, CY1); const scaleDen = Math.round((X1 - X0) / (14.6 * 0.0254) / 1e6) * 1e6; let unitKm, sbMax, sbStep, sbLab, note; if (!ZH) { atxt(xc, 0.352, spaced("MAP"), "reg", 13); atxt(xc, 0.330, "of", "it", 11); atxt(xc, 0.282, "CHINA", "title", 48); atxt(xc, 0.238, "and her Dependencies", "it", 10); atxt(xc, 0.216, "MANCHURIA · MONGOLIA · SINKIANG · TIBET", "reg", 6.8); ornament(xc, 0.198); atxt(xc, 0.180, "compiled from the latest surveys", "it", 7.6); atxt(xc, 0.161, spaced("1912"), "reg", 10); atxt(xc, 0.137, `Scale 1 : ${scaleDen.toLocaleString("en-GB")}`, "reg", 7.6); [unitKm, sbMax, sbStep, sbLab, note] = [1.609344, 600, 100, "English Statute Miles", "Conic Projection · Meridian of Greenwich"]; } else { atxt(xc, 0.345, "最新繪製", "reg", 12); atxt(xc, 0.288, "中華民國全圖", "title", 33, {color: C.red}); atxt(xc, 0.238, "東三省・蒙古・新疆・青海・西藏", "reg", 9.5); ornament(xc, 0.214); atxt(xc, 0.190, "中華民國元年", "reg", 10.5); atxt(xc, 0.162, "比例尺　一千六百萬分之一", "reg", 9); [unitKm, sbMax, sbStep, sbLab, note] = [0.576, 1500, 250, "華里", "圓錐投影"]; } // graphic scale (right to left in Chinese) const Lsb = sbMax * unitKm / ((X1 - X0) / 1000), sbY = ZH ? 0.128 : 0.105, sbH = 0.0065, sbX0 = xc - Lsb / 2; const segs = Math.round(sbMax / sbStep); for (let i = 0; i < segs; i++) { const a = ZH ? sbX0 + Lsb - Lsb * (i + 1) / segs : sbX0 + Lsb * i / segs; box.append("rect").attr("x", fx(a)).attr("y", fy(sbY + sbH)).attr("width", fx(a + Lsb / segs) - fx(a)).attr("height", fy(sbY) - fy(sbY + sbH)) .attr("fill", i % 2 === 0 ? C.ink : C.paper).attr("stroke", C.ink).attr("stroke-width", 0.6); } for (let i = 0; i <= segs; i += 2) { const v = i * sbStep, xx = ZH ? sbX0 + Lsb - Lsb * i / segs : sbX0 + Lsb * i / segs; atxt(xx, sbY - 0.011, ZH ? zhn(v) : String(v), "reg", ZH ? 8 : 6.8); } atxt(xc, sbY - 0.031, sbLab, "it", ZH ? 8 : 7.2); atxt(xc, ZH ? 0.060 : 0.047, note, "reg", ZH ? 8 : 7); if (ZH) { // vermilion seal const sz = 0.034 * WM, x0 = fx(CX0 + 0.014), y1 = fy(CY0) - 0.014 * WM; // bottom edge: same margin as on the left box.append("rect").attr("x", x0).attr("y", y1 - sz).attr("width", sz).attr("height", sz).attr("fill", C.red).attr("opacity", 0.9); box.append("rect").attr("x", x0 + 0.003 * WM).attr("y", y1 - sz + 0.003 * WM).attr("width", sz - 0.006 * WM).attr("height", sz - 0.006 * WM) .attr("fill", "none").attr("stroke", C.paper).attr("stroke-width", 0.8); [..."輿地全圖"].forEach((ch, i) => { // read in columns, right to left const [px, py] = [[0.73, 0.28], [0.73, 0.72], [0.27, 0.28], [0.27, 0.72]][i]; text(box, x0 + sz * px, y1 - sz + sz * py, ch, {role: "title", size: 9.5, color: C.paper}); }); } // legend boxed(LX0, LY0, LX1, LY1); atxt((LX0 + LX1) / 2, LY1 - 0.022, legendTitle, ZH ? "head" : "reg", ZH ? 11 : 7.2); items.forEach(([kind, label_], i) => { const y = LY1 - 0.050 - i * rowH; // symbols on the outer side: right in Chinese (read right to left), left in English const [sa, sb, tx, ha] = ZH ? [LX1 - pad - symW, LX1 - pad, LX1 - pad - symW - gap, "right"] : [LX0 + pad, LX0 + pad + symW, LX0 + pad + symW + gap, "left"]; const [xa, xb, yy] = [fx(sa), fx(sb), fy(y)]; if (kind in {cap: 0, chef: 1, town: 2, col: 3}) citySymbol(box, (xa + xb) / 2, yy, {cap: 0, chef: 1, town: 2, col: 3}[kind]); else if (kind === "rail") { box.append("path").attr("d", `M${xa},${yy}H${xb}`).attr("stroke", C.ink).attr("stroke-width", 2.1); box.append("path").attr("d", `M${xa},${yy}H${xb}`).attr("stroke", C.paper).attr("stroke-width", 0.95).attr("stroke-dasharray", "2.28 2.28"); } else if (kind === "wall") { box.append("path").attr("d", `M${xa},${yy}H${xb}` + d3.range(8).map((k) => `M${xa + (xb - xa) * k / 7},${yy}v-4.4`).join("")) .attr("stroke", C.wall).attr("stroke-width", 1.1); } else if (kind === "intl") box.append("path").attr("d", `M${xa},${yy}H${xb}`).attr("stroke", C.ink).attr("stroke-width", 1.05).attr("stroke-dasharray", dashes(1.05, [5.5, 1.5, 1.2, 1.5, 1.2, 1.5])); else if (kind === "prov") box.append("path").attr("d", `M${xa},${yy}H${xb}`).attr("stroke", C.ink).attr("stroke-width", 0.6).attr("stroke-dasharray", dashes(0.6, [4.5, 1.6, 1.0, 1.6])); else if (kind === "mtn") { const r = rng(5); let d = ""; for (let k = 0; k < 16; k++) { const x = xa + 1.5 + (xb - xa - 3) * k / 15, t = 0.4 + 0.6 * Math.sin(Math.PI * (x - xa) / (xb - xa)); d += `M${x},${yy - 0.9}l${uniform(r, -0.4, 0.4)},${-6.2 * t * uniform(r, 0.6, 1)}M${x},${yy + 0.9}l${uniform(r, -0.4, 0.4)},${4.8 * t * uniform(r, 0.6, 1)}`; } box.append("path").attr("d", d).attr("stroke", C.brown).attr("stroke-width", 0.55); } else if (kind === "des") { const r = rng(9); for (let k = 0; k < 60; k++) box.append("circle").attr("cx", uniform(r, xa, xb)).attr("cy", yy + uniform(r, -5, 5)) .attr("r", Math.sqrt(uniform(r, 0.2, 1.1) / Math.PI)).attr("fill", C.brown).attr("opacity", 0.7); } atxt(tx, y, label_, "reg", legendSize, {color: kind === "col" ? C.red : C.ink, ha}); }); // ── margins ─────────────────────────────────────────────────────────────── const [left, right] = !ZH ? ["Engraved & printed in London — 1912", "Data: Natural Earth · Type: IM Fell DW Pica, IM Fell French Canon"] : ["Data: Natural Earth · Type: Noto Serif TC", T("民國元年初版")]; text(svg, ML, H - 0.22 * 72, left, {role: ZH ? "latin" : "it", size: 7.5, ha: "left"}); text(svg, ML + WM, H - 0.22 * 72, right, {role: ZH ? "reg" : "it", size: ZH ? 9.5 : 7.5, ha: "right"}); // ── canvases: paper textures, painted layers, aging ─────────────────────── const noise = (w, h, cell, octaves, seed) => { // smooth value noise in [0, 1], on a w × h grid const r = rng(seed), out = new Float32Array(w * h); let amp = 1, total = 0; for (let o = 0; o < octaves; o++, total += amp, amp /= 2, cell /= 2) { const gw = Math.ceil(w / cell) + 2, gh = Math.ceil(h / cell) + 2, g = Float32Array.from({length: gw * gh}, () => r()); for (let y = 0; y < h; y++) { const fy0 = y / cell, y0 = Math.floor(fy0), ty = fy0 - y0, sy = ty * ty * (3 - 2 * ty); for (let x = 0; x < w; x++) { const fx0 = x / cell, x0 = Math.floor(fx0), tx = fx0 - x0, sx = tx * tx * (3 - 2 * tx); const a = g[y0 * gw + x0], b = g[y0 * gw + x0 + 1], c = g[(y0 + 1) * gw + x0], d = g[(y0 + 1) * gw + x0 + 1]; out[y * w + x] += amp * (a + (b - a) * sx + (c - a) * sy + (a - b - c + d) * sx * sy); } } } for (let i = 0; i < out.length; i++) out[i] /= total; return out; }; const tint = (w, h, values, [red, green, blue], alpha) => { // one colour, alpha from the values const c = document.createElement("canvas"); c.width = w; c.height = h; const ctx = c.getContext("2d"), img = ctx.createImageData(w, h), px = img.data; for (let i = 0; i < values.length; i++) { px[4 * i] = red; px[4 * i + 1] = green; px[4 * i + 2] = blue; px[4 * i + 3] = 255 * Math.max(0, Math.min(1, alpha(values[i]))); } ctx.putImageData(img, 0, 0); return c; }; let textures = null; const makeTextures = () => { const gw = Math.ceil(W / 2), gh = Math.ceil(H / 2), r = rng(3); const grain = Float32Array.from({length: Math.ceil(W) * Math.ceil(H)}, () => 0.5 + (r() - 0.5) * 0.5); return { // the same colour and alpha mapping as the SVG filters of the vector version mottle: tint(gw, gh, noise(gw, gh, 42, 4, 11), [107, 74, 38], (v) => 0.55 * (0.3 + 0.8 * v) - 0.22), grain: tint(Math.ceil(W), Math.ceil(H), grain, [77, 56, 31], (v) => 0.35 * v - 0.12), blot: tint(Math.ceil(W / 8), Math.ceil(H / 8), noise(Math.ceil(W / 8), Math.ceil(H / 8), 36, 2, 5), [107, 74, 38], (v) => 0.5 * (0.3 + 0.8 * v) - 0.24), }; }; const clipOf = (url) => { const node = defs.node().querySelector(`[id="${url.slice(5, -1)}"] path`); return node ? new Path2D(node.getAttribute("d")) : null; }; const drawOps = (ctx, ops) => { for (const a of ops) { if (!a.d) continue; const p = new Path2D(a.d); ctx.save(); if (a["clip-path"]) { const clip = clipOf(a["clip-path"]); if (clip) ctx.clip(clip); } if (a.transform) { const m = /translate$([^,]+),([^)]+)$/.exec(a.transform); if (m) ctx.translate(+m[1], +m[2]); } ctx.globalAlpha = a.opacity ?? 1; if (a.fill && a.fill !== "none") { ctx.fillStyle = a.fill; ctx.fill(p, a["fill-rule"] === "evenodd" ? "evenodd" : "nonzero"); } if (a.stroke && a.stroke !== "none") { ctx.strokeStyle = a.stroke; ctx.lineWidth = a["stroke-width"] ?? 1; ctx.lineJoin = a["stroke-linejoin"] ?? "miter"; ctx.lineCap = a["stroke-linecap"] ?? "butt"; ctx.stroke(p); } ctx.restore(); } }; const paintUnder = (ctx) => { textures ??= makeTextures(); ctx.fillStyle = C.paper; ctx.fillRect(0, 0, W, H); ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = "high"; ctx.drawImage(textures.mottle, 0, 0, W, H); ctx.drawImage(textures.grain, 0, 0, W, H); ctx.save(); ctx.beginPath(); ctx.rect(ML, MT, WM, HM); ctx.clip(); drawOps(ctx, under.ops); ctx.restore(); }; const paintOver = (ctx) => { // aging: browned edges, stains, foxing, folds (over the text, as on paper) textures ??= makeTextures(); const r = rng(11), rgba = (a) => `rgba(107, 74, 38, ${a})`; for (const [x1, y1, x2, y2] of [[0, 0, 1, 0], [1, 0, 0, 0], [0, 0, 0, 1], [0, 1, 0, 0]]) { const g = ctx.createLinearGradient(x1 * W, y1 * H, x2 * W, y2 * H); for (const [o, a] of [[0, 0.30], [0.04, 0.13], [0.08, 0.03], [0.11, 0]]) g.addColorStop(o, rgba(a)); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H); } ctx.save(); ctx.scale(W, H); const v = ctx.createRadialGradient(0.5, 0.5, 0, 0.5, 0.5, 0.75); v.addColorStop(0.75, rgba(0)); v.addColorStop(1, rgba(0.05)); ctx.fillStyle = v; ctx.fillRect(0, 0, 1, 1); ctx.restore(); ctx.drawImage(textures.blot, 0, 0, W, H); for (let k = 0; k < 6; k++) uniform(r, 0, 1); // (the two glass rings are gone; draws kept so the foxing stays in place) for (let k = 0; k < 45; k++) { // foxing const rs = uniform(r, 2, 9) * 0.36 * 2.5, cx = uniform(r, 0, W), cy = uniform(r, 0, H), op = uniform(r, 0.12, 0.3); const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, rs); g.addColorStop(0, rgba(op)); g.addColorStop(0.5, rgba(op * 0.45)); g.addColorStop(1, rgba(0)); ctx.fillStyle = g; ctx.beginPath(); ctx.arc(cx, cy, rs, 0, 2 * Math.PI); ctx.fill(); } const segment = (x1, y1, x2, y2) => { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); }; const fold = (x1, y1, x2, y2, horizontal) => { ctx.strokeStyle = rgba(0.05); ctx.lineWidth = 13; segment(x1, y1, x2, y2); ctx.strokeStyle = rgba(0.28); ctx.lineWidth = 0.8; segment(x1, y1, x2, y2); ctx.strokeStyle = "rgba(255, 255, 255, 0.22)"; ctx.lineWidth = 1.6; horizontal ? segment(x1, y1 + 1.4, x2, y2 + 1.4) : segment(x1 + 1.4, y1, x2 + 1.4, y2); }; for (const f of [0.25, 0.5, 0.75]) fold(f * W, 0, f * W, H, false); fold(0, H / 2, W, H / 2, true); }; // ── assembly: canvas, SVG, canvas, moved together by the GPU while zooming ─ const root = document.createElement("div"); root.style.cssText = `position: relative; width: 100%; max-width: ${W}px; aspect-ratio: ${W} / ${H}; overflow: hidden; cursor: grab; touch-action: none;`; const sheet = document.createElement("div"); sheet.style.cssText = `position: absolute; left: 0; top: 0; width: ${W}px; height: ${H}px; transform-origin: 0 0; will-change: transform;`; const canvasUnder = document.createElement("canvas"), canvasOver = document.createElement("canvas"); for (const c of [canvasUnder, canvasOver]) c.style.cssText = `position: absolute; left: 0; top: 0; width: ${W}px; height: ${H}px; pointer-events: none;`; svg.attr("width", W).attr("height", H).attr("style", "position: absolute; left: 0; top: 0; display: block;"); sheet.append(canvasUnder, svg.node(), canvasOver); root.append(sheet); let fit = 1, rendered = 0, transform = d3.zoomIdentity; const MAX_AREA = 24e6; // canvas pixels: the resolution stops growing past about 3 to 4× zoom const render = (k) => { const res = Math.min(fit * (window.devicePixelRatio || 1) * k, Math.sqrt(MAX_AREA / (W * H)), 8000 / W); if (rendered && Math.abs(res - rendered) / res < 0.2) return; const t0 = performance.now(); for (const [c, paint] of [[canvasUnder, paintUnder], [canvasOver, paintOver]]) { c.width = Math.round(W * res); c.height = Math.round(H * res); const ctx = c.getContext("2d"); ctx.setTransform(res, 0, 0, res, 0, 0); paint(ctx); } rendered = res; root.dataset.renderMs = Math.round(performance.now() - t0); }; const apply = () => { const {x, y, k} = transform; sheet.style.transform = `translate(${x}px, ${y}px) scale(${k * fit})`; const show = k >= 2 ? null : "none"; detailSymbols.attr("display", show); detailLabels.attr("display", show); }; const zoom = d3.zoom().scaleExtent([1, 8]) .filter((e) => (e.type === "wheel" ? e.ctrlKey || e.metaKey : !e.button)) .on("start", () => (root.style.cursor = "grabbing")) .on("zoom", (e) => { transform = e.transform; apply(); }) .on("end", () => { root.style.cursor = "grab"; render(transform.k); // a will-change layer keeps its first raster: drop it for a frame so the text is redrawn sharp sheet.style.willChange = "auto"; requestAnimationFrame(() => requestAnimationFrame(() => (sheet.style.willChange = "transform"))); }); d3.select(root).call(zoom); new ResizeObserver(() => { const w = root.clientWidth; if (!w) return; fit = w / W; zoom.translateExtent([[0, 0], [w, w * H / W]]); apply(); render(transform.k); }).observe(root); root.zoom = zoom; // for tests return root; } 4d:[{"id":"d8a9d8239a2bef2ccad02e2e32a5a4815b96bce308bc8a17a483e3a820a06d223f23503b8512c4d9516ca366de8c942711d8333d3e6e3b824466317f695e1f06","href":"https://static.observableusercontent.com/files/d8a9d8239a2bef2ccad02e2e32a5a4815b96bce308bc8a17a483e3a820a06d223f23503b8512c4d9516ca366de8c942711d8333d3e6e3b824466317f695e1f06","name":"china1912.json","type":"application/json","lastModified":1793802145166,"size":1099912}] 47:{"id":"855a7abac2a706e3","slug":"30-day-map-challenge-2026-day-6-vintage","title":"Day 6: Vintage","thumbnail":"b6fdb46696b75ce96bb1eccae3800b99b5264e5f114f829682d979ae39ea690b","access_level":"public","create_time":"$D2026-11-04T14:19:06.362Z","update_time":"$D2026-11-06T12:58:37.119Z","view_time":null,"first_public_time":"$D2026-11-06T06:14:14.902Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"6b95df6ccdd0cd40","login":"xoolive","name":"Xavier Olive","avatar_url":"https://avatars-next.observableusercontent.com/e055a445877c5a8ee2da134a257760536c2d1ee2fcd43f3aaf3f40db54e13733","tier":"starter_2024","bio":"Research scientist. I like maps, code and data visualisation. I keep an eye on anything that can fly, an ear for fipradio and a foot ready for next trail.","followed_by_you":false,"follows_you":false},"version":72,"publish_version":72,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b2e8d88aeec5ab4","login":"xoolive","name":"Xavier Olive","avatar_url":"https://avatars-next.observableusercontent.com/e055a445877c5a8ee2da134a257760536c2d1ee2fcd43f3aaf3f40db54e13733","tier":null,"bio":"Research scientist. I like maps, code and data visualisation. I keep an eye on anything that can fly, an ear for fipradio and a foot ready for next trail.","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"6b95df6ccdd0cd40","login":"xoolive","name":"Xavier Olive","avatar_url":"https://avatars-next.observableusercontent.com/e055a445877c5a8ee2da134a257760536c2d1ee2fcd43f3aaf3f40db54e13733","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a749676c7f0928cb","slug":"30-day-map-challenge","title":"30 day map challenge","owner":{"id":"6b95df6ccdd0cd40","login":"xoolive","name":"Xavier Olive"}},"type":"notebook","body":{"titling":"auto","title":"Day 6: Vintage","cells":[{"id":1,"value":"$${nav(6)}\n\n# Day 6: Vintage\n\nA map of China as it could have been printed around 1912, the first year of the Republic, in traditional characters written horizontally from right to left, as on many Chinese maps of the period: 圖全國民華中 reads 中華民國全圖, *complete map of the Republic of China*. An English version uses the postal romanisation of the time (Peking, Chengtu, Hankow). Everything is drawn in the browser with D3 from Natural Earth data: the aged paper with its folds and foxing, provinces washed in watercolour slightly off register, water lines along the coasts, mountains in “caterpillar” hachures, stippled deserts, the crenellated Great Wall and the railways of the time.\n\nZoom into the sheet: drag it, scroll with ⌘ or Ctrl held down, pinch, or double-click. From twice the size on, about 140 more prefectures and towns appear in fine print.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof lang = Inputs.radio(new Map([[\"中文\", \"zh\"], [\"English, postal romanisation\", \"en\"]]), {value: \"zh\", label: \"Version\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"map = {\n fonts; // wait for the stylesheet of the period fonts\n return vintageMap(data, lang, {ink: 0.2});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"---\n\n*Code*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"// Provinces of 1912, colonial blocks, coast and water lines, rivers and lakes, from Natural Earth\ndata = FileAttachment(\"china1912.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// Navigation header of the series\nimport {nav} from \"@xoolive/30-day-map-challenge-2026-day-1-points\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"fonts = {\n // Noto Serif TC, a Ming face, in three weights (Chinese); IM Fell DW Pica and IM Fell French Canon (English), all free\n const families = [\"IM+Fell+DW+Pica:ital@0;1\", \"IM+Fell+French+Canon\", \"Noto+Serif+TC:wght@400;700;900\"];\n const link = html` `family=${f}`).join(\"&\")}&display=swap\">`;\n document.head.append(link);\n invalidation.then(() => link.remove());\n await new Promise((resolve) => (link.onload = link.onerror = resolve));\n // the label placement measures text: wait for the font files themselves\n await Promise.all([\"10px 'IM Fell DW Pica'\", \"italic 10px 'IM Fell DW Pica'\", \"10px 'IM Fell French Canon'\",\n \"400 10px 'Noto Serif TC'\", \"700 10px 'Noto Serif TC'\", \"900 10px 'Noto Serif TC'\"].map((f) => document.fonts.load(f, \"Aa中國\")));\n return families.map((f) => f.split(\":\")[0].replaceAll(\"+\", \" \"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 42:null