27:null 28:["$","title",null,{"children":"Radial cluster tree | janetyc | Observable"}] 2d:T847,chart = { // Specify the chart’s dimensions. const width = 928; const height = width; const cx = width * 0.5; // adjust as needed to fit const cy = height * 0.54; // adjust as needed to fit const radius = Math.min(width, height) / 2 - 80; // Create a radial cluster layout. The layout’s first dimension (x) // is the angle, while the second (y) is the radius. const tree = d3.cluster() .size([2 * Math.PI, radius]) .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth); // Sort the tree and apply the layout. const root = tree(d3.hierarchy(data) .sort((a, b) => d3.ascending(a.data.name, b.data.name))); // Creates the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-cx, -cy, width, height]) .attr("style", "width: 100%; height: auto; font: 10px sans-serif;"); // Append links. svg.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll() .data(root.links()) .join("path") .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y)); // Append nodes. svg.append("g") .selectAll() .data(root.descendants()) .join("circle") .attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`) .attr("fill", d => d.children ? "#555" : "#999") .attr("r", 2.5); // Append labels. svg.append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll() .data(root.descendants()) .join("text") .attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0})`) .attr("dy", "0.31em") .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6) .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end") .attr("paint-order", "stroke") .attr("stroke", "white") .attr("fill", "currentColor") .text(d => d.data.id); return svg.node(); }2e:[{"id":"e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","href":"https://static.observableusercontent.com/files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","name":"flare-2.json","type":"application/octet-stream","lastModified":1703947524526.3,"size":11634},{"id":"fbcf7e1e4a479223726cb097f76d574796199d4e0b236c6a37b491ec0cabfd57ceae67460de569fb42aa2a3aad978f9829240ddaa15cec39d8f1338651725c01","href":"https://static.observableusercontent.com/files/fbcf7e1e4a479223726cb097f76d574796199d4e0b236c6a37b491ec0cabfd57ceae67460de569fb42aa2a3aad978f9829240ddaa15cec39d8f1338651725c01","name":"object_tree_vg_chair.json","type":"application/json","lastModified":1703947566779.151,"size":4492}] 2b:{"id":"ef1a07529b640c75","slug":null,"title":"Radial cluster tree","thumbnail":"d8c6ed9a2c1f213924cd5a2645040074d1d667ececacd660fcfa1fb678292ca1","access_level":"public","create_time":"$D2023-12-30T14:45:24.526Z","update_time":"$D2023-12-30T14:50:42.299Z","view_time":null,"first_public_time":"$D2023-12-30T14:45:24.526Z","has_unpublished_edits":null,"fork":{"id":"022b50a822f43982","slug":"radial-cluster/2","title":"Radial cluster tree","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a864fababadc2639","login":"janetyc","name":"janetyc","avatar_url":"https://avatars-next.observableusercontent.com/6e65b0d2bb28af4d4f24bf5e3ecb41ed3117735bc5b4c0c33819ca7227a28987","tier":"starter_2024"},"version":250,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c4e4b06e437bd0d1","login":"janetyc","name":"janetyc","avatar_url":"https://avatars-next.observableusercontent.com/6e65b0d2bb28af4d4f24bf5e3ecb41ed3117735bc5b4c0c33819ca7227a28987","tier":null}],"members":[{"type":"individual","id":"c4e4b06e437bd0d1","login":"janetyc","name":"janetyc","avatar_url":"https://avatars-next.observableusercontent.com/6e65b0d2bb28af4d4f24bf5e3ecb41ed3117735bc5b4c0c33819ca7227a28987","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Radial cluster tree","cells":[{"id":1,"value":"

Radial cluster tree

D3 › Gallery

\n\n\n\n# Radial cluster tree for object-centric social network\n## Data: \nobject-centric social network where center node is chair. The dataset is Visual Genome (https://visualgenome.org/)\nThe detailed analysis is described here: https://observablehq.com/@janetyc/radial-tidy-tree-for-object-story-visualization\n\n## Visualization\nD3’s [cluster layout](https://d3js.org/d3-hierarchy/cluster) produces node-link diagrams with leaf nodes at equal depth. These are less compact than [tidy trees](/@d3/radial-tree/2?intent=fork), but are useful for dendrograms, hierarchical clustering and [phylogenetic trees](/@d3/tree-of-life?intent=fork). See also the [Cartesian variant](/@d3/cluster/2?intent=fork).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"object_tree_vg_chair.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"