2b:null 2c:["$","title",null,{"children":"Collapsible Tree | Hamed Barzamini | Observable"}] 31:T4df, function Gallery() { const urls = flattenedRandomSelection.map(obj => obj.img_url); const captions = flattenedRandomSelection.map(obj => obj.captions); const columns = 2; const [rows, setRows] = useState(1); const images = urls.map((url, index) => ({ url, caption: captions[index], })); useEffect(() => { const totalImages = images.length; const newRows = Math.ceil(totalImages / columns); setRows(newRows); }, [columns, images]); const containerStyle = { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gridTemplateRows: `repeat(${rows}, 2fr)`, gridAutoRows: "2fr", gap: "8px", height: "500px", // width: "600px", overflow: "scroll", }; return React.createElement( "div", null, React.createElement("div", null), React.createElement( "div", { style: containerStyle, }, images.map((image, index) => React.createElement( "div", { key: index, className: "image-container" }, React.createElement("img", { src: image.url, alt: image.caption }), React.createElement("div", { className: "caption" }, image.caption) ) ) ) ); } 32:T1109,function createChart(data) { const root = d3.hierarchy(data); root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; // console.log(d.data.name); if (d.depth && d.data.name.length !== 7) d.children = null; }); const svg = d3.create("svg") .attr("viewBox", [-margin.left, -margin.top, width, dx]) .style("font", "22px sans-serif") .style("user-select", "none") .style("width", "100%") .style("height", "100%"); const gLink = svg.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); // const rootCopy = d3.hierarchy(data); // rootCopy.descendants().forEach((d) => { // if (d.data.value === 1759) { // console.log(d.data.name); // } // }); function update(source) { const duration = d3.event && d3.event.altKey ? 2500 : 250; const nodes = root.descendants().reverse(); const links = root.links(); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + margin.top + margin.bottom; const transition = svg.transition() .duration(duration) .attr("viewBox", [-margin.left, left.x - margin.top, width, height]) .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); // Update the nodes… const node = gNode.selectAll("g") .data(nodes, d => d.id); const updateCircles = (id) => { // console.log(id); gNode.selectAll("circle").attr("fill", d => { if (d.id === id) { return "red"; } else { return d._children ? "#555" : "#999"; } }); }; // Enter any new nodes at the parent's previous position. const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", (event, d) => { d.children = d.children ? null : d._children; updateCircles(d.id); update(d); // traverse(root); }); nodeEnter.append("circle") .attr("r", 2.5) .attr("fill", d => d._children ? "#555" : "#999") .attr("stroke-width", 10); nodeEnter.append("text") .attr("dy", "-0.31em") .attr("x", d => d.children ? -15 : 6) .attr("text-anchor", "start") .text(d => d.data.name) .clone(true).lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white"); // Transition nodes to their new position. const nodeUpdate = node.merge(nodeEnter).transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node.exit().transition(transition).remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path") .data(links, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link.enter().append("path") .attr("d", d => { const o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); // Transition links to their new position. link.merge(linkEnter).transition(transition) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link.exit().transition(transition).remove() .attr("d", d => { const o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }); // Stash the old positions for transition. root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } update(root); return svg.node(); }33:[{"id":"e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","href":"https://static.observableusercontent.com/files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","name":"flare-2.json","type":"application/octet-stream","lastModified":1680476291296.777,"size":11634},{"id":"67c367f35cb1df56f770a998d4504c6cd3c94fc9da8c8aa85c405a86fbfa1c7d3be52535d93ed3cf974302db50bfa0c7f80ea891d296932178bbd061fa7c6554","href":"https://static.observableusercontent.com/files/67c367f35cb1df56f770a998d4504c6cd3c94fc9da8c8aa85c405a86fbfa1c7d3be52535d93ed3cf974302db50bfa0c7f80ea891d296932178bbd061fa7c6554","name":"flare-2@1.json","type":"application/json","lastModified":1680500971087.806,"size":1915}] 2f:{"id":"7e8b9df3f7e3d6f9","slug":null,"title":"Collapsible Tree","thumbnail":"c34e3bdc39e059418739933f0f03d9c4e284b7f63f67335f955988e12449539b","access_level":"public","create_time":"$D2023-04-02T22:58:11.296Z","update_time":"$D2023-04-09T15:40:01.306Z","view_time":null,"first_public_time":"$D2023-04-02T22:58:11.296Z","has_unpublished_edits":null,"fork":{"id":"e257f81c745be447","slug":"collapsible-tree","title":"Collapsible tree","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6318f9ef8f09080d","login":"hbarzamini","name":"Hamed Barzamini","avatar_url":"https://avatars-next.observableusercontent.com/6bbe415c39c636d3bf25ce1f85d1e5b8844187d795884047ae18ee04d25a695a","tier":"starter_2024"},"version":665,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8259129fb117d602","login":"hbarzamini","name":"Hamed Barzamini","avatar_url":"https://avatars-next.observableusercontent.com/6bbe415c39c636d3bf25ce1f85d1e5b8844187d795884047ae18ee04d25a695a","tier":null}],"members":[{"type":"individual","id":"8259129fb117d602","login":"hbarzamini","name":"Hamed Barzamini","avatar_url":"https://avatars-next.observableusercontent.com/6bbe415c39c636d3bf25ce1f85d1e5b8844187d795884047ae18ee04d25a695a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Collapsible Tree","cells":[{"id":0,"value":"md`# Collapsible Tree\n\nClick a black node to expand or collapse [the tree](/@d3/tidy-tree).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":642,"value":"

\n ${createChart(data)}\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":652,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":585,"value":"dy = width / 2.4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"dx = 80","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":638,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":543,"value":"// combined = html`

\n//

\n// ${createChart(data)}\n//

\n//

\n\n//

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"ReactDOM.render(React.createElement(Gallery), document.getElementById(\"gallery-container\"));\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"// ReactDOM.render(React.createElement(Gallery), document.getElementById(\"app\"));\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"// {\n// const container = document.createElement('div');\n// container.setAttribute('id', 'hierarchy');\n// document.body.appendChild(container);\n// const chart = createChart(data);\n// const hierarchyDiv = document.getElementById('hierarchy');\n// hierarchyDiv.appendChild(chart);\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"data = FileAttachment(\"flare-2@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"// dx = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"// dy = width / 6\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"margin = ({top: 10, right: 120, bottom: 10, left: 40})\n// margin = ({top: 10, right: 120, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"import {\n render,\n component,\n jsx,\n memo,\n forwardRef,\n React,\n ReactDOM,\n createElement,\n Children,\n createRef,\n createContext,\n lazy,\n Fragment,\n StrictMode,\n Suspense,\n cloneElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useReducer,\n useRef,\n useState,\n useDebugValue,\n createPortal,\n __SECRET_SWITCHER\n} from '@j-f1/react'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"imageCsv = d3.csv(\n \"https://raw.githubusercontent.com/AI-EnabledSoftwareEngineering-AISE/RE4VIS/main/data/images_df.csv\",\n d3.autoType\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"flattenedRandomSelection = imageCsv.slice(120, 140)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"