A collector of things worth knowing and things not worth knowing.
Published
Edited
Feb 5, 2022
1 star
MyLabelFormatter = function(annotation) {
// Find the label body (if any)
const label = annotation.bodies.find(b => b.purpose === 'identifying');
if (label) {
// Return an HTML label, wrapped in an SVG foreignObject
const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
foreignObject.innerHTML =
`<label xmlns="http://www.w3.org/1999/xhtml" >${label.value}</label>`;
return {
element: foreignObject
};
}
}
html`
<style>
.a9s-annotation foreignObject {
overflow:visible;
width:1px;
height:1px;
}
.a9s-annotation foreignObject label {
display:inline-block;
padding:3px 8px;
}
</style>`
MyClassFormatter = function(annotation) {
const label = annotation.bodies.find(b => b.purpose === 'identifying');
if (label) {
return label.value;
}
}
html
`<style>
.a9s-annotation.Lucy .a9s-inner {
stroke:#00a4cb;
fill:#00a4cb22;
}
.a9s-annotation.Emmet .a9s-inner {
stroke:#ffa500;
fill:#ffa50022;
}
.a9s-annotation.Batman .a9s-inner {
stroke:#bb1dbb;
fill:#bb1dbb22;
}
</style>`
html
`<style>
.a9s-annotation.step-3 label {
transform:translateY(-100%) translateY(-1px) translateX(-1px);
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
color:#fff;
border-width:2px 2px 0 2px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.a9s-annotation.step-3.Lucy label {
border-color:#00a4cb;
background-color:#00a4cb;
}
.a9s-annotation.step-3.Emmet label {
border-color:#ffa500;
background-color:#ffa500;
}
.a9s-annotation.step-3.Batman label {
border-color:#bb1dbb;
background-color:#bb1dbb;
}
</style>`
anno.setAnnotations(SAMPLE_ANNOTATIONS);
// We just use this, so we can switch 'Step 3' on and off in the example image
Step3Formatter = function(annotation) {
return 'step-3';
}
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.
