⚡ Data scientist, I enjoy telling stories with data. I'm currently learning D3.js and working on hobby projects, Mapbox visualizations, and fiddling with Juniper network data.
Published
Edited
Apr 24, 2022
Importers
createHint({ content: exampleText, type: "error" })
createHint({ content: exampleText, type: "warn" })
createHint({ content: exampleText, type: "info" })
createHint({
content: `
## Hi
this is a test
`,
type: "empty"
})
function createHint({ content, type = "info" }) {
const markdownContent = html`${marked.parse(dedent.default(content))}`;
css(markdownContent, {
"margin-block-start": 0
});
const element = html`<blockquote>${markdownContent}</blockquote>`;
const typeColors = {
info: {
backgroundColor: "rgba(24,112,240,.1)",
borderColor: "#1870f0"
},
warn: {
backgroundColor: "rgba(216,64,0,.1)",
borderColor: "#d84000"
},
error: {
backgroundColor: "rgba(186,6,51,.1)",
borderColor: "#ba0633"
},
empty: {
backgroundColor: "transparent",
borderColor: "#1870f0"
}
};
css(element, {
position: "relative",
padding: "1rem 1rem 0 1rem",
margin: "1rem 0",
"border-radius": ".25rem",
border: "1px solid #e0e0e6",
"background-color": typeColors[type]["backgroundColor"],
"border-left": `4px solid ${typeColors[type]["borderColor"]}`
});
return element;
}
function css(element, style) {
for (const property in style) element.style[property] = style[property];
}
import { signature } from "@mootari/signature@553"
marked = require("marked@4.0.14/lib/marked.umd.js")
dedent = import("https://cdn.skypack.dev/dedent@0.7.0?min")
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.
