fig={
const svg = d3.select(document.getElementById("simpleTree"))
// doing this because observable tries to rerender and we don't want to overplot
svg.selectAll("g").remove();
svg.selectAll("rect").remove();
svg
.append("rect")
.attr("id","reset-catcher")
.attr("width",width)
.attr("height",400)
const fig = new ft.FigTree(document.getElementById("simpleTree"),margins, tree)
const figureGroup = d3.select(`.${fig.id}`)
fig.layout(ft.rectangularZoomedLayout(tree.rootNode))
.nodes(ft.roughCircle()
.radius(20)
.fillAttr("stroke","steelblue")
.fillAttr("stroke-width",2)
.strokeAttr("stroke-width",2)
.strokeAttr("stroke","grey")
)
.branches(ft.roughBranch()
.attr("stroke-width",2)
.attr("stroke","grey")
.attr("cursor","pointer")
.on("click",(edge,n,i)=>{
fig.layout(ft.rectangularZoomedLayout(tree.getNode(edge.v1.id)))
}))
svg
.select("#reset-catcher")
.on("click",()=>{
console.log("click")
fig.layout(ft.rectangularZoomedLayout(tree.rootNode))
})
return fig;
}
html `<svg width=${width} height="400" id="simpleTree2"/>`
fig2={
const svg = d3.select(document.getElementById("simpleTree2"))
// doing this because observable tries to rerender and we don't want to overplot
svg.selectAll("g").remove();
const fig = new ft.FigTree(document.getElementById("simpleTree2"),margins, tree)
fig.layout(ft.rectangularZoomedLayout(tree.rootNode))
.nodes(ft.roughCircle()
.radius(20)
.fillAttr("stroke","steelblue")
.fillAttr("stroke-width",2)
.strokeAttr("stroke-width",2)
.strokeAttr("stroke","grey")
)
.branches(ft.roughBranch()
.attr("stroke-width",2)
.attr("stroke","grey")
)
const figGroup =svg.select(`#${fig.id}`)
// console.log(figGroup)
// const zoom = d3.zoom()
// .scaleExtent([1, 5])
// .on("zoom", () => svg.attr("transform", d3.event.transform));
// svg.call(zoom).call(zoom.transform, d3.zoomIdentity);
function zoomed({transform}) {
svg.attr("transform", transform);
}
svg.call(d3.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed));
return fig
}
tree.orderByNodeDensity(false)
ft=import("https://cdn.jsdelivr.net/gh/rambaut/figtree.js@8f3ad96/dist/figtree.esm.js")
d3 = require("d3@6")
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.
