2b:null 2c:["$","title",null,{"children":"260312_한국영화 스태프 데이터 | Ssen Kim | Observable"}] 31:Tdcb,data = { const raw = await FileAttachment("data_moviestaff3.csv").csv({typed: true}); // 1. 출현 빈도 상위 스태프 추출 (기존 로직 유지) const getTopStaffByFreq = (roleField, limit = 3) => { const counts = new Map(); raw.forEach(d => { const staffList = String(d[roleField] || "").split(',').map(s => s.trim()).filter(n => n !== ""); staffList.forEach(name => { const id = `${name}_${roleField}`; const current = counts.get(id) || { name, role: roleField, count: 0 }; current.count += 1; counts.set(id, current); }); }); return Array.from(counts.values()).sort((a, b) => b.count - a.count).slice(0, limit); }; const topDPData = getTopStaffByFreq("촬영감독"); const topArtData = getTopStaffByFreq("미술감독"); const topMusicData = getTopStaffByFreq("음악감독"); const topDPIds = topDPData.map(d => `${d.name}_${d.role}`); const topArtIds = topArtData.map(d => `${d.name}_${d.role}`); const topMusicIds = topMusicData.map(d => `${d.name}_${d.role}`); const allTopStaffIds = new Set([...topDPIds, ...topArtIds, ...topMusicIds]); // 2. 필터링 및 노드 구성 const filteredRaw = raw.filter(d => { const movieStaffIds = [ ...String(d.촬영감독 || "").split(',').map(s => `${s.trim()}_촬영감독`), ...String(d.미술감독 || "").split(',').map(s => `${s.trim()}_미술감독`), ...String(d.음악감독 || "").split(',').map(s => `${s.trim()}_음악감독`) ]; return movieStaffIds.some(id => allTopStaffIds.has(id)); }); const movies = filteredRaw.map(d => d.영화명); const nodeIds = [...movies, ...topDPIds, ...topArtIds, ...topMusicIds]; const names = nodeIds.map(id => id.split('_')[0]); const n = nodeIds.length; const index = new Map(nodeIds.map((id, i) => [id, i])); const matrix = Array.from({length: n}, () => new Float64Array(n)); // 3. [해결책] 영화별 관객수 고정 및 스태프 지분 분할 filteredRaw.forEach(d => { const movieIdx = index.get(d.영화명); const audience = +d.관객수 || 0; // 이 영화에 참여한 '상위 스태프' 리스트 추출 const contributingStaffIds = [ ...String(d.촬영감독 || "").split(',').map(s => `${s.trim()}_촬영감독`), ...String(d.미술감독 || "").split(',').map(s => `${s.trim()}_미술감독`), ...String(d.음악감독 || "").split(',').map(s => `${s.trim()}_음악감독`) ].filter(id => allTopStaffIds.has(id)); if (contributingStaffIds.length > 0) { // 영화의 총 관객수를 참여 스태프 수로 나누어 리본 두께 결정 const weightPerStaff = audience / contributingStaffIds.length; contributingStaffIds.forEach(id => { const staffIdx = index.get(id); matrix[movieIdx][staffIdx] += weightPerStaff; matrix[staffIdx][movieIdx] += weightPerStaff; }); } }); // 4. 색상 설정 (기존 명암 로직 유지) const baseColors = { dp: d3.hsl("#ff7f0e"), art: d3.hsl("#2ca02c"), music: d3.hsl("#1f77b4") }; const colors = nodeIds.map(id => { if (movies.includes(id)) return "#444444"; const getShade = (ids, baseColor) => { const rank = ids.indexOf(id); return rank === -1 ? null : baseColor.darker(rank * 0.6).toString(); }; return getShade(topDPIds, baseColors.dp) || getShade(topArtIds, baseColors.art) || getShade(topMusicIds, baseColors.music) || "#ccc"; }); return Object.assign(matrix, {names, colors}); }32:Tf2c, chart1 = { // --- [1단계] 설정 --- const width = 900; const height = width; const {names, colors} = data; // data 셀에서 정제한 데이터 참조 const padding = 0.02; const outerRadius = Math.min(width, height) * 0.5 - 200; const innerRadius = outerRadius - 15; const chord = d3.chord() .padAngle(padding) .sortSubgroups(d3.descending) .sortChords(d3.descending); const chords = chord(data); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "width: 100%; height: auto; font: 16px sans-serif; font-weight: 700; cursor: default;"); // --- [2단계] 테두리 조각(Arc) 및 이름표(Label) --- const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); const group = svg.append("g") .selectAll() .data(chords.groups) .join("g") .attr("class", "group"); group.append("path") .attr("fill", d => colors[d.index]) .attr("d", arc); group.append("text") .each(d => { d.angle = (d.startAngle + d.endAngle) / 2; }) .attr("dy", "0.35em") .attr("transform", d => ` rotate(${d.angle * 180 / Math.PI - 90}) translate(${outerRadius + 15}) ${d.angle > Math.PI ? "rotate(180)" : ""} `) .attr("text-anchor", d => d.angle > Math.PI ? "end" : "start") .text(d => names[d.index]); // --- [3단계] 내부 리본(Ribbon) - 1/n 지분 분할 적용 --- const ribbon = d3.ribbon() .radius(innerRadius - 1) .padAngle(padding / 4); const ribbons = svg.append("g") .attr("fill-opacity", 0.7) .selectAll("path") .data(chords) .join("path") .style("mix-blend-mode", "multiply") .attr("fill", d => { const sourceColor = colors[d.source.index]; const targetColor = colors[d.target.index]; return sourceColor !== "#444444" ? sourceColor : targetColor; }) .attr("d", ribbon); // --- [4단계] 인터랙티브 하이라이트 --- function highlight(index) { const connectedIndices = new Set([index]); chords.forEach(d => { if (d.source.index === index) connectedIndices.add(d.target.index); if (d.target.index === index) connectedIndices.add(d.source.index); }); ribbons.style("opacity", d => (d.source.index === index || d.target.index === index) ? 1 : 0.05 ); group.select("path").style("opacity", d => connectedIndices.has(d.index) ? 1 : 0.1); group.select("text").style("opacity", d => connectedIndices.has(d.index) ? 1 : 0.1); } function restore() { ribbons.style("opacity", 0.7); group.select("path").style("opacity", 1); group.select("text").style("opacity", 1); } group.on("mouseover", (event, d) => highlight(d.index)).on("mouseout", restore); ribbons.on("mouseover", (event, d) => { const indices = new Set([d.source.index, d.target.index]); ribbons.style("opacity", r => (r === d) ? 1 : 0.05); group.select("path").style("opacity", g => indices.has(g.index) ? 1 : 0.1); group.select("text").style("opacity", g => indices.has(g.index) ? 1 : 0.1); }).on("mouseout", restore); // --- [5단계] 가로형 범례(Horizontal Legend) --- const legendData = [ { label: "촬영감독", color: "#ff7f0e" }, { label: "미술감독", color: "#2ca02c" }, { label: "음악감독", color: "#1f77b4" } ]; const legend = svg.append("g") .attr("transform", `translate(-250, ${-height / 2 + 30})`); legendData.forEach((d, i) => { const legendItem = legend.append("g").attr("transform", `translate(${i * 180}, 0)`); legendItem.append("circle").attr("r", 8).attr("fill", d.color); legendItem.append("text") .attr("x", 15).attr("y", 5) .style("font-size", "18px").style("fill", "#555") .text(d.label); }); return svg.node(); }33:T4bd,html`

`34:T4bd,html`

`35:T584,html`

이 글이 유익하셨나요?

데이터 시각화와 정보디자인에 관심 있는 분들에게 공유해주세요!

이 글 공유하기 뉴스레터 구독하기

매주 데이터 시각화 이야기를 전해드립니다 ✉️

`36:[{"id":"c8c9d056672d8b07fe0f890a720d1c842c6ba74f413f2532f4bc6acb567bda60142499666955375cabd4c314ea246c7ae18a192fe675d656608f8a979d0a6a18","href":"https://static.observableusercontent.com/files/c8c9d056672d8b07fe0f890a720d1c842c6ba74f413f2532f4bc6acb567bda60142499666955375cabd4c314ea246c7ae18a192fe675d656608f8a979d0a6a18","name":"data_moviestaff3.csv","type":"text/csv","lastModified":1772963150083.672,"size":2115},{"id":"4e3d8535c9f0efa733b8ec1f1ce98a1d0de7f45b03614a84584b37643bc63b2f6094afe364ff493e8c8f4b771206b42327c679064e54f714014c622047ef3afc","href":"https://static.observableusercontent.com/files/4e3d8535c9f0efa733b8ec1f1ce98a1d0de7f45b03614a84584b37643bc63b2f6094afe364ff493e8c8f4b771206b42327c679064e54f714014c622047ef3afc","name":"260307_영화스탭_04.png","type":"image/png","lastModified":1773212823114.143,"size":233458},{"id":"327d6197997bfc254290e86271f426eb91514560849c7ff87aa363a568c3fc8972b981bd7b91f7622320887c311da25323a771e24ce35d475edcff104e306425","href":"https://static.observableusercontent.com/files/327d6197997bfc254290e86271f426eb91514560849c7ff87aa363a568c3fc8972b981bd7b91f7622320887c311da25323a771e24ce35d475edcff104e306425","name":"260307_영화스탭_01.png","type":"image/png","lastModified":1773211742284.006,"size":238183},{"id":"c53ea11db1ae5a356b8e1f694c0fa48c78e44707e141aa763a55512bfdfd526ec8a28491e9b51957341eb528f9a64a79bab0dcf5b651311ba368381e576cb00a","href":"https://static.observableusercontent.com/files/c53ea11db1ae5a356b8e1f694c0fa48c78e44707e141aa763a55512bfdfd526ec8a28491e9b51957341eb528f9a64a79bab0dcf5b651311ba368381e576cb00a","name":"260307_영화스탭_03.png","type":"image/png","lastModified":1773211742331.268,"size":275978},{"id":"ae13e60ac1f36ac88c8925ca6d4d431d1b29f69488a16d4eb3ab6942084b7a3174cf669cf653831b5e268b482c2d9765fcd93707cf6209b3fcbe923c53fbbc15","href":"https://static.observableusercontent.com/files/ae13e60ac1f36ac88c8925ca6d4d431d1b29f69488a16d4eb3ab6942084b7a3174cf669cf653831b5e268b482c2d9765fcd93707cf6209b3fcbe923c53fbbc15","name":"260307_영화스탭_02.png","type":"image/png","lastModified":1773211742302.551,"size":244127},{"id":"80eeb4c74d3bc5c0496e8977b95b252d4396887297bcbb918b58b6090e9e205b4024693a93b7ced3319aec5a066f36cc0ff3076cf0755461c22faa204ce45d5a","href":"https://static.observableusercontent.com/files/80eeb4c74d3bc5c0496e8977b95b252d4396887297bcbb918b58b6090e9e205b4024693a93b7ced3319aec5a066f36cc0ff3076cf0755461c22faa204ce45d5a","name":"260307_영화스탭_05.png","type":"image/png","lastModified":1773212823104.646,"size":223618},{"id":"c7c2393f47f399b5aefa5044b9706244e2ce990fc166b9634ba4c3bb1a8073aa750af9af00562e4eb6b4b1a60def229dd483dd7ea1fef1c0aec77485ce442f30","href":"https://static.observableusercontent.com/files/c7c2393f47f399b5aefa5044b9706244e2ce990fc166b9634ba4c3bb1a8073aa750af9af00562e4eb6b4b1a60def229dd483dd7ea1fef1c0aec77485ce442f30","name":"260307_영화스탭_06.png","type":"image/png","lastModified":1773212823084.022,"size":228023},{"id":"32ca623bff27b3fc4bc59e0534dfef46cc689b74641a4e4eb985a74a16a505fdcca987b281cf66e701558499c4a3955e39b5c1aedcc0a1708934c7d98a601e56","href":"https://static.observableusercontent.com/files/32ca623bff27b3fc4bc59e0534dfef46cc689b74641a4e4eb985a74a16a505fdcca987b281cf66e701558499c4a3955e39b5c1aedcc0a1708934c7d98a601e56","name":"260312_01.png","type":"image/png","lastModified":1773217603055.084,"size":80969}] 2f:{"id":"e17407a2963cb953","slug":null,"title":"260312_한국영화 스태프 데이터","thumbnail":"f726005f20f9b178d77fa5e50e2fca8260763caeb2a7817e6908031a74d846d1","access_level":"public","create_time":"$D2026-03-08T09:44:41.610Z","update_time":"$D2026-03-11T12:36:22.879Z","view_time":null,"first_public_time":"$D2026-03-11T08:21:46.728Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ca32d02dd4fd9da1","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":"starter_2024"},"version":179,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"388e6ba669af2a7d","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":null}],"members":[{"type":"individual","id":"388e6ba669af2a7d","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":null,"role":"editor"},{"type":"team","id":"ca32d02dd4fd9da1","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"260312_한국영화 스태프 데이터","cells":[{"id":0,"value":"# 260312_한국영화 스태프 데이터","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"안녕하세요 여러분 **정보디자이너 쎈**입니다\n
오늘은 영화 스태프 데이터에 대한 이야기를 해보려고 해요. 완성된 그래프는 마우스로 움직여볼 수 있습니다.\n
참고로 데이터는 영화진흥위원회 사이트에서 직접 검색해본 결과입니다.\n
첨부파일에서(아래의 메뉴 위치를 확인하세요) 제가 사용한 데이터를 확인하실 수 있습니다. csv 파일인데, 메모장이나 엑셀을 통해서도 열어볼 수 있습니다.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"그래프는 총 두 가지로 나뉩니다.\n왼쪽의 사람이름들은 영화에 참여한 주요 스태프예요. 촬영감독/미술감독/음악감독으로 보시면 됩니다.\n
스태프의 이름이나 주위의 선 위에 마우스 커서를 올리면 해당 스태프가 참여한 영화를 볼 수 있습니다.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"## 보는방법-스태프","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"스태프 별로 작업수가 가장 많은 감독들을 선택한 모습입니다.
위의 그래프에서 선택해 보셔도 되고, 이미지를 클릭하면 큰 버전으로 볼 수 있어요 (한번 더 클릭하면 사라집니다)\n
2020년 이후 다작한 감독들 순위입니다.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"## 보는방법-영화","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"이번엔 영화 기준입니다. \n
중복된 스탭들이 참여한 영화에 마우스를 올리면 관련 스태프들을 확인할 수 있어요.\n
제가 빼먹은게 있는데, 영화 '한산'과 '노량'에는 같은 스태프들이 참여했어요. \n
음악과 미술 감독은 같은 감독의 이전 시리즈에도 참여했는데, \n
그 영화가 명량(2014). 1700만 관객수를 기록하고 있는 작품입니다.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":156,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"데이터 수집과정과 분석 내용이 궁금하신 분들은 아래의 영상에서도 확인할 수 있습니다.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"html`

\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"