2b:null 2c:["$","title",null,{"children":"Force Directed Tree | Ho Lee | 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":"4bed36ff9fc03734dd6106d58898abe6a8e8aac3dfea7f9a460398d362c263052829a6b34374ba4df782b81d6a41837c8d6250bac3bd1fd10d042d7ca9a85ab7","href":"https://static.observableusercontent.com/files/4bed36ff9fc03734dd6106d58898abe6a8e8aac3dfea7f9a460398d362c263052829a6b34374ba4df782b81d6a41837c8d6250bac3bd1fd10d042d7ca9a85ab7","name":"graph@9.json","type":"application/json","lastModified":1574308316157.942,"size":7679},{"id":"a769a1c3bdfef2d4721f6c8a7d2c67b9b1837d839c1da33e50a58a2ac94327af353f814ed909762963acf3751930d76924111fd8b4bbe5f4ecccd61f03d7b8b9","href":"https://static.observableusercontent.com/files/a769a1c3bdfef2d4721f6c8a7d2c67b9b1837d839c1da33e50a58a2ac94327af353f814ed909762963acf3751930d76924111fd8b4bbe5f4ecccd61f03d7b8b9","name":"tree@9.json","type":"application/json","lastModified":1574324288626.102,"size":14806}] 2f:{"id":"e5f2e46bc7a6254d","slug":"force-directed-graph","title":"Force Directed Tree","thumbnail":"e902421122ee048bb914298b111b676d461ea342d13da1782b6f30b856d67a67","access_level":"public","create_time":"$D2019-11-21T00:08:28.916Z","update_time":"$D2019-11-21T09:02:58.797Z","view_time":null,"first_public_time":"$D2019-11-21T04:26:05.695Z","fork":false,"stars":34,"starred":false,"owner":{"type":"team","id":"29f5167acd16080f","login":"leeho","name":"Ho Lee","avatar_url":"https://avatars-next.observableusercontent.com/83583d5d556854bc1e24d4e926523c3b310adbc75b48f14a65165e32215dfa6d","tier":"starter_2024"},"version":231,"publish_version":231,"role":null,"authored":false,"authors":[{"type":"individual","id":"59b8d6010155978f","login":"leeho","name":"Ho Lee","avatar_url":"https://avatars-next.observableusercontent.com/83583d5d556854bc1e24d4e926523c3b310adbc75b48f14a65165e32215dfa6d","tier":null}],"members":[{"type":"individual","id":"59b8d6010155978f","login":"leeho","name":"Ho Lee","avatar_url":"https://avatars-next.observableusercontent.com/83583d5d556854bc1e24d4e926523c3b310adbc75b48f14a65165e32215dfa6d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":59,"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"