2c:null 2d:["$","title",null,{"children":"Nike | Hong Kim | Observable"}] 32:T363f,// 첨부파일 불필요. 새 셀에 통째로 붙여넣기. // 구조: Phase(단계 묶음) → Step(화면) → next(연결). 좌표·연결선·색은 전부 데이터에서 자동 계산. (() => { // =============== 1. 데이터 =============== // track: 색과 경로 필터를 결정 / kind: start | screen | choice | option | tag | end // lane: 가로 위치(-1.5 ~ 1.5) / only: 이 경로에서만 표시 (기본값은 track) const TRACKS = { audio: { label: "Guided / Music meditation", color: "#a4ff01" }, focus: { label: "Focus exercise", color: "#ff67ee" }, top25: { label: "Top 25 Store", color: "#ffdc4a" }, fleet: { label: "Fleet Store", color: "#659df2" } }; const DIMS = { session: ["audio", "focus"], raffle: ["top25", "fleet", "skip"] }; const PHASES = [ { id: "onboarding", title: "Onboarding", steps: [ { id: "screensaver", kind: "start", label: "Screensaver / CTA", note: "Text + Video BG", next: ["language"] }, { id: "language", label: "Language Selection", note: "up to 16 languages", next: ["tc"] }, { id: "tc", label: "Terms & Conditions", note: "supplied by Nike as .txt", next: ["onboarding"] }, { id: "onboarding", label: "Onboarding", note: "Explaining the importance of meditation", next: ["choose"] } ]}, { id: "meditation", title: "Meditation", steps: [ { id: "choose", kind: "choice", label: "Choose mode", next: ["boost", "breathing", "empty"] }, { id: "boost", kind: "option", track: "audio", lane: -1, label: "Boost confidence", note: "Guided meditation", next: ["light"] }, { id: "breathing", kind: "option", track: "audio", lane: 0, label: "Breathing", note: "Music meditation", next: ["light"] }, { id: "empty", kind: "option", track: "focus", lane: 1, label: "Empty your mind", note: "Focus exercise", next: ["light"] }, { id: "light", label: "Light settings", note: "Will change the software\nand hardware look", next: ["explanation"] }, { id: "explanation", label: "Explanation", note: "Get comfortbale, etc.", next: ["listening", "exercising"] }, { id: "listening", track: "audio", lane: -1, label: "Listening", note: "Duration, pause and volume settings", next: ["confirm1"] }, { id: "exercising", track: "focus", lane: 1, label: "Exercising", note: "Play Finger Movement Exercise", next: ["confirm1"] }, { id: "confirm1", label: "Confirmation", note: "Thank you for your time", next: ["rating"] } ]}, { id: "feedback", title: "Feedback", steps: [ { id: "rating", label: "Rating", note: "How do you feel", next: ["raffle"] } ]}, { id: "raffle", title: "Raffle", steps: [ { id: "raffle", label: "Raffle", note: "Choose to get raffels or skip", next: ["getraffles", "skip"] }, { id: "getraffles", kind: "choice", label: "Get raffels", next: ["top25store", "fleetstore"] }, { id: "skip", kind: "choice", track: "skip", lane: 1.5, label: "SKIP", next: ["ntcpromo"] }, { id: "top25store", kind: "tag", track: "top25", lane: -0.5, label: "Top 25 Store", next: ["raffle2"] }, { id: "fleetstore", kind: "tag", track: "fleet", lane: 0.5, label: "Fleet Store", next: ["raffle2"] }, { id: "raffle2", label: "Raffle", note: "Explaining how to get raffles", next: ["info", "camera"] }, { id: "info", track: "top25", lane: -0.5, label: "Information", note: "Take a pic on your phone", next: ["confirm2"] }, { id: "camera", track: "fleet", lane: 0.5, label: "Camera", note: "Text + Video BG", next: ["confirm2"] }, { id: "confirm2", label: "Confirmation", note: "Thank you for your time", next: ["ntcpromo"] } ]}, { id: "ntc", title: "NTC", steps: [ { id: "ntcpromo", label: "NTC Promo", note: "with app visual", next: ["ntc", "appstore"] }, { id: "ntc", track: "top25", only: ["top25", "skip"], lane: -0.5, label: "NTC", note: "QR cord", next: ["end"] }, { id: "appstore", track: "fleet", only: ["fleet", "skip"], lane: 0.5, label: "App store", note: "App store to download NTC", next: ["end"] }, { id: "end", kind: "end", label: "End", note: "Thank you for the journeyv" } ]} ]; // =============== 2. 그래프 계산 =============== const steps = PHASES.flatMap((p, pi) => p.steps.map(s => ({ kind: "screen", lane: 0, note: "", next: [], ...s, phase: p.id, pi }))); const byId = new Map(steps.map(s => [s.id, s])); const pars = new Map(steps.map(s => [s.id, []])), kids = new Map(steps.map(s => [s.id, []])); steps.forEach(s => s.next.forEach(t => { kids.get(s.id).push(t); pars.get(t).push(s.id); })); const lvMemo = new Map(); const lv = id => lvMemo.get(id) ?? (lvMemo.set(id, pars.get(id).length ? 1 + Math.max(...pars.get(id).map(lv)) : 0), lvMemo.get(id)); steps.forEach(s => { s.level = lv(s.id); s.w = Math.max(74, Math.round(s.label.length * 8.6 + (s.track && TRACKS[s.track] ? 56 : 40))); s.h = 32; const nl = s.note.split("\n").filter(Boolean).length; s.noteH = nl ? nl * 12 + 8 : 0; // 설명글 높이만큼 연결선 시작점을 내림 s.only = s.only ?? (s.track ? [s.track] : []); }); // 연결선 종류: 순차 / 분기 / 합류 / 건너뛰기 (범례와 색을 결정) const edges = steps.flatMap(s => s.next.map(t => { const a = s, b = byId.get(t); const type = b.level - a.level > 1 ? "skip" : a.next.length > 1 ? "branch" : pars.get(t).length > 1 ? "merge" : "seq"; return { a: a.id, b: t, type }; })); const EDGE = { seq: { label: "Sequence", color: "#c4c4c4" }, branch: { label: "Branch", color: "#a8c5f7" }, merge: { label: "Merge", color: "#a6dcb4" }, skip: { label: "Skip", color: "#f0b9a0" } }; const reach = (id, map) => { const out = new Set(), q = [id]; while (q.length) for (const n of map.get(q.pop())) if (!out.has(n)) { out.add(n); q.push(n); } return out; }; // 레이아웃 (위 → 아래) const LANE = 210, CX = 560, GY = 86, PAD = 76, W = 1040; const maxLevel = Math.max(...steps.map(s => s.level)); const H = PAD * 2 + maxLevel * GY; steps.forEach(s => { s.x = CX + s.lane * LANE; s.y = PAD + s.level * GY; }); const link = (a, b) => { const ay = a.y + a.h / 2 + a.noteH, by = b.y - b.h / 2, m = (ay + by) / 2; if (b.level - a.level > 1) return `M${a.x},${ay}V${b.y - 26}Q${a.x},${b.y} ${a.x - 26},${b.y}H${b.x + b.w / 2}`; // 건너뛰기: 옆면 진입 return `M${a.x},${ay}C${a.x},${m} ${b.x},${m} ${b.x},${by}`; }; // =============== 3. UI (Group Family Tree 스타일) =============== const BLUE = "#1f5cff", INK = "#111"; const css = document.createElement("style"); css.textContent = ` .ft{font-family:'Space Grotesk','Noto Sans KR',system-ui,sans-serif;color:#222} .ft .bar{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:4px 0 14px} .ft .lab{font-size:17px;color:#444} .ft .seg{display:inline-flex;background:#f1f3f5;border-radius:10px;padding:4px;gap:2px} .ft .seg button{border:0;background:transparent;padding:8px 16px;border-radius:8px;font:inherit;font-size:15px;color:#555;cursor:pointer} .ft .seg button.on{background:${BLUE};color:#fff} .ft input[type=range]{width:180px;accent-color:${BLUE}} .ft .num{width:70px;padding:8px 12px;border:1px solid #ddd;border-radius:8px;font:inherit} .ft details{position:absolute;left:12px;top:12px;z-index:2;background:#fff;border:1px solid #e3e3e3;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.08);font-size:13px} .ft summary{cursor:pointer;padding:8px 14px;letter-spacing:.5px;font-weight:700;list-style:none} .ft details[open] summary{border-bottom:1px solid #eee} .ft .lg{padding:10px 14px;display:grid;gap:7px;min-width:210px} .ft .lg b{font-size:11px;letter-spacing:1.5px;color:#999;margin-top:4px} .ft .lg span{display:flex;align-items:center;gap:8px} .ft .lg i{display:inline-block} `; const state = { session: "all", raffle: "all", max: maxLevel + 1 }; const seg = (key, options, names) => { const el = html`

