2c:null 2d:["$","title",null,{"children":"United States County-to-county Migration | Yonsei University | Observable"}] 32:T1485,chart = { const data = await FileAttachment("counties.json").json(); const width = 1000; const height = 650; const container = d3.create("div") .style("position", "relative") .style("width", "100%"); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto") .style("display", "block") .style("cursor", "grab"); container.append(() => svg.node()); const tooltip = container.append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("background", "rgba(255,255,255,0.96)") .style("border", "1px solid #333") .style("border-radius", "4px") .style("padding", "6px 8px") .style("font", "12px sans-serif") .style("color", "#111") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.15)") .style("white-space", "nowrap"); const features = data.features; const projection = d3.geoAlbersUsa() .fitSize([width, height], data); const path = d3.geoPath(projection); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "white"); const zoomLayer = svg.append("g"); const countyLayer = zoomLayer.append("g"); const flowLayer = zoomLayer.append("g") .attr("pointer-events", "none"); const gainColors = [ "#1f3b78", "#2f5f9d", "#3f84b8", "#71b0b2", "#a8c9b2", "#cdddb7" ]; const lossColors = [ "#e7e7b3", "#e8c761", "#ee9b34", "#f06d2f", "#f03d24", "#b3002d" ]; function makeArc(sourceXY, targetXY) { const [x1, y1] = sourceXY; const [x2, y2] = targetXY; const mx = (x1 + x2) / 2; const my = (y1 + y2) / 2; const dx = x2 - x1; const dy = y2 - y1; const dist = Math.sqrt(dx * dx + dy * dy) || 1; const offset = Math.max(20, dist * 0.18); const nx = -dy / dist; const ny = dx / dist; const cx = mx + nx * offset; const cy = my + ny * offset; return `M${x1},${y1} Q${cx},${cy} ${x2},${y2}`; } function showTooltip(event, d) { tooltip .style("opacity", 1) .text(d.properties.name); moveTooltip(event); } function moveTooltip(event) { const [x, y] = d3.pointer(event, container.node()); const tooltipNode = tooltip.node(); const tooltipWidth = tooltipNode.offsetWidth || 0; const tooltipHeight = tooltipNode.offsetHeight || 0; let left = x + 12; let top = y + 12; if (left + tooltipWidth > width) left = x - tooltipWidth - 12; if (top + tooltipHeight > height) top = y - tooltipHeight - 12; tooltip .style("left", `${left}px`) .style("top", `${top}px`); } function hideTooltip() { tooltip.style("opacity", 0); } function drawFlows(selectedCounty) { const flows = selectedCounty.properties.flows || {}; const arcs = Object.entries(flows) .map(([targetId, value]) => { const target = features[+targetId]; if (!target) return null; const s = selectedCounty.properties.centroid; const t = target.properties.centroid; const sourceXY = projection([s[0], s[1]]); const targetXY = projection([t[0], t[1]]); if (!sourceXY || !targetXY) return null; return { source: selectedCounty, target, value: +value, absValue: Math.abs(+value), sourceXY, targetXY }; }) .filter(d => d && d.absValue > 0); flowLayer.selectAll("*").remove(); if (!arcs.length) return; const gainArcs = arcs.filter(d => d.value > 0); const lossArcs = arcs.filter(d => d.value < 0); const gainScale = d3.scaleQuantile() .domain(gainArcs.map(d => d.absValue)) .range(gainColors); const lossScale = d3.scaleQuantile() .domain(lossArcs.map(d => d.absValue)) .range(lossColors); flowLayer.selectAll("path") .data(arcs) .join("path") .attr("d", d => makeArc(d.sourceXY, d.targetXY)) .attr("fill", "none") .attr("stroke", d => { if (d.value > 0) return gainScale(d.absValue); return lossScale(d.absValue); }) .attr("stroke-width", 1) .attr("stroke-opacity", 0.8) .attr("stroke-linecap", "round"); } countyLayer.selectAll("path") .data(features) .join("path") .attr("d", path) .attr("fill", "#d9d9d9") .attr("stroke", "#222") .attr("stroke-width", 0.35) .style("cursor", "pointer") .on("mouseenter", showTooltip) .on("mousemove", moveTooltip) .on("mouseleave", hideTooltip) .on("click", function(event, d) { countyLayer.selectAll("path") .attr("fill", "#d9d9d9"); d3.select(this).attr("fill", "#f2c94c"); drawFlows(d); }); const zoom = d3.zoom() .scaleExtent([1, 8]) .on("start", () => svg.style("cursor", "grabbing")) .on("end", () => svg.style("cursor", "grab")) .on("zoom", event => { zoomLayer.attr("transform", event.transform); flowLayer.selectAll("path").attr("stroke-width", 1 / event.transform.k); countyLayer.selectAll("path").attr("stroke-width", 0.35 / event.transform.k); }); svg.call(zoom); return container.node(); }33:[{"id":"dac4ba99547aa823c17b10eb70f8eb3a166c87a09b299cd645aae6459b6ecb0781701fe1cf6d4c0cb94d53d3e550f199c180f9da202814eef73ddf83984d5776","href":"https://static.observableusercontent.com/files/dac4ba99547aa823c17b10eb70f8eb3a166c87a09b299cd645aae6459b6ecb0781701fe1cf6d4c0cb94d53d3e550f199c180f9da202814eef73ddf83984d5776","name":"counties.json","type":"application/json","lastModified":1774412453363.454,"size":5998424}] 30:{"id":"6187ecada738db22","slug":null,"title":"United States County-to-county Migration","thumbnail":"abb6bfdf17c3e3a955ce9240e0e36c605b26cd00d2d4acd4eba17750e10ab97c","access_level":"public","create_time":"$D2026-03-25T04:20:26.086Z","update_time":"$D2026-03-25T04:36:39.310Z","view_time":null,"first_public_time":"$D2026-03-25T04:35:35.272Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6686209f2dacbb68","login":"yonsei-university","name":"Yonsei University","avatar_url":"https://avatars-next.observableusercontent.com/0ef313aea0a6d14e694642337ad9fb2c3d61bab08e797d7bf396f201ea06499b","tier":"starter_2024"},"version":30,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"993abe2b01c94697","login":"apikeu-muhammad-afiq-aiman-bin-affandi","name":"아피크 Muhammad Afiq Aiman bin Affandi","avatar_url":"https://avatars-next.observableusercontent.com/a3c91dc94a67b55a27b9cb13cd75d20a8cd74d4570e4acc69327d28827cd0613","tier":null}],"members":[{"type":"individual","id":"993abe2b01c94697","login":"apikeu-muhammad-afiq-aiman-bin-affandi","name":"아피크 Muhammad Afiq Aiman bin Affandi","avatar_url":"https://avatars-next.observableusercontent.com/a3c91dc94a67b55a27b9cb13cd75d20a8cd74d4570e4acc69327d28827cd0613","tier":null,"role":"editor"},{"type":"team","id":"6686209f2dacbb68","login":"yonsei-university","name":"Yonsei University","avatar_url":"https://avatars-next.observableusercontent.com/0ef313aea0a6d14e694642337ad9fb2c3d61bab08e797d7bf396f201ea06499b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"United States County-to-county Migration","cells":[{"id":0,"value":"# United States County-to-county Migration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"## People moving in and out of between 2009-2013","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"

\n\n

\n Net gain\n Net loss\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"Data Source: [US Census Bureau](http://www.census.gov/)\n\nOriginal from [deck.gl Examples](https://deck.gl/examples/arc-layer)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"