25:["$","title",null,{"children":"Song Comparison Tool | jisung | Observable"}] 4b:T2671,viewof songcomp = { const data = songs; const keyNames = ["C","C#","D","D#","E","F","F#","G","G#","A","A#","B"]; const fmtDuration = ms => { if (!ms) return ""; const s = Math.round(ms/1000); const m = Math.floor(s/60); const ss = String(s % 60).padStart(2,"0"); return `${m}:${ss}`; }; const toPct = v => v == null ? "" : Math.round(Number(v)*100); const fmtKey = (k, mode) => { if (k == null || k === "" || k === "-1") return "Unknown"; const p = keyNames[(Number(k)+12)%12] ?? "Unknown"; const m = Number(mode) === 1 ? "major" : "minor"; return `${p} ${m}`; }; const wrap = document.createElement("div"); wrap.style.fontFamily = "Inter, system-ui, sans-serif"; wrap.style.maxWidth = "980px"; wrap.style.margin = "10px auto 40px"; wrap.style.padding = "16px"; wrap.style.background = "#ffffff"; wrap.style.borderRadius = "12px"; wrap.style.boxShadow = "0 6px 28px rgba(12,18,31,0.08)"; wrap.style.minHeight = "480px"; const title = document.createElement("div"); title.innerHTML = `

Song Comparison

Search a track, then pick up to two songs.

`; wrap.appendChild(title); const searchWrap = document.createElement("div"); searchWrap.style.marginTop = "14px"; searchWrap.style.display = "flex"; searchWrap.style.alignItems = "flex-start"; searchWrap.style.gap = "12px"; wrap.appendChild(searchWrap); const searchBox = document.createElement("div"); searchBox.style.position = "relative"; searchBox.style.flex = "1"; searchWrap.appendChild(searchBox); const input = document.createElement("input"); input.placeholder = "Search track name or artist..."; input.style.width = "50%"; input.style.padding = "10px 12px"; input.style.border = "1px solid #e6eef6"; input.style.borderRadius = "10px"; input.style.fontSize = "14px"; input.style.outline = "none"; input.autocomplete = "off"; searchBox.appendChild(input); const suggBox = document.createElement("div"); Object.assign(suggBox.style, { position: "absolute", left: "0", right: "0", top: "44px", background: "#fff", borderRadius: "10px", boxShadow: "0 8px 20px rgba(9,30,66,0.08)", maxHeight: "300px", overflow: "auto", display: "none", padding: "6px", zIndex: "100" }); searchBox.appendChild(suggBox); const selected = [null, null]; const selectedWrap = document.createElement("div"); selectedWrap.style.display = "flex"; selectedWrap.style.flexDirection = "row"; selectedWrap.style.gap = "12px"; selectedWrap.style.minWidth = "260px"; searchWrap.appendChild(selectedWrap); function makeChip(i) { const chip = document.createElement("div"); chip.style.padding = "10px 12px"; chip.style.background = "#f8fafc"; chip.style.borderRadius = "10px"; chip.style.fontSize = "13px"; chip.style.color = "#0f1724"; chip.style.position = "relative"; chip.style.minWidth = "180px"; chip.innerHTML = `

Song ${i+1}

No song selected

`; const btn = document.createElement("button"); btn.textContent = "×"; btn.title = "Remove"; Object.assign(btn.style, { position: "absolute", right: "8px", top: "8px", border: "none", background: "transparent", cursor: "pointer", fontSize: "16px", color: "#94a3b8" }); btn.onclick = () => { selected[i] = null; refresh(); }; chip.appendChild(btn); selectedWrap.appendChild(chip); return chip; } const chipElems = [makeChip(0), makeChip(1)]; const hud = document.createElement("div"); hud.style.display = "grid"; hud.style.gridTemplateColumns = "1fr 1fr"; hud.style.gap = "14px"; hud.style.marginTop = "20px"; wrap.appendChild(hud); const left = document.createElement("div"); const right = document.createElement("div"); hud.appendChild(left); hud.appendChild(right); function buildCard(d) { const c = document.createElement("div"); Object.assign(c.style, { padding: "16px", borderRadius: "12px", background: "linear-gradient(180deg,#ffffff,#fbfdff)", boxShadow: "0 6px 18px rgba(11,20,40,0.06)", display: "flex", flexDirection: "column", gap: "10px", minHeight: "240px" }); const h = document.createElement("div"); h.style.display = "flex"; h.style.justifyContent = "space-between"; h.innerHTML = `

${d.track_name}

${d.artists}

${d.popularity}

Popularity

`; c.appendChild(h); const meta = document.createElement("div"); meta.style.display = "flex"; meta.style.gap = "10px"; meta.innerHTML = `

${fmtDuration(d.duration_ms)}

${String(d.explicit).toLowerCase()==="true" ? "Explicit" : "Clean"}

${fmtKey(d.key, d.mode)}

${d.track_genre ?? ""}

`; c.appendChild(meta); function stat(label, raw, pct=false) { const row = document.createElement("div"); row.style.display = "flex"; row.style.alignItems = "center"; row.style.gap = "10px"; const leftSide = document.createElement("div"); leftSide.style.width = "34%"; leftSide.style.fontSize = "12px"; leftSide.style.color = "#334155"; leftSide.textContent = label; const barOuter = document.createElement("div"); Object.assign(barOuter.style, { height: "8px", background: "#eef2f7", borderRadius: "6px", overflow: "hidden", flex: "1" }); const val = pct ? toPct(raw) : raw; const barInner = document.createElement("div"); barInner.style.width = `${Math.max(0, Math.min(val,100))}%`; barInner.style.height = "100%"; barInner.style.background = "linear-gradient(90deg,#06b6d4,#06a6e5)"; barOuter.appendChild(barInner); const value = document.createElement("div"); value.style.fontSize = "12px"; value.style.color = "#0b1220"; value.style.minWidth = "48px"; value.style.textAlign = "right"; value.textContent = pct ? toPct(raw) : raw; row.appendChild(leftSide); row.appendChild(barOuter); row.appendChild(value); c.appendChild(row); } stat("Danceability", d.danceability, true); stat("Energy", d.energy, true); stat("Speechiness", d.speechiness, true); stat("Acousticness", d.acousticness, true); stat("Instrumentalness", d.instrumentalness, true); stat("Liveness", d.liveness, true); stat("Valence", d.valence, true); stat("Tempo (BPM)", d.tempo ? Math.round(d.tempo/2) : 0); return c; } function refresh() { chipElems.forEach((chip,i)=>{ if (!selected[i]) { chip.children[0].textContent = `Song ${i+1}`; chip.children[1].textContent = `No song selected`; } else { chip.children[0].textContent = selected[i].track_name; chip.children[1].textContent = selected[i].artists; } }); left.innerHTML = ""; right.innerHTML = ""; if (selected[0]) left.appendChild(buildCard(selected[0])); if (selected[1]) right.appendChild(buildCard(selected[1])); } refresh(); input.addEventListener("input", () => { const q = input.value.trim().toLowerCase(); suggBox.innerHTML = ""; if (!q) { suggBox.style.display = "none"; return; } const matches = data.filter(d => d.track_name?.toLowerCase().includes(q) || d.artists?.toLowerCase().includes(q) ).slice(0,15); if (!matches.length) { const no = document.createElement("div"); no.textContent = "No matches"; no.style.padding = "8px"; no.style.color = "#9ca3af"; suggBox.appendChild(no); suggBox.style.display = "block"; return; } matches.forEach(m => { const el = document.createElement("div"); el.style.padding = "8px"; el.style.cursor = "pointer"; el.style.borderRadius = "8px"; el.style.display = "flex"; el.style.justifyContent = "space-between"; el.onmouseover = () => el.style.background = "#f1f5f9"; el.onmouseout = () => el.style.background = "transparent"; el.innerHTML = `

${m.track_name}

${m.artists}

${m.popularity}

`; el.onclick = () => { const empty = selected.findIndex(s=>!s); if (empty !== -1) selected[empty] = m; else selected[1] = m; input.value = ""; suggBox.style.display = "none"; refresh(); }; suggBox.appendChild(el); }); suggBox.style.display = "block"; }); document.addEventListener("click", e => { if (!searchBox.contains(e.target)) suggBox.style.display = "none"; }); return wrap; } 4c:[{"id":"d73ed1ea938eb4090c7b50a3ba55b920a2a40c02428af3f48205771dae22ebf8f2214e4f7cf49397fd7e2459ce74b0e49af88a158ae8b9772ce40a6993a042ca","href":"https://static.observableusercontent.com/files/d73ed1ea938eb4090c7b50a3ba55b920a2a40c02428af3f48205771dae22ebf8f2214e4f7cf49397fd7e2459ce74b0e49af88a158ae8b9772ce40a6993a042ca","name":"dataset.csv","type":"text/csv","lastModified":1763402187323.104,"size":20118244}] 47:{"id":"14b1f72f08df6f45","slug":"song-comparison-tool","title":"Song Comparison Tool","thumbnail":"3efa2309f6280bbc6025f8dd4796f3ffb328992120f81cf1dc72c8fd38415ca6","access_level":"public","create_time":"$D2025-11-17T04:23:50.855Z","update_time":"$D2025-12-09T07:53:14.864Z","view_time":null,"first_public_time":"$D2025-11-20T07:08:12.536Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8b99c2cd58e17de8","login":"jisung","name":"jisung","avatar_url":"https://avatars-next.observableusercontent.com/2d3650ea5779de329c32a4167cabcc9b08bf17d2c64818bf5ac119a660afd0d4","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":66,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bff10abea611863d","login":"jisunglee","name":"Jisung","avatar_url":"https://avatars-next.observableusercontent.com/de51d6c867a97fd81ca1a5d63e1a7e1a8b44e3af9a53f04321b0face49559ede","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"8b99c2cd58e17de8","login":"jisung","name":"jisung","avatar_url":"https://avatars-next.observableusercontent.com/2d3650ea5779de329c32a4167cabcc9b08bf17d2c64818bf5ac119a660afd0d4","tier":"starter_2024","role":"editor"},{"type":"individual","id":"bff10abea611863d","login":"jisunglee","name":"Jisung","avatar_url":"https://avatars-next.observableusercontent.com/de51d6c867a97fd81ca1a5d63e1a7e1a8b44e3af9a53f04321b0face49559ede","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Song Comparison Tool","cells":[{"id":0,"value":"# Song Comparison Tool","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"songs = await FileAttachment(\"dataset.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"songs","database":"$undefined"},{"id":6,"value":"import {render} from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null