`; const paint = () => el.querySelectorAll("button").forEach(b => b.classList.toggle("on", b.dataset.v === state[key])); options.forEach(o => { const b = html``; b.onclick = () => { state[key] = o; sel = null; paint(); update(); }; el.append(b); }); paint(); return el; }; const names = { all: "전체", audio: "Guided / Music", focus: "Focus", top25: "Top 25", fleet: "Fleet", skip: "SKIP" }; const range = html``; const num = html``; const setMax = v => { state.max = Math.max(1, Math.min(maxLevel + 1, +v || 1)); range.value = num.value = state.max; sel = null; update(); }; range.oninput = () => setMax(range.value); num.oninput = () => setMax(num.value); const legend = html`

Legend ›

TRACK${Object.values(TRACKS).map(t => html`${t.label}`)} LINK${Object.values(EDGE).map(e => html`${e.label}`)} STATEBefore Selected / After

`; const wrap = html`

`; wrap.append(legend); const svg = d3.select(wrap.querySelector(".sc")).append("svg").attr("viewBox", [0, 0, W, H]).attr("width", W).attr("height", H) .style("font-family", "'Space Grotesk','Noto Sans KR',system-ui,sans-serif"); const bg = svg.append("rect").attr("width", W).attr("height", H).attr("fill", "#fff"); // 좌측 단계 라벨 (Order N 스타일) const firstOfPhase = new Map(PHASES.map(p => [p.id, Math.min(...steps.filter(s => s.phase === p.id).map(s => s.level))])); const levelG = svg.append("g").selectAll("g").data(d3.range(maxLevel + 1)).join("g").attr("transform", d => `translate(40,${PAD + d * GY})`); levelG.append("text").attr("dy", "0.35em").attr("font-size", 14).attr("letter-spacing", 2.5).attr("fill", "#b0b0b0").text(d => `STEP ${d + 1}`); const phaseLab = svg.append("g").selectAll("text").data(PHASES).join("text") .attr("x", 40).attr("y", p => PAD + firstOfPhase.get(p.id) * GY - 26).attr("font-size", 11).attr("font-weight", 700).attr("letter-spacing", 2) .attr("fill", "#777").text((p, i) => `${String(i + 1).padStart(2, "0")} ${p.title.toUpperCase()}`); const eSel = svg.append("g").attr("fill", "none").selectAll("path").data(edges).join("path") .attr("d", e => link(byId.get(e.a), byId.get(e.b))).attr("stroke", e => EDGE[e.type].color).attr("stroke-width", 1.6); const g = svg.append("g").selectAll("g").data(steps).join("g").attr("transform", d => `translate(${d.x},${d.y})`).style("cursor", "pointer"); const pill = g.append("rect").attr("x", d => -d.w / 2).attr("y", -16).attr("width", d => d.w).attr("height", 32).attr("rx", 16); g.append("text").attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-size", 14).attr("fill", "#fff").text(d => d.label); g.filter(d => d.track && TRACKS[d.track]).append("circle").attr("cx", d => -d.w / 2 + 12).attr("r", 4).attr("fill", d => TRACKS[d.track].color); g.each(function (d) { d.note.split("\n").filter(Boolean).forEach((t, i) => d3.select(this).append("text").attr("y", 30 + i * 12).attr("text-anchor", "middle") .attr("font-size", 10.5).attr("fill", "#8a8a8a").text(t)); }); // =============== 4. 상태 갱신 =============== let sel = null; const visible = s => Object.entries(DIMS).every(([dim, vals]) => { const c = s.only.filter(v => vals.includes(v)), pick = state[dim]; return pick === "all" || !c.length || c.includes(pick); }); function update() { const up = sel ? reach(sel, pars) : new Set(), down = sel ? reach(sel, kids) : new Set(); const shown = s => s.level < state.max && visible(s); const ids = new Set(steps.filter(shown).map(s => s.id)); const role = id => !sel ? "base" : id === sel ? "sel" : up.has(id) ? "up" : down.has(id) ? "down" : "dim"; const fill = { base: INK, up: INK, sel: BLUE, down: BLUE, dim: "#dfe3ea" }; pill.transition().duration(200).attr("fill", d => fill[role(d.id)]); g.transition().duration(200).attr("opacity", d => !ids.has(d.id) ? 0 : role(d.id) === "dim" ? 0.55 : 1).style("pointer-events", d => ids.has(d.id) ? "auto" : "none"); const ex = (x) => x === sel; const inUp = id => up.has(id) || ex(id), inDown = id => down.has(id) || ex(id); const eRole = e => !sel ? "base" : inUp(e.a) && inUp(e.b) ? "up" : inDown(e.a) && inDown(e.b) ? "down" : "dim"; eSel.transition().duration(200) .attr("opacity", e => !ids.has(e.a) || !ids.has(e.b) ? 0 : eRole(e) === "dim" ? 0.25 : 1) .attr("stroke", e => ({ base: EDGE[e.type].color, up: INK, down: BLUE, dim: EDGE[e.type].color })[eRole(e)]) .attr("stroke-width", e => eRole(e) === "up" || eRole(e) === "down" ? 2.6 : 1.6); } g.on("click", (e, d) => { e.stopPropagation(); sel = sel === d.id ? null : d.id; update(); }); bg.on("click", () => { sel = null; update(); }); update(); return html`

