d3 = require("d3@6");
uv = require("unipept-visualizations@2");
{
const treeviewElement = simpleTree; // or something like document.selectElementById("simpleTree");
new uv.Treeview(treeviewElement, family);
}
tooltipDiv = html`<div id="treeviewTooltip"></div>`
{
const treeviewElement = tooltipDiv;
const ranks = [
"no rank",
"superkingdom",
"kingdom",
"subkingdom",
"superphylum",
"phylum",
"subphylum",
"superclass",
"class",
"subclass",
"infraclass",
"superorder",
"order",
"suborder",
"infraorder",
"parvorder",
"superfamily",
"family",
"subfamily",
"tribe",
"subtribe",
"genus",
"subgenus",
"species group",
"species subgroup",
"species",
"subspecies",
"varietas",
"forma"
];
const treeview = new uv.Treeview(treeviewElement, taxonomy, {
getTooltipText: (d) => {
let numberFormat = d3.format(",d");
return (
numberFormat(!d.selfCount ? "0" : d.selfCount) +
(d.selfCount && d.selfCount === 1 ? " sequence" : " sequences") +
" specific to this level<br/>" +
numberFormat(!d.count ? "0" : d.count) +
(d.count && d.count === 1 ? " sequence" : " sequences") +
" specific to this level or lower"
);
},
width: 900,
height: 300
});
}
colorDiv = html`<div id="treeview2"></div>`
{
const treeviewElement = colorDiv;
const ranks = [
"no rank",
"superkingdom",
"kingdom",
"subkingdom",
"superphylum",
"phylum",
"subphylum",
"superclass",
"class",
"subclass",
"infraclass",
"superorder",
"order",
"suborder",
"infraorder",
"parvorder",
"superfamily",
"family",
"subfamily",
"tribe",
"subtribe",
"genus",
"subgenus",
"species group",
"species subgroup",
"species",
"subspecies",
"varietas",
"forma"
];
const treeview = new uv.Treeview(treeviewElement, taxonomy, {
nodeStrokeColor: (d) => "orange",
nodeFillColor: (d) => "#FF0000",
linkStrokeColor: (l) => {
// The stroke color of the link depends on the depth of the target node.
const depth = ranks.indexOf(l.target.data.extra.rank);
return ["#FF0000", "#00FF00", "#0000FF"][depth % 3];
},
width: 900,
height: 300
});
}
placementDiv = html`<div id="treeview3"></div>`
{
const treeviewElement = placementDiv;
const ranks = [
"no rank",
"superkingdom",
"kingdom",
"subkingdom",
"superphylum",
"phylum",
"subphylum",
"superclass",
"class",
"subclass",
"infraclass",
"superorder",
"order",
"suborder",
"infraorder",
"parvorder",
"superfamily",
"family",
"subfamily",
"tribe",
"subtribe",
"genus",
"subgenus",
"species group",
"species subgroup",
"species",
"subspecies",
"varietas",
"forma"
];
const treeview = new uv.Treeview(treeviewElement, taxonomy, {
nodeDistance: 300,
enableAutoExpand: true,
autoExpandValue: 0.9,
width: 900,
height: 600
});
}
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.
