2c:null 2d:["$","title",null,{"children":"IA commentary July 2023 | Yonsei University | Observable"}] 32:T2289,chart = { const raw = await FileAttachment("asylum.csv").csv(); const waitOrder = [ "Under 6 months", "6 months to under 1 year", "1 year to under 1.5 years", "1.5 years to under 2 years", "2 years to under 2.5 years", "2.5 years to under 3 years", "3 years or more" ]; const nationalities = Array.from(new Set(raw.map(d => d.Nationality))).sort(d3.ascending); const outcomes = Array.from(new Set(raw.map(d => d.Outcome))).sort(d3.ascending); const periods = Array.from(new Set(raw.map(d => d["Period in which decisions made"]))).sort(d3.ascending); function createMultiSelect(labelText, options, defaultSelected = options) { const wrapper = html`

`; const label = html`

${labelText}

`; const button = html``; const arrow = html`▼`; button.appendChild(arrow); const panel = html``; const allRow = html` (All) `; panel.appendChild(allRow); const allBox = allRow.querySelector("input"); const rows = options.map(option => { const row = html` ${option} `; panel.appendChild(row); return row.querySelector("input"); }); function getSelected() { return rows.filter(input => input.checked).map(input => input.value); } function setButtonText(text) { while (button.firstChild && button.firstChild !== arrow) { button.removeChild(button.firstChild); } button.insertBefore(document.createTextNode(text), arrow); } function updateButtonText() { const selected = getSelected(); if (selected.length === options.length) setButtonText("(All)"); else if (selected.length === 0) setButtonText("(None)"); else if (selected.length === 1) setButtonText(selected[0]); else setButtonText(`(${selected.length} selected)`); } function syncAllBox() { allBox.checked = getSelected().length === options.length; } rows.forEach(input => { input.checked = defaultSelected.includes(input.value); input.addEventListener("input", () => { syncAllBox(); updateButtonText(); wrapper.dispatchEvent(new CustomEvent("input")); }); }); allBox.checked = defaultSelected.length === options.length; allBox.addEventListener("input", e => { const checked = e.target.checked; rows.forEach(input => input.checked = checked); updateButtonText(); wrapper.dispatchEvent(new CustomEvent("input")); }); button.addEventListener("click", e => { e.stopPropagation(); panel.style.display = panel.style.display === "none" ? "block" : "none"; }); document.addEventListener("click", e => { if (!wrapper.contains(e.target)) panel.style.display = "none"; }); wrapper.getSelected = getSelected; updateButtonText(); wrapper.append(label, button, panel); return wrapper; } const nationalitySelect = createMultiSelect("Nationality", nationalities, nationalities); const outcomeSelect = createMultiSelect("Outcome", outcomes, outcomes); const periodSelect = createMultiSelect("Period in which decisions made", periods, periods); const controls = html`

`; controls.append(nationalitySelect, outcomeSelect, periodSelect); const container = html`

`; const chartHolder = html`

`; container.append(controls, chartHolder); const width = 900; const height = 470; const marginTop = 30; const marginRight = 20; const marginBottom = 120; const marginLeft = 90; function renderMessage(svg, message) { svg.append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("text-anchor", "middle") .attr("fill", "#555") .style("font-size", "14px") .text(message); } function render() { const selectedNationalities = nationalitySelect.getSelected(); const selectedOutcomes = outcomeSelect.getSelected(); const selectedPeriods = periodSelect.getSelected(); chartHolder.innerHTML = ""; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto") .style("font", "12px sans-serif"); if ( selectedNationalities.length === 0 || selectedOutcomes.length === 0 || selectedPeriods.length === 0 ) { renderMessage(svg, "No data selected. Please choose at least one option in each dropdown."); chartHolder.append(svg.node()); return; } const filtered = raw.filter(d => selectedNationalities.includes(d.Nationality) && selectedOutcomes.includes(d.Outcome) && selectedPeriods.includes(d["Period in which decisions made"]) ); const grouped = Array.from( d3.rollup( filtered, v => d3.sum(v, d => +d.Count), d => d["Wait Time"] ), ([waitTime, count]) => ({ waitTime, count }) ); const countsByWait = new Map(grouped.map(d => [d.waitTime, d.count])); const data = waitOrder.map(waitTime => ({ waitTime, count: countsByWait.get(waitTime) || 0 })); const total = d3.sum(data, d => d.count); if (total === 0) { renderMessage(svg, "No matching data for the selected filters."); chartHolder.append(svg.node()); return; } const chartData = data.map(d => ({ waitTime: d.waitTime, share: d.count / total, count: d.count })); const x = d3.scaleBand() .domain(chartData.map(d => d.waitTime)) .range([marginLeft, width - marginRight]) .padding(0.2); const y = d3.scaleLinear() .domain([0, d3.max(chartData, d => d.share)]) .nice() .range([height - marginBottom, marginTop]); svg.append("g") .selectAll("rect") .data(chartData) .join("rect") .attr("x", d => x(d.waitTime)) .attr("y", d => y(d.share)) .attr("width", x.bandwidth()) .attr("height", d => y(0) - y(d.share)) .attr("fill", "#4e79a7"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call( d3.axisLeft(y) .ticks(6) .tickFormat(d3.format(".0%")) ) .call(g => g.select(".domain").remove()); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x)) .call(g => g.selectAll("text") .attr("transform", "rotate(-35)") .style("text-anchor", "end")) .call(g => g.select(".domain").remove()); svg.append("text") .attr("x", -height / 2) .attr("y", 20) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .attr("fill", "black") .style("font-size", "14px") .text("Share of applicants"); svg.append("text") .attr("x", width / 2) .attr("y", height - 20) .attr("text-anchor", "middle") .attr("fill", "black") .style("font-size", "14px") .text("Wait time"); svg.append("g") .selectAll("text.bar-label") .data(chartData) .join("text") .attr("x", d => x(d.waitTime) + x.bandwidth() / 2) .attr("y", d => y(d.share) - 6) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "black") .text(d => d.share > 0 ? d3.format(".1%")(d.share) : ""); chartHolder.append(svg.node()); } nationalitySelect.addEventListener("input", render); outcomeSelect.addEventListener("input", render); periodSelect.addEventListener("input", render); render(); return container; }33:[{"id":"69f09c9bfc20a238296ee6ef0c63eb805d711b43d7e39c930cba7712d6dadab00088f4178a4b58110e45cd876be74a3ce0fa8951ba80091299ae346407274c29","href":"https://static.observableusercontent.com/files/69f09c9bfc20a238296ee6ef0c63eb805d711b43d7e39c930cba7712d6dadab00088f4178a4b58110e45cd876be74a3ce0fa8951ba80091299ae346407274c29","name":"asylum.csv","type":"text/csv","lastModified":1773809808832.611,"size":1007554}] 30:{"id":"641fe2058221d34b","slug":null,"title":"IA commentary July 2023","thumbnail":"3a27b89ed7e876bc57570fd95deac98abdef714f4cf2a7919a74b8d4b4373a34","access_level":"public","create_time":"$D2026-03-18T04:15:02.289Z","update_time":"$D2026-03-18T05:14:46.393Z","view_time":null,"first_public_time":"$D2026-03-18T05:10:34.508Z","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":1,"collection":null,"type":"notebook","body":{"title":"IA commentary July 2023","cells":[{"id":0,"value":"# IA commentary July 2023\nby Migration Observatory","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"## Wait time for an initial asylum decision, by outcome and nationality of applicant, for decisions made in 2021 (or other selected period)\nMain applicants only","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"Original Tableau Viz:\nhttps://public.tableau.com/app/profile/migobs/viz/IAcommentaryJuly2023/9","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"