${css}

Max Levels:${range}${num}

명상 트랙${seg("session", ["all", ...DIMS.session], names)} 래플 경로${seg("raffle", ["all", ...DIMS.raffle], names)}

${wrap}

`; })()33:[] 30:{"id":"88539f94f4d1d7a3","slug":"nike","title":"Nike","thumbnail":"11997a47ba3088f62b978a9b91f67584854200baf92651398848e7727f17abe4","access_level":"public","create_time":"$D2026-09-30T22:09:52.648Z","update_time":"$D2026-10-01T00:07:51.596Z","view_time":null,"first_public_time":"$D2026-10-01T00:11:40.156Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e6a85a8cf42a15b5","login":"hong-kim","name":"Hong Kim","avatar_url":"https://avatars-next.observableusercontent.com/d6b1a76d9ea8c3def79465993e2deb310efee47b7fb090d5309197f28fe46cd1","tier":"starter_2024"},"version":42,"publish_version":42,"role":null,"authored":false,"authors":[{"type":"individual","id":"737e6051f1367c50","login":"hong-kim","name":"Hong Kim","avatar_url":"https://avatars-next.observableusercontent.com/d6b1a76d9ea8c3def79465993e2deb310efee47b7fb090d5309197f28fe46cd1","tier":null}],"members":[{"type":"team","id":"e6a85a8cf42a15b5","login":"hong-kim","name":"Hong Kim","avatar_url":"https://avatars-next.observableusercontent.com/d6b1a76d9ea8c3def79465993e2deb310efee47b7fb090d5309197f28fe46cd1","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Nike","cells":[{"id":1,"value":"# Nike","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 31:"$30:body"