Notebooks 2.0 is here.
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” ― Antoine de Saint-Exupéry
Public
Edited
Jan 29, 2023
Paused
Importers
2 stars
/**
* Embed SVG data into HTML using an <img> tag
*
* @param {string} data - SVG markup
* @return {Text} an HTML <img> element
*/
svgAsImage = (data) =>
Object.assign(html`<img>`, {
src: `data:image/svg+xml,${encode(data)}`
})
/**
* Embed SVG data into HTML using an <object> tag
*
* @param {string} data - SVG markup
* @return {Text} an HTML <object> element
*/
svgAsObject = (data) =>
Object.assign(html`<object>`, {
type: "image/svg+xml",
data: `data:image/svg+xml,${encode(data)}`
})
/**
* Encode SVG/XML markup so that it can be embedded safely into a data URL…
*
* @param {string} data - SVG or XML markup
* @return {string} an encoded data URL part
*/
encode = (data) =>
encodeURIComponent(
(data + "")
/* trim white space */ .replace(/^\s+|\s+$/g, "")
/* drop comments */ .replace(/<!--[\s\S]*?-->/g, "")
/* drop empty tags */ .replace(/<(\S+)\s*>\s*<[/]\1\s*>/g, "")
.replace(/"([^"]*)"/g, "'$1'")
)
.replace(/(%(?:0A|20))\1*/g, (match, p1) => decodeURIComponent(p1))
.replace(/(%(?:2[BF]|3A|[37][BD]))/g, (match, p1) => decodeURIComponent(p1))
.replace(/(?:[^\S]*[\n\r\f\x0b\x85\u2028\u2029]){2,}/g, "\n")
.replace(/^ +/gm, "")
.split(/\n/)
.join("")
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.
