A collector of things worth knowing and things not worth knowing.
Published
Edited
Feb 4, 2022
3 stars
MyImportantFormatter = function(annotation) {
const isImportant = annotation.bodies.find(b => {
return b.purpose === 'tagging' && b.value.toLowerCase() === 'important'
});
if (isImportant) {
return 'important';
}
}
html`
<style>
.a9s-annotation.important .a9s-inner {
stroke-width:2px;
stroke:blue;
fill:rgba(0,0,255,0.1);
-webkit-filter:drop-shadow(0 0 10px rgba(0,0,255,0.8));
filter:drop-shadow(0 0 10px rgba(0,0,255,0.8));
}
.a9s-annotation.important .a9s-inner:hover {
stroke-width:6px;
stroke:blue;
fill:rgba(0,0,255,0.3);
}
</style>`
// Option 2: set the anno.formatters
anno.formatters = [ MyImportantFormatter ];
// Import Annotorious as a library in this notebook
Annotorious = require('@recogito/annotorious@2.7.1');
// Initialize Annotorious on the sample image
anno = Annotorious.init({
image: image,
allowEmpty: true
});
// Add sample annotations on Lucy, Emmet and Batman
anno.setAnnotations(SAMPLE_ANNOTATIONS);
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.
