34:["$","title",null,{"children":"Day 13: Interactions | Xavier Olive | Observable"}] 3c:T56a2,// Day 13, Interactions: twinned towns on a globe. It opens on the twinnings between countries (arcs between countries, // as thick as their number of twinnings); a click on a country shows its partner countries and its towns, a click on a // partner the twinnings between the two countries, a click on a town its twins. Drag to turn, scroll or pinch to zoom; // the breadcrumb, the list beside the globe and the search box move between these views. // twinGlobe(data, {world, invalidation}): data = sisters.json ({countries, places: [[name, lon, lat, country, population, // qid]], pairs: [[i, j, start, end, both]]}), world = world-atlas land (TopoJSON), invalidation = stops the animation. function twinGlobe(data, {world, invalidation} = {}) { const P = data.places, C = data.countries, N = P.length; const uid = Math.random().toString(36).slice(2, 8); const BG = "#0e1420", SEA = "#111a29", LAND = "#1d2635", COAST = "#2e3a4d", GOLD = "#f2b45a", HOT = "#ff6b4a", INK = "#e9e2d0"; const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({"&": "&", "<": "<", ">": ">", '"': """})[c]); const fmt = d3.format(","); const land = topojson.feature(world, world.objects.land); // ── data: who is twinned with whom, by place and by country ── const cOf = P.map((p) => p[3] ?? -1), ll = P.map((p) => [p[1], p[2]]); const nb = P.map(() => []); const since = new Map(); // the year a twinning started, when known for (const [i, j, start] of data.pairs) { nb[i].push(j); nb[j].push(i); if (start) { since.set(i * N + j, start); since.set(j * N + i, start); } } const cname = (c) => C[c] ?? "unknown"; const pname = (i) => `${P[i][0]}, ${cname(cOf[i])}`, plabel = (i) => `${P[i][0]} (${cname(cOf[i])})`; const members = C.map(() => []); P.forEach((_, i) => { if (cOf[i] >= 0) members[cOf[i]].push(i); }); // a country's position: its twinned place nearest the centre of all its twinned places (on land, in the country) const anchor = members.map((m) => { if (!m.length) return null; const ctr = d3.geoCentroid({type: "MultiPoint", coordinates: m.map((i) => ll[i])}); return ll[d3.least(m, (i) => d3.geoDistance(ctr, ll[i]))]; }); const total = new Float64Array(C.length), pairCount = new Map(), pairLinks = new Map(), key = (a, b) => (a < b ? a * 4096 + b : b * 4096 + a); for (const [i, j] of data.pairs) { const a = cOf[i], b = cOf[j]; if (a < 0 || b < 0) continue; const k = key(a, b); pairCount.set(k, (pairCount.get(k) ?? 0) + 1); if (!pairLinks.has(k)) pairLinks.set(k, []); pairLinks.get(k).push([i, j]); total[a]++; if (b !== a) total[b]++; } const countryPairs = [...pairCount].map(([k, v]) => [Math.floor(k / 4096), k % 4096, v]).filter(([a, b]) => a !== b && anchor[a] && anchor[b]).sort((p, q) => q[2] - p[2]); const maxPair = countryPairs[0][2], maxTotal = d3.max(total); const partners = (c) => countryPairs.filter(([a, b]) => a === c || b === c).map(([a, b, v]) => [a === c ? b : a, v]); const countries = d3.range(C.length).filter((c) => total[c] > 0 && anchor[c]); const byLabel = new Map(); for (const i of d3.range(N).sort((a, b) => nb[b].length - nb[a].length)) if (!byLabel.has(plabel(i))) byLabel.set(plabel(i), i); const byCountry = new Map(countries.map((c) => [C[c], c])); // ── the page: globe, breadcrumb, search, list, tooltip ── const root = document.createElement("div"); root.className = `twins-${uid}`; root.innerHTML = ``; const canvas = document.createElement("canvas"); root.append(canvas); const top = document.createElement("div"); top.className = "top"; root.append(top); const crumbs = document.createElement("div"); crumbs.className = "crumbs"; top.append(crumbs); const search = document.createElement("input"); search.placeholder = "Search a town or a country"; search.setAttribute("list", `twins-${uid}-list`); top.append(search); const datalist = document.createElement("datalist"); datalist.id = `twins-${uid}-list`; datalist.innerHTML = [...countries.map((c) => C[c]), ...[...byLabel.keys()].slice(0, 3000)].map((s) => `