family
d3 = require("d3@6");
uv = require("unipept-visualizations@2");
{
const sunburstElement = simpleSunburst; // or something like document.selectElementById("simpleTree");
new uv.Sunburst(sunburstElement, family);
}
simpleSunburst = html`<div id="simpleSunburst"></div>`
tooltipDiv = html`<div id="sunburstTooltip"></div>`
{
const sunburstElement = tooltipDiv;
const sunburst = new uv.Sunburst(sunburstElement, JSON.parse(JSON.stringify(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"
);
}
});
}
colorDiv = html`<div id="sunburst2"></div>`
{
const sunburstElement = colorDiv;
const sunburst = new uv.Sunburst(sunburstElement, JSON.parse(JSON.stringify(taxonomy)), {
colorPalette: ["#FF0000", "#00FF00", "#0000FF"]
});
}
sizeDiv = html`<div id="sunburst3"></div>`
{
const sunburstElement = sizeDiv;
const sunburst = new uv.Sunburst(sunburstElement, JSON.parse(JSON.stringify(taxonomy)), {
radius: 100,
levels: 2,
width: 900,
height: 250
});
}
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.
