2f:T5f3,partnerGeom = { const { abbrToFeature, stateCentroidByAbbr, path } = prepped; // Build partner nodes from partnersData const nodes = partnersData.map(d => { const f = abbrToFeature.get(d.abbr); const c = stateCentroidByAbbr.get(d.abbr); if (!f || !c) return null; // projected-size radius for proper collision const [[x0,y0],[x1,y1]] = path.bounds(f); const baseRadius = 0.5 * Math.max(1, x1 - x0, y1 - y0); return { abbr: d.abbr, value: d.value, f, cx: c[0], cy: c[1], x: c[0], y: c[1], baseRadius, selected: false }; }).filter(Boolean); // Ensure the selected state is present as a node (in steelblue) if (!nodes.some(n => n.abbr === state)) { const fSel = abbrToFeature.get(state); const cSel = stateCentroidByAbbr.get(state); if (fSel && cSel) { const [[x0,y0],[x1,y1]] = path.bounds(fSel); const baseRadius = 0.5 * Math.max(1, x1 - x0, y1 - y0); // Use total of partners as the selected state's value (sum of visible flows) const selectedTotal = d3.sum(partnersData, d => d.value) || 0; nodes.push({ abbr: state, value: selectedTotal, f: fSel, cx: cSel[0], cy: cSel[1], x: cSel[0], y: cSel[1], baseRadius, selected: true }); } } // Label sizing if you want it later const maxV = d3.max(nodes, d => d.value) || 1; const rLabel = d3.scaleSqrt().domain([0, maxV]).range([8, 18]); return { nodes, rLabel }; } 30:T24c7,partnerStatesOnly = { const { path, abbrToFeature, stateCentroidByAbbr } = prepped; // re-run on changes void state; void flowMode; void placementMode; void ringRadius; void spacing; void scalePartner; void lineCurved; void dogInterval; void replayAnim; // --- 0) Build/augment nodes so every row endpoint has a node --- const base0 = partnerGeom.nodes.map((d) => ({ ...d })); const have = new Set(base0.map((d) => d.abbr)); for (const r of dogTrips.rows) { const other = dogTrips.isInto ? r.from : r.to; if (!other || have.has(other)) continue; const f = abbrToFeature.get(other); const c = stateCentroidByAbbr.get(other); if (!f || !c) continue; const [[x0, y0], [x1, y1]] = path.bounds(f); base0.push({ abbr: other, value: 0, f, cx: c[0], cy: c[1], x: c[0], y: c[1], baseRadius: 0.5 * Math.max(1, x1 - x0, y1 - y0), selected: false }); have.add(other); } if (!have.has(state)) { const fSel = abbrToFeature.get(state); const cSel = stateCentroidByAbbr.get(state); if (!fSel || !cSel) return html`

No geometry for ${state}.

`; const [[x0, y0], [x1, y1]] = path.bounds(fSel); base0.push({ abbr: state, value: 0, f: fSel, cx: cSel[0], cy: cSel[1], x: cSel[0], y: cSel[1], baseRadius: 0.5 * Math.max(1, x1 - x0, y1 - y0), selected: true }); } // --- 1) Layout (selected centered; others ring) --- const numStates = base0.length; const getHeight = (n) => { if (n < 5) return 610; else if (n < 10) return 800; else return 1200; }; const W = 1200, H = getHeight(numStates); const cx0 = W / 2, cy0 = H / 2; const sel = base0.find((d) => d.abbr === state); const partners = base0.filter((d) => d !== sel); if (placementMode === "Geographic ring") { for (const d of base0) { if (d === sel) { d.tx = cx0; d.ty = cy0; d.fx = cx0; d.fy = cy0; } else { const th = Math.atan2(d.cy - sel.cy, d.cx - sel.cx) || 0; d.tx = cx0 + ringRadius * Math.cos(th); d.ty = cy0 + ringRadius * Math.sin(th); } } } else { const ordered = partners .map((d) => ({ d, th: Math.atan2(d.cy - sel.cy, d.cx - sel.cx) })) .sort((a, b) => a.th - b.th) .map((x) => x.d); const n = Math.max(1, ordered.length); for (let i = 0; i < n; ++i) { const th = (2 * Math.PI * i) / n, d = ordered[i]; d.tx = cx0 + ringRadius * Math.cos(th); d.ty = cy0 + ringRadius * Math.sin(th); } sel.tx = cx0; sel.ty = cy0; sel.fx = cx0; sel.fy = cy0; } const radiusOf = (d) => d.baseRadius * scalePartner + spacing; const sim = d3 .forceSimulation(base0) .force("x", d3.forceX((d) => d.tx).strength(0.28)) .force("y", d3.forceY((d) => d.ty).strength(0.28)) .force("collide", d3.forceCollide((d) => radiusOf(d)).iterations(2)) .force("repel", d3.forceManyBody().strength(-6)) .alpha(1) .stop(); for (let i = 0; i < 320; ++i) sim.tick(); const nodeByAbbr = new Map(base0.map((d) => [d.abbr, d])); // --- 2) Render base layers --- const svg = d3 .create("svg") .attr("viewBox", [0, 0, W, H]) .style("background", "#fff"); const { scale: stateFill } = stateColor; const gNodes = svg.append("g").attr("class", "nodes"); const groups = gNodes .selectAll("g.state") .data(base0, (d) => d.abbr) .join("g") .attr("class", "state") .attr("transform", (d) => { const dx = d.x - d.cx, dy = d.y - d.cy; return `translate(${dx},${dy}) translate(${d.cx},${ d.cy }) scale(${scalePartner}) translate(${-d.cx},${-d.cy})`; }); groups .append("path") .attr("d", (d) => path(d.f)) .attr("fill", (d) => (d.selected ? "#4682B4" : stateFill(d.value || 0))) .attr("stroke", (d) => (d.selected ? "#1e3a8a" : "#374151")) .attr("stroke-width", (d) => (d.selected ? 2 : 1)); groups .append("text") .attr("x", (d) => d.cx) .attr("y", (d) => d.cy - 16) .attr("text-anchor", "middle") .attr("dominant-baseline", "baseline") .attr("font-size", 10) .attr("font-weight", 700) .attr("fill", (d) => (d.selected ? "#fff" : "#111827")) .text((d) => d.abbr); // Live counts + targets const counts = new Map(base0.map((d) => [d.abbr, 0])); const countText = groups .append("text") .attr("x", (d) => d.cx) .attr("y", (d) => d.cy + 4) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-size", 12) .attr("font-weight", 800) .attr("fill", (d) => (d.selected ? "#fff" : "#111827")) .text("0"); // Compute target counts: selected = total rows; partners = per-partner counts const selectedTarget = dogTrips.rows.length; const partnerTargets = new Map(); for (const [k, list] of dogTrips.byPartner) partnerTargets.set(k, list.length); // map of abbr -> target for capping const targetByAbbr = new Map(base0.map((d) => [d.abbr, 0])); targetByAbbr.set(state, selectedTarget); for (const [k, v] of partnerTargets) targetByAbbr.set(k, v); function setCount(abbr, v) { counts.set(abbr, v); countText.filter((d) => d.abbr === abbr).text(v); } function resetAllCounts() { for (const abbr of counts.keys()) setCount(abbr, 0); } function incCapped(abbr) { const cur = counts.get(abbr) || 0; const cap = targetByAbbr.get(abbr) ?? Infinity; const next = Math.min(cur + 1, cap); if (next !== cur) setCount(abbr, next); } // --- 3) Animation helpers --- const curved = !!lineCurved; const cadence = +dogInterval; const isInto = dogTrips.isInto; const arc = (ax, ay, bx, by) => { if (!curved) return `M${ax},${ay} L${bx},${by}`; const mx = (ax + bx) / 2, my = (ay + by) / 2, dx = bx - ax, dy = by - ay, k = 0.15, nx = -dy, ny = dx; return `M${ax},${ay} Q${mx + k * nx},${my + k * ny} ${bx},${by}`; }; const gAnim = svg.append("g").attr("class", "anim"); const endTransition = (sel) => new Promise((res) => sel.on("end interrupt", res)); let aborted = false; invalidation.then(() => { aborted = true; }); // --- 4) Async loop: run rows, cap counts, then reset & loop again --- (async () => { const rows = dogTrips.rows; if (!rows.length) { svg .append("text") .attr("x", 12) .attr("y", 42) .attr("fill", "#ef4444") .attr("font-weight", 600) .text("No dog rows for this selection."); return; } while (!aborted) { resetAllCounts(); // reset at start of each cycle for (let i = 0; i < rows.length && !aborted; i++) { const r = rows[i]; const otherAbbr = isInto ? r.from : r.to; const other = nodeByAbbr.get(otherAbbr); if (!other) { await sleep(cadence); continue; } const start = isInto ? [other.x, other.y] : [sel.x, sel.y]; const end = isInto ? [sel.x, sel.y] : [other.x, other.y]; if (Math.hypot(end[0] - start[0], end[1] - start[1]) < 0.5) { await sleep(cadence); continue; } const guide = gAnim .append("path") .attr("d", arc(start[0], start[1], end[0], end[1])) .attr("fill", "none") .attr("stroke", "none"); const name = String(r.name || "").trim() || "(unknown)"; const short = name.length > 24 ? name.slice(0, 21) + "…" : name; const glyph = gAnim.append("g").attr("class", "dog-runner"); glyph .append("circle") .attr("r", 3.2) .attr("fill", "#111827") .attr("opacity", 0.9); glyph .append("text") .attr("y", -16) // fixed label position (no dogNameSize) .attr("text-anchor", "middle") .attr("font-size", 14) .attr("font-weight", 700) .attr("fill", "#111827") .text(short); const L = guide.node().getTotalLength(); if (!(L > 0 && isFinite(L))) { guide.remove(); glyph.remove(); await sleep(cadence); continue; } const t = d3 .select(glyph.node()) .transition() .duration(Math.max(900, cadence * 2)) .ease(d3.easeLinear) .attrTween("transform", () => (tt) => { const pt = guide.node().getPointAtLength(tt * L); return `translate(${pt.x},${pt.y})`; }); await endTransition(t); if (aborted) break; // Tick on arrival, capped at targets if (isInto) { incCapped(otherAbbr); incCapped(state); } else { incCapped(state); incCapped(otherAbbr); } glyph.transition().duration(180).style("opacity", 0).remove(); guide.remove(); await sleep(cadence); } // loop: cycle restarts with counts reset } })(); // Title svg .append("text") .attr("x", 12) .attr("y", 22) .attr("fill", "#6b7280") .attr("font-weight", 600) .text( `${isInto ? "Imports →" : "From"} ${state} (dogs identified: ${ dogTrips.rows.length }; partner states: ${numStates - 1})` ); return svg.node(); }31:Tb67,flowMap = { const { states, path, stateCentroidByAbbr, rowsOut } = prepped; const W = 980, H = 610; // Pick the correct flow set for the current mode // - Into state: flows ending at `state` (imports) // - Out of state: flows starting at `state` (exports) const rows = flowMode === "Into state" ? rowsOut.filter((d) => d.to === state) // other → state : rowsOut.filter((d) => d.from === state); // state → other // Aggregate by (from, to) const pairs = d3 .rollups( rows, (v) => d3.sum(v, (d) => d.count), (d) => d.from, (d) => d.to ) .flatMap(([from, arr]) => arr.map(([to, value]) => ({ from, to, value }))) .filter( (d) => stateCentroidByAbbr.has(d.from) && stateCentroidByAbbr.has(d.to) ) .sort((a, b) => d3.descending(a.value, b.value)); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]); // Basemap svg .append("g") .selectAll("path") .data(states.features) .join("path") .attr("d", path) .attr("fill", "#0d1420") .attr("stroke", "#223048"); if (!pairs.length) { svg .append("text") .attr("x", 16) .attr("y", 28) .attr("fill", "#e5e7eb") .attr("font-size", 14) .text( flowMode === "Into state" ? `No imports into ${state} in this dataset.` : `No exports from ${state} in this dataset.` ); return svg.node(); } const maxV = d3.max(pairs, (d) => d.value) || 1; const strokeWidth = d3.scaleSqrt().domain([0, maxV]).range([0.8, 7]); const lineColor = flowMode === "Into state" ? "#60a5fa" : "#fb923c"; function arcPath(a, b) { const mid = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2 - 28]; return `M${a[0]},${a[1]} Q${mid[0]},${mid[1]} ${b[0]},${b[1]}`; } // Draw flows svg .append("g") .selectAll("path") .data(pairs) .join("path") .attr("d", (d) => arcPath(stateCentroidByAbbr.get(d.from), stateCentroidByAbbr.get(d.to)) ) .attr("fill", "none") .attr("stroke", lineColor) .attr("stroke-opacity", 0.9) .attr("stroke-width", (d) => strokeWidth(d.value)); // Highlight selected state const sel = stateCentroidByAbbr.get(state); if (sel) { svg .append("circle") .attr("cx", sel[0]) .attr("cy", sel[1]) .attr("r", 9) .attr("fill", lineColor) .attr("stroke", "#111827") .attr("stroke-width", 1.5); svg .append("text") .attr("x", sel[0] + 10) .attr("y", sel[1] - 10) .attr("fill", "#cbd5e1") .attr("font-weight", 600) .text(state); } // Title svg .append("text") .attr("x", 16) .attr("y", 20) .attr("fill", "#e5e7eb") .attr("font-size", 13) .attr("font-weight", 600) .text( flowMode === "Into state" ? `Imports into ${state}` : `Exports from ${state}` ); return svg.node(); }32:T781,prepped = { // --- 1) Base flows from the raw data --- // Treat foundStateAbb as origin, contact_state as destination. // If your semantics are the opposite, swap these two lines. const base = outstate .map((r) => ({ origin: String(r.foundStateAbb ?? "") .trim() .toUpperCase(), dest: String(r.contact_state ?? "") .trim() .toUpperCase(), count: 1 })) .filter((d) => d.origin && d.dest && d.origin !== d.dest); // drop missing or same-state // --- 2) Build imports and exports by flipping from/to --- // Exports: origin → dest (dogs leaving origin for another state) const rowsOut = base.map(d => ({ from: d.origin, to: d.dest, count: d.count })); // Imports: dest → origin (dogs arriving *into* origin from other states) // Note the flip: from = dest, to = origin const rowsIn = base.map(d => ({ from: d.dest, to: d.origin, count: d.count })); // --- 3) US map geometry as before --- const states = topojson.feature(us, us.objects.states); const projection = d3.geoAlbersUsa().fitSize([980, 610], states); const path = d3.geoPath(projection); // FIPS -> USPS const idToPostal = new Map(stateCodes.map(d => [+d.id, d.code])); // USPS -> feature + centroid const abbrToFeature = new Map(); const stateCentroidByAbbr = new Map(); for (const f of states.features) { const abbr = idToPostal.get(+f.id); if (!abbr) continue; abbrToFeature.set(abbr, f); stateCentroidByAbbr.set(abbr, path.centroid(f)); } // Dropdown options: any state that appears in either from/to const abbrs = [ ...new Set( base .flatMap(d => [d.origin, d.dest]) .filter(a => abbrToFeature.has(a)) ) ].sort(); return { base, rowsIn, rowsOut, states, projection, path, abbrToFeature, stateCentroidByAbbr, abbrs }; } 33:T493,stateColorLegend = { const W = 200, H = 44; const { scale, maxV, fmt } = stateColor; // build a horizontal gradient const canvas = document.createElement("canvas"); canvas.width = W; canvas.height = 1; const ctx = canvas.getContext("2d"); for (let x = 0; x < W; ++x) { const t = x / (W - 1); ctx.fillStyle = scale(t * maxV); ctx.fillRect(x, 0, 1, 1); } const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]); svg .append("image") .attr("href", canvas.toDataURL()) .attr("x", 0) .attr("y", 8) .attr("width", W) .attr("height", 12); // labels svg .append("text") .attr("x", 0) .attr("y", 34) .attr("fill", "#6b7280") .attr("font-size", 10) .text("0"); svg .append("text") .attr("x", W) .attr("y", 34) .attr("fill", "#6b7280") .attr("font-size", 10) .attr("text-anchor", "end") .text(fmt(maxV)); svg .append("text") .attr("x", 0) .attr("y", 10) .attr("fill", "#6b7280") .attr("font-size", 11) .attr("font-weight", 600) .text(flowMode === "Into state" ? "Imports (count)" : "Exports (count)"); return svg.node(); }34:T11dd,scatter_pies3 = { // --- Data prep --- const data = outstate .filter((d) => d.size && d.age && d.sex) .filter((d) => d.contact_state === state); // use state control const width = 600; const height = 400; const margin = { top: 30, right: 30, bottom: 50, left: 60 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // --- Scales (categorical axes) --- const x = d3 .scalePoint() .domain( [...new Set(data.map((d) => d.size))].sort((a, b) => { return sizeOrder.indexOf(a) - sizeOrder.indexOf(b); }) ) .range([0, innerWidth]) .padding(0.5); const y = d3 .scalePoint() .domain( [...new Set(data.map((d) => d.age))].sort((a, b) => { return ageOrder.indexOf(a) - ageOrder.indexOf(b); }) ) .range([innerHeight, 0]) .padding(0.5); const color = d3 .scaleOrdinal() .domain([...new Set(data.map((d) => d.sex))]) .range(d3.schemeTableau10); // --- Axes --- g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(x)) .append("text") .attr("x", innerWidth / 2) .attr("y", 35) .attr("fill", "black") .attr("text-anchor", "middle") .text("Size"); g.append("g") .call(d3.axisLeft(y)) .append("text") .attr("x", -innerHeight / 2) .attr("y", -40) .attr("fill", "black") .attr("text-anchor", "middle") .attr("transform", "rotate(-90)") .text("Age"); // --- Group data by (size, age) and count by sex --- const groups = d3 .groups( data, (d) => d.size, (d) => d.age ) .flatMap(([size, byAge]) => byAge.map(([age, values]) => { const counts = d3.rollup( values, (v) => v.length, (d) => d.sex ); const slices = Array.from(counts, ([sex, count]) => ({ sex, count })); return { size, age, slices, total: d3.sum(slices, (d) => d.count) }; }) ); // If no data for this state, bail early with a message if (!groups.length) { svg .append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("text-anchor", "middle") .attr("fill", "#6b7280") .text(`No dogs for ${state} in this view.`); return svg.node(); } // --- Pie/arc generators for the mini pies --- const pie = d3 .pie() .value((d) => d.count) .sort(null); // radius scale based on total count per (size, age) const maxTotal = d3.max(groups, (d) => d.total) || 1; const radiusScale = d3.scaleSqrt().domain([1, maxTotal]).range([6, 24]); // min/max pie size in pixels // --- Tooltip --- const tooltip = d3 .select(DOM.element("div")) .style("position", "absolute") .style("background", "white") .style("border", "1px solid #ccc") .style("padding", "4px 6px") .style("border-radius", "4px") .style("font-size", "11px") .style("pointer-events", "none") .style("display", "none"); d3.select("body").append(() => tooltip.node()); // --- Draw pies at each (size, age) --- const pies = g .selectAll(".pie") .data(groups) .join("g") .attr("class", "pie") .attr("transform", (d) => `translate(${x(d.size)},${y(d.age)})`); // For each group, use a radius scaled by d.total pies.each(function (group) { const r = radiusScale(group.total); const arc = d3.arc().innerRadius(0).outerRadius(r); d3.select(this) .selectAll("path") .data(pie(group.slices)) .join("path") .attr("d", arc) .attr("fill", (d) => color(d.data.sex)) .attr("stroke", "white") .attr("stroke-width", 1); }); // --- Tooltip interactions on whole pies --- pies .on("mouseover", (event, d) => { const details = d.slices.map((s) => `${s.sex}: ${s.count}`).join("
"); tooltip .style("display", "block") .html( `Size: ${d.size}
` + `Age: ${d.age}
` + `Total: ${d.total}
` + details ); }) .on("mousemove", (event) => { tooltip .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 20 + "px"); }) .on("mouseout", () => tooltip.style("display", "none")); return svg.node(); }35:T11dd,scatter_pies2 = { // --- Data prep --- const data = outstate .filter((d) => d.size && d.age && d.sex) .filter((d) => d.foundStateAbb === state); // use state control const width = 600; const height = 400; const margin = { top: 30, right: 30, bottom: 50, left: 60 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // --- Scales (categorical axes) --- const x = d3 .scalePoint() .domain( [...new Set(data.map((d) => d.size))].sort((a, b) => { return sizeOrder.indexOf(a) - sizeOrder.indexOf(b); }) ) .range([0, innerWidth]) .padding(0.5); const y = d3 .scalePoint() .domain( [...new Set(data.map((d) => d.age))].sort((a, b) => { return ageOrder.indexOf(a) - ageOrder.indexOf(b); }) ) .range([innerHeight, 0]) .padding(0.5); const color = d3 .scaleOrdinal() .domain([...new Set(data.map((d) => d.sex))]) .range(d3.schemeTableau10); // --- Axes --- g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(x)) .append("text") .attr("x", innerWidth / 2) .attr("y", 35) .attr("fill", "black") .attr("text-anchor", "middle") .text("Size"); g.append("g") .call(d3.axisLeft(y)) .append("text") .attr("x", -innerHeight / 2) .attr("y", -40) .attr("fill", "black") .attr("text-anchor", "middle") .attr("transform", "rotate(-90)") .text("Age"); // --- Group data by (size, age) and count by sex --- const groups = d3 .groups( data, (d) => d.size, (d) => d.age ) .flatMap(([size, byAge]) => byAge.map(([age, values]) => { const counts = d3.rollup( values, (v) => v.length, (d) => d.sex ); const slices = Array.from(counts, ([sex, count]) => ({ sex, count })); return { size, age, slices, total: d3.sum(slices, (d) => d.count) }; }) ); // If no data for this state, bail early with a message if (!groups.length) { svg .append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("text-anchor", "middle") .attr("fill", "#6b7280") .text(`No dogs for ${state} in this view.`); return svg.node(); } // --- Pie/arc generators for the mini pies --- const pie = d3 .pie() .value((d) => d.count) .sort(null); // radius scale based on total count per (size, age) const maxTotal = d3.max(groups, (d) => d.total) || 1; const radiusScale = d3.scaleSqrt().domain([1, maxTotal]).range([6, 24]); // min/max pie size in pixels // --- Tooltip --- const tooltip = d3 .select(DOM.element("div")) .style("position", "absolute") .style("background", "white") .style("border", "1px solid #ccc") .style("padding", "4px 6px") .style("border-radius", "4px") .style("font-size", "11px") .style("pointer-events", "none") .style("display", "none"); d3.select("body").append(() => tooltip.node()); // --- Draw pies at each (size, age) --- const pies = g .selectAll(".pie") .data(groups) .join("g") .attr("class", "pie") .attr("transform", (d) => `translate(${x(d.size)},${y(d.age)})`); // For each group, use a radius scaled by d.total pies.each(function (group) { const r = radiusScale(group.total); const arc = d3.arc().innerRadius(0).outerRadius(r); d3.select(this) .selectAll("path") .data(pie(group.slices)) .join("path") .attr("d", arc) .attr("fill", (d) => color(d.data.sex)) .attr("stroke", "white") .attr("stroke-width", 1); }); // --- Tooltip interactions on whole pies --- pies .on("mouseover", (event, d) => { const details = d.slices.map((s) => `${s.sex}: ${s.count}`).join("
"); tooltip .style("display", "block") .html( `Size: ${d.size}
` + `Age: ${d.age}
` + `Total: ${d.total}
` + details ); }) .on("mousemove", (event) => { tooltip .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 20 + "px"); }) .on("mouseout", () => tooltip.style("display", "none")); return svg.node(); }36:Tf19,scatter_pies = { // --- Data prep --- const data = all_travel.filter((d) => d.size && d.age && d.sex); const width = 600; const height = 400; const margin = { top: 30, right: 30, bottom: 50, left: 60 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // --- Scales (categorical axes) --- const x = d3 .scalePoint() .domain( [...new Set(data.map((d) => d.size))].sort((a, b) => { return sizeOrder.indexOf(a) - sizeOrder.indexOf(b); }) ) .range([0, innerWidth]) .padding(0.5); const y = d3 .scalePoint() .domain( [...new Set(data.map((d) => d.age))].sort((a, b) => { return ageOrder.indexOf(a) - ageOrder.indexOf(b); }) ) .range([innerHeight, 0]) .padding(0.5); const color = d3 .scaleOrdinal() .domain([...new Set(data.map((d) => d.sex))]) .range(d3.schemeTableau10); // --- Axes --- g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(x)) .append("text") .attr("x", innerWidth / 2) .attr("y", 35) .attr("fill", "black") .attr("text-anchor", "middle") .text("Size"); g.append("g") .call(d3.axisLeft(y)) .append("text") .attr("x", -innerHeight / 2) .attr("y", -40) .attr("fill", "black") .attr("text-anchor", "middle") .attr("transform", "rotate(-90)") .text("Age"); // --- Group data by (size, age) and count by sex --- const groups = d3 .groups( data, (d) => d.size, (d) => d.age ) .flatMap(([size, byAge]) => byAge.map(([age, values]) => { const counts = d3.rollup( values, (v) => v.length, (d) => d.sex ); const slices = Array.from(counts, ([sex, count]) => ({ sex, count })); return { size, age, slices, total: d3.sum(slices, (d) => d.count) }; }) ); // --- Pie/arc generators for the mini pies --- const pie = d3 .pie() .value((d) => d.count) .sort(null); const radius = 12; // size of each mini pie const arc = d3.arc().innerRadius(0).outerRadius(radius); // --- Tooltip --- const tooltip = d3 .select(DOM.element("div")) .style("position", "absolute") .style("background", "white") .style("border", "1px solid #ccc") .style("padding", "4px 6px") .style("border-radius", "4px") .style("font-size", "11px") .style("pointer-events", "none") .style("display", "none"); d3.select("body").append(() => tooltip.node()); // --- Draw pies at each (size, age) --- const pies = g .selectAll(".pie") .data(groups) .join("g") .attr("class", "pie") .attr("transform", (d) => `translate(${x(d.size)},${y(d.age)})`); pies .selectAll("path") .data((d) => pie(d.slices)) .join("path") .attr("d", arc) .attr("fill", (d) => color(d.data.sex)) .attr("stroke", "white") .attr("stroke-width", 1); // --- Tooltip interactions on whole pies --- pies .on("mouseover", (event, d) => { const details = d.slices.map((s) => `${s.sex}: ${s.count}`).join("
"); tooltip .style("display", "block") .html( `Size: ${d.size}
` + `Age: ${d.age}
` + `Total: ${d.total}
` + details ); }) .on("mousemove", (event) => { tooltip .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 20 + "px"); }) .on("mouseout", () => tooltip.style("display", "none")); return svg.node(); }37:Tc5c,hist_instate_by_org = { // --- Data prep: filter by currently selected state --- const data = instate .filter((d) => d.org_id) // ensure org_id exists .filter((d) => d.contact_state === state); // <-- use your state column here // If your instate state column is different, e.g. d.foundStateAbb, change this line. // If there are no rows for this state, show a friendly message. const svg = d3.create("svg"); const width = 800; const height = 400; svg.attr("width", width).attr("height", height); if (!data.length) { svg .append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("text-anchor", "middle") .attr("fill", "#6b7280") .attr("font-size", 14) .text(`No in-state records for ${state}.`); return svg.node(); } // --- Aggregate: count rows per org_id --- const counts = d3 .rollups( data, (v) => v.length, (d) => d.org_id ) .map(([org_id, count]) => ({ org_id, count })) .sort((a, b) => d3.descending(a.count, b.count)); // Optionally limit to top N orgs for readability: const topN = 25; const display = counts.slice(0, topN); const margin = { top: 30, right: 20, bottom: 100, left: 60 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; svg.attr("viewBox", [0, 0, width, height]); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // --- Scales --- const x = d3 .scaleBand() .domain(display.map((d) => d.org_id)) .range([0, innerWidth]) .padding(0.2); const y = d3 .scaleLinear() .domain([0, d3.max(display, (d) => d.count) || 1]) .nice() .range([innerHeight, 0]); // --- Axes --- g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("text-anchor", "end") .attr("transform", "rotate(-45)") .attr("dx", "-0.5em") .attr("dy", "0.25em"); g.append("g").call(d3.axisLeft(y)); // Axis labels g.append("text") .attr("x", innerWidth / 2) .attr("y", innerHeight + 70) .attr("text-anchor", "middle") .attr("fill", "#111827") .attr("font-size", 12) .text( `Organization (top ${Math.min( topN, counts.length )} by in-state adoptions)` ); g.append("text") .attr("x", -innerHeight / 2) .attr("y", -40) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .attr("fill", "#111827") .attr("font-size", 12) .text("Number of dogs"); // Title g.append("text") .attr("x", innerWidth / 2) .attr("y", -10) .attr("text-anchor", "middle") .attr("fill", "#111827") .attr("font-size", 14) .attr("font-weight", 600) .text(`In-state dogs by Shelter ID (${state})`); // --- Bars --- g.selectAll("rect") .data(display) .join("rect") .attr("x", (d) => x(d.org_id)) .attr("y", (d) => y(d.count)) .attr("width", x.bandwidth()) .attr("height", (d) => innerHeight - y(d.count)) .attr("fill", "#60a5fa"); return svg.node(); }38:T11dc,scatter_pies4 = { // --- Data prep --- const data = instate .filter((d) => d.size && d.age && d.sex) .filter((d) => d.foundStateAbb === state); // use state control const width = 600; const height = 400; const margin = { top: 30, right: 30, bottom: 50, left: 60 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // --- Scales (categorical axes) --- const x = d3 .scalePoint() .domain( [...new Set(data.map((d) => d.size))].sort((a, b) => { return sizeOrder.indexOf(a) - sizeOrder.indexOf(b); }) ) .range([0, innerWidth]) .padding(0.5); const y = d3 .scalePoint() .domain( [...new Set(data.map((d) => d.age))].sort((a, b) => { return ageOrder.indexOf(a) - ageOrder.indexOf(b); }) ) .range([innerHeight, 0]) .padding(0.5); const color = d3 .scaleOrdinal() .domain([...new Set(data.map((d) => d.sex))]) .range(d3.schemeTableau10); // --- Axes --- g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(x)) .append("text") .attr("x", innerWidth / 2) .attr("y", 35) .attr("fill", "black") .attr("text-anchor", "middle") .text("Size"); g.append("g") .call(d3.axisLeft(y)) .append("text") .attr("x", -innerHeight / 2) .attr("y", -40) .attr("fill", "black") .attr("text-anchor", "middle") .attr("transform", "rotate(-90)") .text("Age"); // --- Group data by (size, age) and count by sex --- const groups = d3 .groups( data, (d) => d.size, (d) => d.age ) .flatMap(([size, byAge]) => byAge.map(([age, values]) => { const counts = d3.rollup( values, (v) => v.length, (d) => d.sex ); const slices = Array.from(counts, ([sex, count]) => ({ sex, count })); return { size, age, slices, total: d3.sum(slices, (d) => d.count) }; }) ); // If no data for this state, bail early with a message if (!groups.length) { svg .append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("text-anchor", "middle") .attr("fill", "#6b7280") .text(`No dogs for ${state} in this view.`); return svg.node(); } // --- Pie/arc generators for the mini pies --- const pie = d3 .pie() .value((d) => d.count) .sort(null); // radius scale based on total count per (size, age) const maxTotal = d3.max(groups, (d) => d.total) || 1; const radiusScale = d3.scaleSqrt().domain([1, maxTotal]).range([6, 24]); // min/max pie size in pixels // --- Tooltip --- const tooltip = d3 .select(DOM.element("div")) .style("position", "absolute") .style("background", "white") .style("border", "1px solid #ccc") .style("padding", "4px 6px") .style("border-radius", "4px") .style("font-size", "11px") .style("pointer-events", "none") .style("display", "none"); d3.select("body").append(() => tooltip.node()); // --- Draw pies at each (size, age) --- const pies = g .selectAll(".pie") .data(groups) .join("g") .attr("class", "pie") .attr("transform", (d) => `translate(${x(d.size)},${y(d.age)})`); // For each group, use a radius scaled by d.total pies.each(function (group) { const r = radiusScale(group.total); const arc = d3.arc().innerRadius(0).outerRadius(r); d3.select(this) .selectAll("path") .data(pie(group.slices)) .join("path") .attr("d", arc) .attr("fill", (d) => color(d.data.sex)) .attr("stroke", "white") .attr("stroke-width", 1); }); // --- Tooltip interactions on whole pies --- pies .on("mouseover", (event, d) => { const details = d.slices.map((s) => `${s.sex}: ${s.count}`).join("
"); tooltip .style("display", "block") .html( `Size: ${d.size}
` + `Age: ${d.age}
` + `Total: ${d.total}
` + details ); }) .on("mousemove", (event) => { tooltip .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 20 + "px"); }) .on("mouseout", () => tooltip.style("display", "none")); return svg.node(); }39:T17aa,// d3TableWithControls(data, { searchKey, pageSizes, pageSize }) d3TableWithControls = ( data, { searchKey = "name", pageSizes = [10, 25, 50, 100], pageSize = 25 } = {} ) => { // --- make sure we include ALL columns seen in any row --- const columns = Array.from( data.reduce((s, r) => { for (const k of Object.keys(r)) s.add(k); return s; }, new Set()) ); let q = "", sortCol = null, sortAsc = true; let page = 0, ps = pageSize; // root + styles const root = d3 .create("div") .attr("class", "d3-table-wrap") .style("font", "11px system-ui, sans-serif"); root.append("style").text(` .d3-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 8px} .d3-spacer{flex:1} .d3-btn,.d3-input,.d3-select{padding:3px 6px;border:1px solid #ccc;border-radius:6px;background:#fff;font-size:11px} .d3-btn[disabled]{opacity:.5;cursor:default} .scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch;} .d3-table{border-collapse:collapse;width:100%; table-layout:auto;} .d3-table thead th{position:sticky; top:0; background:#fff; border-bottom:1px solid #000; text-align:left; padding:2px 6px; user-select:none; cursor:pointer; white-space:nowrap; line-height:1.2} .d3-table tbody td{border-bottom:1px solid #eee; padding:2px 6px; line-height:1.2; white-space:nowrap;} .badge{font-size:10px;padding:1px 6px;border:1px solid #ddd;border-radius:999px;background:#f8f8f8} `); // controls (top) const ctrTop = root.append("div").attr("class", "d3-controls"); ctrTop.append("label").text(`Search ${searchKey}:`); const searchInput = ctrTop .append("input") .attr("type", "text") .attr("class", "d3-input") .attr("placeholder", `Search ${searchKey}...`) .on("input", function () { q = this.value.toLowerCase(); page = 0; update(); }); ctrTop.append("span").text("Rows:"); const sizeSel = ctrTop .append("select") .attr("class", "d3-select") .on("change", () => { ps = +sizeSel.property("value"); page = 0; update(); }); sizeSel .selectAll("option") .data(pageSizes) .join("option") .attr("value", (d) => d) .property("selected", (d) => d === ps) .text((d) => d); ctrTop.append("span").attr("class", "d3-spacer"); const prevTop = ctrTop .append("button") .attr("class", "d3-btn") .text("◀ Prev") .on("click", () => { page = Math.max(0, page - 1); update(); }); const nextTop = ctrTop .append("button") .attr("class", "d3-btn") .text("Next ▶") .on("click", () => { page = page + 1; update(); }); const infoTop = ctrTop.append("span").attr("class", "badge"); // scrollable container + table const scroller = root.append("div").attr("class", "scroll-x"); const table = scroller.append("table").attr("class", "d3-table"); const thead = table.append("thead"); const tbody = table.append("tbody"); const headRow = thead.append("tr"); const th = headRow .selectAll("th") .data(columns) .join("th") .on("click", (event, col) => { if (sortCol === col) sortAsc = !sortAsc; else { sortCol = col; sortAsc = true; } page = 0; update(); }) .each(function (c) { const s = d3.select(this); s.append("span").text(c); s.append("span") .attr("class", "sort") .style("margin-left", "6px") .text("↕"); }); // controls (bottom) const ctrBot = root.append("div").attr("class", "d3-controls"); ctrBot.append("span").attr("class", "d3-spacer"); const prevBot = ctrBot .append("button") .attr("class", "d3-btn") .text("◀ Prev") .on("click", () => { page = Math.max(0, page - 1); update(); }); const nextBot = ctrBot .append("button") .attr("class", "d3-btn") .text("Next ▶") .on("click", () => { page = page + 1; update(); }); const infoBot = ctrBot.append("span").attr("class", "badge"); // helpers const cmp = (a, b) => { if (a == null && b == null) return 0; if (a == null) return 1; if (b == null) return -1; if (a instanceof Date && b instanceof Date) return d3.ascending(+a, +b); if (typeof a === "number" && typeof b === "number") return d3.ascending(a, b); return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: "base" }); }; const currentRows = () => { let rows = data; if (q) rows = rows.filter((d) => String(d[searchKey] ?? "") .toLowerCase() .includes(q) ); if (sortCol) rows = rows .slice() .sort((a, b) => cmp(a[sortCol], b[sortCol]) * (sortAsc ? 1 : -1)); return rows; }; function update() { const rows = currentRows(); const pages = Math.max(1, Math.ceil(rows.length / ps)); page = Math.min(page, pages - 1); const start = page * ps, end = Math.min(start + ps, rows.length); const pageRows = rows.slice(start, end); // header indicators thead.selectAll(".sort").text((_, i, nodes) => { const col = columns[nodes[i].parentNode.cellIndex]; if (col !== sortCol) return "↕"; return sortAsc ? "▲" : "▼"; }); // body const tr = tbody.selectAll("tr").data(pageRows).join("tr"); tr.selectAll("td") .data((d) => columns.map((c) => d[c])) .join("td") .text((v) => v ?? ""); // controls prevTop.attr("disabled", page <= 0 ? true : null); nextTop.attr("disabled", page >= pages - 1 ? true : null); prevBot.attr("disabled", page <= 0 ? true : null); nextBot.attr("disabled", page >= pages - 1 ? true : null); infoTop.text(`${rows.length ? start + 1 : 0}–${end} of ${rows.length}`); infoBot.text( `Page ${rows.length ? page + 1 : 0}/${pages} • ${ rows.length ? start + 1 : 0 }–${end} of ${rows.length}` ); } update(); return root.node(); }3a:[{"id":"e3618714adafe408a6cabc88e67241d9afd239197861e147c3d7447146f53e78828ccb9aa3ab93d85a3a3f78b033e96c42a7e951a26d46569ce3ecafd515401b","href":"https://static.observableusercontent.com/files/e3618714adafe408a6cabc88e67241d9afd239197861e147c3d7447146f53e78828ccb9aa3ab93d85a3a3f78b033e96c42a7e951a26d46569ce3ecafd515401b","name":"instate_travel.csv","type":"text/csv","lastModified":1762444738644.463,"size":3588392},{"id":"c681ff35ea2a8a94b21f48d733c6170b636879c250d2e5532891f3bb2cc3a94be1dbda60738caf18b7b04300fcff1b6a3d2d727e70660c65c6f6011b3ddf22a8","href":"https://static.observableusercontent.com/files/c681ff35ea2a8a94b21f48d733c6170b636879c250d2e5532891f3bb2cc3a94be1dbda60738caf18b7b04300fcff1b6a3d2d727e70660c65c6f6011b3ddf22a8","name":"outstate_travel.csv","type":"text/csv","lastModified":1762444739095.092,"size":8129347},{"id":"d1ee28a0ce503162d7d48c3da7d615caca243fbebfd0b437788fb7e4a1bd07bf3b3f368af72e8652ecb8a0a260e6c67498f6072bc4fd9b0b661aa78b7fd4f839","href":"https://static.observableusercontent.com/files/d1ee28a0ce503162d7d48c3da7d615caca243fbebfd0b437788fb7e4a1bd07bf3b3f368af72e8652ecb8a0a260e6c67498f6072bc4fd9b0b661aa78b7fd4f839","name":"all_travel.csv","type":"text/csv","lastModified":1762444739712.055,"size":11717272}] 2d:{"title":"Final Project Draft Dashboard","cells":[{"id":0,"value":"# Final Project Draft Dashboard","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"# Map","pinned":false,"hidden":false,"mode":"md"},{"id":384,"value":"sleep = (ms) => new Promise((r) => setTimeout(r, ms))","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"// Uppercase, trim, return 2-letter A–Z code or null\nnormAbbr = (s) => {\n if (s == null) return null;\n const up = String(s).trim().toUpperCase();\n return /^[A-Z]{2}$/.test(up) ? up : null;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"// Cross-state only (from != to) using outstate\noutstatePrepared = outstate\n .map((r) => ({\n name: (r.name ?? \"\").toString().trim() || \"(unknown)\",\n from: normAbbr(r.foundStateAbb),\n to: normAbbr(r.contact_state)\n }))\n .filter((d) => d.from && d.to && d.from !== d.to)","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"dogTrips = {\n const s = normAbbr(state);\n const isInto = flowMode === \"Into state\";\n\n // Imports = rows whose destination is the selected state\n // Exports = rows whose origin is the selected state\n const rows = isInto\n ? outstatePrepared.filter((d) => d.to === s)\n : outstatePrepared.filter((d) => d.from === s);\n\n // group by the partner end (origin for Imports, destination for Exports)\n const byPartner = d3.group(rows, (d) => (isInto ? d.from : d.to));\n\n return { rows, byPartner, isInto };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"viewof maxDogsPerLink = Inputs.range([10, 500], {\n label: \"Max dogs to animate per route\",\n step: 10,\n value: 200\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"viewof dogInterval = Inputs.range([80, 1000], {\n label: \"Dog cadence (ms per dog)\",\n step: 20,\n value: 180\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"stateColor = {\n const maxV = d3.max(partnersData, (d) => d.value) || 1;\n // Use Blues for \"Into state\", Oranges for \"Out of state\"\n const scale = d3\n .scaleSequential(\n flowMode === \"Into state\" ? d3.interpolateBlues : d3.interpolateOranges\n )\n .domain([0, maxV]);\n const fmt = d3.format(\",\");\n return { scale, maxV, fmt };\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"viewof lineCurved = Inputs.toggle({ label: \"Curved lines\", value: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"viewof replayAnim = Inputs.button(\"Replay lines\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"viewof lineDuration = Inputs.range([300, 6000], {\n label: \"Line animation (ms)\",\n step: 100,\n value: 1500\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"viewof ringRadius = Inputs.range([120, 500], {\n label: \"Ring radius (px)\",\n step: 10,\n value: 260\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"viewof placementMode = Inputs.radio([\"Geographic ring\", \"Uniform ring\"], {\n label: \"Partner arrangement\",\n value: \"Geographic ring\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"sizeOrder = [\"Small\", \"Medium\", \"Large\", \"Extra Large\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"ageOrder = [\"Baby\", \"Young\", \"Adult\", \"Senior\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"viewof scalePartner = Inputs.range([1.0, 1.2], {\n label: \"Partner scale\",\n step: 0.01,\n value: 1.08\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"viewof spacing = Inputs.range([2, 40], {\n label: \"Partner spacing (px)\",\n step: 1,\n value: 14\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"partnersData = {\n // Use your rowsOut (foundStateAbb -> contact_state) as the canonical flow table\n // Into state = sum by origin (from) where to == state\n // Out of state= sum by destination (to) where from == state\n const rows =\n flowMode === \"Into state\"\n ? prepped.rowsOut.filter((d) => d.to === state)\n : prepped.rowsOut.filter((d) => d.from === state);\n\n // Roll up to partner state -> count\n const isInto = flowMode === \"Into state\";\n const rolled = d3\n .rollups(\n rows,\n (v) => d3.sum(v, (d) => d.count ?? 1),\n (d) => (isInto ? d.from : d.to)\n )\n .map(([abbr, value]) => ({ abbr, value }))\n .sort((a, b) => d3.descending(a.value, b.value));\n\n // filter to only the states we can draw\n const partners = rolled.filter((r) => prepped.abbrToFeature.has(r.abbr));\n\n return partners;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"viewof flowMode = Inputs.radio([\"Into state\", \"Out of state\"], {\n label: \"Flow direction\",\n value: \"Into state\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"viewof state = Inputs.select(prepped.abbrs, {\n label: \"State\",\n value: prepped.abbrs[0]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":445,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"viewof curved = Inputs.toggle({ label: \"Curved arcs\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"prepped.abbrToFeature.has(\"NC\") // should be true if NC is in the TopoJSON","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"[instate.length, outstate.length] // should show two numbers (row counts)","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"# Inner State","pinned":false,"hidden":false,"mode":"md"},{"id":389,"value":"# Scatter","pinned":false,"hidden":false,"mode":"md"},{"id":470,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":466,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":483,"value":"# Inner State","pinned":false,"hidden":false,"mode":"md"},{"id":485,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"# Table","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"table = d3TableWithControls(all_travel, {\n searchKey: \"name\", // filter by 'name' column\n pageSize: 25 // default page size\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"# Data Import","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"all_travel = FileAttachment(\"all_travel.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"instate = FileAttachment(\"instate_travel.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"outstate = FileAttachment(\"outstate_travel.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"// Maps each state's FIPS id to its USPS code (e.g., 37 -> \"NC\")\nstateCodes = await d3.tsv(\n \"https://gist.githubusercontent.com/mbostock/4090846/raw/us-state-names.tsv\",\n (d) => ({ id: +d.id, code: d.code })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"us = await d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"# Libraries ","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"import { Inputs } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}