The avatar for @renenadorp
renenadorp
Public
Edited
Apr 27, 2024
2 forks
1 star
Insert cell
# Link Tree
Insert cell
Insert cell
viewof activeOnly = Inputs.toggle({label: "Active Only", value: true})
Insert cell
Insert cell
Insert cell
rawData = await d3.csv(LINK);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
baseData.filter(r => {if (r.Level=="Tab") return r} );
Insert cell
new_data = {
if (typeof searchText == "string"
&& searchText.length > 0
)
return stratify(searchData).each((d) => {
d.name = d.id;
d.size = 1;
});
else
return stratify(baseData).each((d) => {
d.name = d.id;
d.size = 1;
});

}
Insert cell
Insert cell
Insert cell
dx = 20
Insert cell
dy = width / 7
Insert cell
margin = ({ top: 40, right: 60, bottom: 40, left: 60 })
Insert cell
width = window.innerWidth - margin.left - margin.right
Insert cell
style = html`
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:ital@0;1&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Futura:ital@0;1&display=swap">
<style>
circle:hover {stroke: #f8ad0a;}
body, svg {
font-family: 'Open Sans', sans-serif;
font-size: 30px;
/* font-size: 48px; */
}
</style>
`
Insert cell
tree = d3.tree().nodeSize([dx, dy])
Insert cell
diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)
Insert cell
d3 = require("d3@5")
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