2b:null 2c:["$","title",null,{"children":"Force Directed Tree | ObeyMyGH | Observable"}] 31:T500,function build_graph(data, max_level, width, height) { const graph = { nodes: [], links: [] }; const n = data.children.length; const delta_rad = n ? Math.PI * 2 / n : 0; const r = max_level ? Math.min(width, height) * 0.5 / (max_level - 1) : 0; let rad = Math.PI * 3 / 2; function add_node(parent_id, level, t) { const node_id = graph.nodes.length; if (level == 0) { graph.nodes.push({ svg: t.svg, fixed: true, x: width / 2, y: height / 2 }); } else if (level == 1) { graph.nodes.push({ svg: t.svg, fixed: true, x: width / 2 + Math.cos(rad) * r, y: height / 2 + Math.sin(rad) * r }); rad += delta_rad; } else { graph.nodes.push({ svg: t.svg, x: level * (graph.nodes[parent_id].x - width / 2) / (level - 1) + width / 2, y: level * (graph.nodes[parent_id].y - height / 2) / (level - 1) + height / 2 }); } if (parent_id >= 0) { graph.links.push({ source: graph.nodes[parent_id], target: graph.nodes[node_id] }); } t.children.forEach(function (d) { add_node(node_id, level + 1, d); }); } add_node(-1, 0, data); return graph; }32:T1287,html``33:T740,chart = { const width = 766; const height = 700; const chartArea = d3.select(html`

고빈도 인물

떠오르는 인물

신규 인물

`); //const svg = d3.select(html``); const svg = chartArea.selectAll("#target").append("svg") .style("width", width) .style("height", height); const max_level = tree_level(data); const max_distance = Math.min(width, height); const link_distance = (max_level > 1) ? max_distance * 0.2 / max_level : 0; const graph = build_graph(data, max_level, width, height); const nodes = graph.nodes; const links = graph.links; var force = d3.layout.force() .size([width, height]) .nodes(nodes).links(links) .linkDistance(link_distance) .linkStrength(0.95) .friction(0.95) .charge(-1000) .gravity(0.1) .on("tick", n=>{ link.attr("x1", d=>d.source.x).attr("y1", d=>d.source.y) .attr("x2", d=>d.target.x).attr("y2", d=>d.target.y); node.attr("transform", function (d) { return `translate(${d.x}, ${d.y})`; }) }); var link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll(".link").data(links).enter().append("line") .attr("class", "link"); var node = svg.append("g") .selectAll(".node").data(nodes).enter().append("g") .html(function (d) { return d.svg; }); node.call(force.drag); force.start(); return chartArea.node(); }34:[{"id":"a769a1c3bdfef2d4721f6c8a7d2c67b9b1837d839c1da33e50a58a2ac94327af353f814ed909762963acf3751930d76924111fd8b4bbe5f4ecccd61f03d7b8b9","href":"https://static.observableusercontent.com/files/a769a1c3bdfef2d4721f6c8a7d2c67b9b1837d839c1da33e50a58a2ac94327af353f814ed909762963acf3751930d76924111fd8b4bbe5f4ecccd61f03d7b8b9","name":"tree@9.json","type":"application/json","lastModified":1623486022802.58,"size":14806}] 2f:{"id":"52e0da407f909839","slug":"force-directed-tree","title":"Force Directed Tree","thumbnail":"19d0ef630d55cc00c62937c9b9c5a2fc57162c732844f64adf75517f16b0037f","access_level":"public","create_time":"$D2021-06-12T08:20:22.802Z","update_time":"$D2021-06-12T08:20:22.802Z","view_time":null,"first_public_time":"$D2021-06-14T20:05:09.101Z","fork":{"id":"e5f2e46bc7a6254d","slug":"force-directed-graph","title":"Force Directed Tree","owner":{"id":"29f5167acd16080f","login":"leeho","name":"Ho Lee"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0354938a5dd10c5f","login":"obey","name":"ObeyMyGH","avatar_url":"https://avatars-next.observableusercontent.com/84c352432ac546e3e3229af582bcc15a3a78ab6da1ca97e8559b916972a1d0f1","tier":"starter_2024"},"version":231,"publish_version":231,"role":null,"authored":false,"authors":[{"type":"individual","id":"440b42ffda60d765","login":"obey","name":"ObeyMyGH","avatar_url":"https://avatars-next.observableusercontent.com/84c352432ac546e3e3229af582bcc15a3a78ab6da1ca97e8559b916972a1d0f1","tier":null}],"members":[{"type":"individual","id":"440b42ffda60d765","login":"obey","name":"ObeyMyGH","avatar_url":"https://avatars-next.observableusercontent.com/84c352432ac546e3e3229af582bcc15a3a78ab6da1ca97e8559b916972a1d0f1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Force Directed Tree","cells":[{"id":0,"value":"md`# Force Directed Tree`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"d3 = require('//d3js.org/d3.v3.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"data = FileAttachment(\"tree@9.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"function tree_level(t) {\n if (t.children.length == 0)\n return 1;\n return 1 + Math.max.apply(null, t.children.map(function (d) { return tree_level(d); }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"