2c:null 2d:["$","title",null,{"children":"Dropdown Box Reference | Yonsei University | Observable"}] 32:T11f5,dropdowns = { const container = html`

`; FileAttachment("asylum.csv").csv().then(raw => { 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); container.append(controls); }); return container; }33:[{"id":"69f09c9bfc20a238296ee6ef0c63eb805d711b43d7e39c930cba7712d6dadab00088f4178a4b58110e45cd876be74a3ce0fa8951ba80091299ae346407274c29","href":"https://static.observableusercontent.com/files/69f09c9bfc20a238296ee6ef0c63eb805d711b43d7e39c930cba7712d6dadab00088f4178a4b58110e45cd876be74a3ce0fa8951ba80091299ae346407274c29","name":"asylum.csv","type":"text/csv","lastModified":1773810380126.619,"size":1007554}] 30:{"id":"821c5dcc0ba4b9d8","slug":null,"title":"Dropdown Box Reference","thumbnail":"0a43a3d24ac7025f72d8e1afe5af06a8b70823f3e691daf26b76751b0db77e7d","access_level":"public","create_time":"$D2026-03-18T05:06:20.126Z","update_time":"$D2026-03-18T05:17:46.201Z","view_time":null,"first_public_time":"$D2026-03-18T05:10:56.885Z","has_unpublished_edits":null,"fork":{"id":"641fe2058221d34b","slug":null,"title":"IA commentary July 2023","owner":{"id":"6686209f2dacbb68","login":"yonsei-university","name":"Yonsei University"}},"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":32,"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":"Dropdown Box Reference","cells":[{"id":0,"value":"# Dropdown Box Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"