25:["$","title",null,{"children":"Parallel sets | 곽태영's Workspace | Observable"}] 49:T1049,//제일 최근 작업중 파일2 chart = { const width = 928; const height = 720; const n = 5; // 산키 다이어그램의 깊이 function justify(node, n) { return node.sourceLinks.length ? node.depth : n - 1; } /* function compareNodes(a, b) { return a.name.localeCompare(b.name); } *///////// const sankey = d3.sankey() .nodeId(d => d.name) //.nodeAlign(d => compareNodes(d, n)) .nodeAlign(d => justify(d, n)) // 'justify' 정렬 사용 .nodeWidth(15) .nodePadding(10) .extent([[1, 5], [width - 1, height - 5]]); // null 값을 가진 노드와 링크를 제외 function filterNullData(nodes, links) { const filteredNodes = nodes.filter(node => node.value != null); const nodeIndexMap = new Map(); filteredNodes.forEach((node, index) => { nodeIndexMap.set(node.name, index); }); const updatedLinks = links.map(link => { return { source: nodeIndexMap.get(link.source), target: nodeIndexMap.get(link.target), value: link.value }; }).filter(link => link.source !== undefined && link.target !== undefined); filteredNodes.forEach(node => { node.value = updatedLinks .filter(link => nodeIndexMap.get(link.source) === nodeIndexMap.get(node.name) || nodeIndexMap.get(link.target) === nodeIndexMap.get(node.name)) .reduce((sum, link) => sum + link.value, 0); }); return { nodes: filteredNodes, updatedLinks }; } // 노드에 'category' 속성을 추가하는 함수 function addCategoryToNodes(nodes) { return nodes.map(d => { const node = Object.create(d); if (node.value <= 10) { node.category = 'Low'; } else if (node.value <= 20) { node.category = 'Medium'; } else { node.category = 'High'; } return node; }); } // 데이터 필터링 및 업데이트 const { filteredNodes, updatedLinks } = filterNullData(graph.nodes, graph.links); //console.log("Filtered Nodes: ", filteredNodes); //확인: filteredNodes가 undefined가 아닌지 확인 const sankeyData = sankey({ nodes: addCategoryToNodes(filteredNodes).map(d => Object.create(d)), links: updatedLinks.map(d => Object.create(d)) }); // 색상 스케일 정의 const colorByCategory = d3.scaleOrdinal() .domain(['Low', 'Medium', 'High']) //이름 재설정 .range(['#ff0000', '#ccc', '#000']); // 색상 코드 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); // 노드의 색상과 투명도 지정 svg.append("g") .selectAll("circle") .data(sankeyData.nodes) .join("circle") .attr("cx", d => (d.x0 + d.x1) / 2) .attr("cy", d => (d.y0 + d.y1) / 2) .attr("r", d => Math.max(5, (d.y1 - d.y0) / 2)) .style("fill", d => colorByCategory(d.category)) // 구역별 색상 지정 .style("opacity", 0.3) // 투명도 설정 .append("title") .text(d => `${d.name}\n${d.value.toLocaleString()}`); // 링크의 색상 지정 svg.append("g") .attr("fill", "none") .selectAll("path") .data(sankeyData.links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => colorByCategory(d.source.category)) // 링크 색상 지정 .attr("stroke-width", d => Math.max(1, d.width)) .style("mix-blend-mode", "multiply") .style("opacity", 0.3) // 투명도 설정 .append("title") .text(d => `${d.source.name} → ${d.target.name}\n${d.value.toLocaleString()}`); // 텍스트 레이블 추가 svg.append("g") .style("font", "10px sans-serif") .selectAll("text") .data(sankeyData.nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name) .append("tspan") .attr("fill-opacity", 0.7) .text(d => ` ${d.value.toLocaleString()}`); return svg.node(); };4a:T457,graph = { const keys = data.columns.slice(0, -1); let index = -1; const nodes = []; const nodeByKey = new d3.InternMap([], JSON.stringify);; const indexByKey = new d3.InternMap([], JSON.stringify);; const links = []; for (const k of keys) { for (const d of data) { const key = [k, d[k]]; if (nodeByKey.has(key)) continue; const node = {name: d[k]}; nodes.push(node); nodeByKey.set(key, node); indexByKey.set(key, ++index); } } for (let i = 1; i < keys.length; ++i) { const a = keys[i - 1]; const b = keys[i]; const prefix = keys.slice(0, i + 1); const linkByKey = new d3.InternMap([], JSON.stringify); for (const d of data) { const names = prefix.map(k => d[k]); const value = d.value || 1; let link = linkByKey.get(names); if (link) { link.value += value; continue; } link = { source: indexByKey.get([a, d[a]]), target: indexByKey.get([b, d[b]]), names, value }; links.push(link); linkByKey.set(names, link); } } return {nodes, links}; }4b:[{"id":"5ac898031f963a447c63f14c9cee4af4b77c38d66d9d681ec021d6b2d4609922b8576d35565ad781f21ca92febecf08073751a8799c2bd10d02d076a57426525","href":"https://static.observableusercontent.com/files/5ac898031f963a447c63f14c9cee4af4b77c38d66d9d681ec021d6b2d4609922b8576d35565ad781f21ca92febecf08073751a8799c2bd10d02d076a57426525","name":"444_3.csv","type":"text/csv","lastModified":1706162417112.846,"size":1524}] 29:{"id":"ecfbef607235f2c2","slug":null,"title":"Parallel sets","thumbnail":"c68079c00327bfde7e9deac9f1838dce67452cf211adde4db9c75b93ee365dfe","access_level":"public","create_time":"$D2024-01-25T04:15:10.579Z","update_time":"$D2024-01-26T00:30:02.594Z","view_time":null,"first_public_time":"$D2024-01-26T00:35:09.616Z","has_unpublished_edits":null,"fork":{"id":"dde4715990f04109","slug":"parallel-sets","title":"Parallel sets","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"34bd76699b8cdcf8","login":"gwagtaeyeong-ws","name":"곽태영's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/68bc61db8607be8526bc7214872a435395534a70790bae73e720002175cacb6c","tier":"starter_2024","bio":"","following":false},"version":314,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02c173dc023fa361","login":"gwagtaeyeong","name":"곽태영","avatar_url":"https://avatars-next.observableusercontent.com/516846c289e415d75e4fe156e81fa1b6b7a14e334f23dc80707fd5383318ffcf","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"02c173dc023fa361","login":"gwagtaeyeong","name":"곽태영","avatar_url":"https://avatars-next.observableusercontent.com/516846c289e415d75e4fe156e81fa1b6b7a14e334f23dc80707fd5383318ffcf","tier":null,"role":"editor"},{"type":"team","id":"34bd76699b8cdcf8","login":"gwagtaeyeong-ws","name":"곽태영's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/68bc61db8607be8526bc7214872a435395534a70790bae73e720002175cacb6c","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":"Parallel sets","cells":[{"id":0,"value":"

Parallel sets

D3 › Gallery

\n\n# Parallel sets\n\n[Parallel sets](https://kosara.net/publications/Bendix_InfoVis_2005.html) are like [parallel coordinates](/@d3/parallel-coordinates), but for categorical dimensions. The thickness of each curved line represents a quantity that is repeatedly subdivided by category. This example looks at the *Titanic* disaster of 1912.\n\nData: [Robert J. MacG. Dawson](http://jse.amstat.org/v3n3/datasets.dawson.html)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"data = FileAttachment(\"444_3.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@7\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null