Published
Edited
May 29, 2020
7 stars
{
visibility().then(() => (roughNotation.annotate(document.evaluate("//a[contains(., 'roughnotation.com')]", document ).iterateNext(), { type: 'circle', color: "red" }).show()));
return html``; //hide "undefined"
}
visibility().then(() => (roughNotation.annotate(underlineSection.querySelector("span"), { type: 'underline', color: "#B71C1C" }).show()))
visibility().then(() => (roughNotation.annotate(document.querySelector("#boxSection span"), { type: 'box', color: "#4A148C" }).show()))
visibility().then(() => (roughNotation.annotate(document.querySelector("#circleSection span"), { type: 'circle', color: "#0D47A1" }).show()))
visibility().then(() => (roughNotation.annotate(document.querySelector("#highlightSection span"), { type: 'highlight', color: "#FFD54F" }).show()))
visibility().then(() => (roughNotation.annotate(document.querySelector("#strikeSection span"), { type: 'strike-through', color: "#1B5E20" }).show()))
visibility().then(() => (roughNotation.annotate(crossedOff.querySelector("span"), { type: 'crossed-off', color: "#F57F17" }).show()))
visibility().then(() => {
const a1 = roughNotation.annotate(groupSection.querySelector("h3"), { type: 'box', color: "#BF360C" })
const a2 = roughNotation.annotate(groupSection.querySelector("span"), { type: 'highlight', color: "#FFFF00" })
const a3 = roughNotation.annotate(groupSection.querySelector("i"), { type: 'underline', color: "#BF360C" })
const ag = roughNotation.annotationGroup([a2, a3, a1]).show()
})
visibility().then(() => {
const a1 = roughNotation.annotate(configSection.querySelector("h3"), { type: 'box', color: "#D50000", strokeWidth: 10}).show();
const a3 = roughNotation.annotate(configSection.querySelector("span"), { type: 'box', color: "#33691E", animationDuration: 3000}).show();
})
visibility().then(() => {
const a1 = roughNotation.annotate(noanimSection.querySelector("h3"), { type: 'box', color: "#263238", animate: false }).show()
const a3 = roughNotation.annotate(noanimSection.querySelector("i"), { type: 'underline', color: "#263238", animate: false }).show()
})
roughNotation = import('https://unpkg.com/rough-notation@0.2.0/lib/rough-notation.esm.js?module')
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.
