The avatar for @hbarzamini
Hamed Barzamini
Public
Edited
Apr 9, 2023
Fork of Collapsible tree
2
Insert cell
Insert cell
<!-- <div class="flex-container">

<div class="flex-child magenta">
${createChart(data)}
</div>
<div class="flex-child green">
<div id="gallery-container"></div>
</div>
</div> -->
Insert cell
<div class="flex-parent-element">
<div class="flex-child-element magenta">
${createChart(data)}
</div>
<div class="flex-child-element green">
<div id="gallery-container"></div>
</div>
</div>
Insert cell
<style>
.flex-parent-element {
display: flex;
width: 100%;
}

.flex-child-element {
flex: 1;
/* border: 2px solid black; */
margin: 10px;
}

.flex-child-element:first-child {
margin-right: 20px;
}
</style>
Insert cell
dy = width / 2.4
Insert cell
dx = 80
Insert cell
<!-- <style>
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px;
}
.flex-child:first-child {
margin-right: 20px;
}
</style> -->
Insert cell
<style>
.image-container {
position: relative;
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 50%; /* 4:3 aspect ratio */
}

.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.image-container .caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 0px;
box-sizing: border-box;
max-height: 50px;
overflow-y: scroll;
}
</style>
Insert cell
// combined = html`<div id="all">
// <div>
// ${createChart(data)}
// </div>
// <div id="gallery-container"></div>

// </div>`
Insert cell
ReactDOM.render(React.createElement(Gallery), document.getElementById("gallery-container"));

Insert cell
// ReactDOM.render(React.createElement(Gallery), document.getElementById("app"));

Insert cell
// {
// const container = document.createElement('div');
// container.setAttribute('id', 'hierarchy');
// document.body.appendChild(container);
// const chart = createChart(data);
// const hierarchyDiv = document.getElementById('hierarchy');
// hierarchyDiv.appendChild(chart);
// }
Insert cell
Insert cell
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();
}
Insert cell
diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)
Insert cell
tree = d3.tree().nodeSize([dx, dy])
Insert cell
data = FileAttachment("flare-2@1.json").json()
Insert cell
// dx = 20
Insert cell
// dy = width / 6

Insert cell
margin = ({top: 10, right: 120, bottom: 10, left: 40})
// margin = ({top: 10, right: 120, bottom: 30, left: 40})
Insert cell
d3 = require("d3@6")
Insert cell
import {
render,
component,
jsx,
memo,
forwardRef,
React,
ReactDOM,
createElement,
Children,
createRef,
createContext,
lazy,
Fragment,
StrictMode,
Suspense,
cloneElement,
useCallback,
useContext,
useEffect,
useImperativeHandle,
useLayoutEffect,
useMemo,
useReducer,
useRef,
useState,
useDebugValue,
createPortal,
__SECRET_SWITCHER
} from '@j-f1/react'
Insert cell
imageCsv = d3.csv(
"https://raw.githubusercontent.com/AI-EnabledSoftwareEngineering-AISE/RE4VIS/main/data/images_df.csv",
d3.autoType
)

Insert cell
flattenedRandomSelection = imageCsv.slice(120, 140)
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more