Public
Edited
Nov 2, 2023
function icon(name) {
switch (name) {
case 'comment':
return svg`<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M13 3L9 3L3 3C2.44772 3 2 3.44772 2 4L2 11C2 11.5523 2.44772 12 3 12L7.5 12L9.5 14L11.5 12L13 12C13.5523 12 14 11.5523 14 11L14 4C14 3.44772 13.5523 3 13 3Z" stroke="currentColor" stroke-width="2"></path><line x1="5" y1="6" x2="10" y2="6" stroke="currentColor" stroke-width="2"></line><line x1="5" y1="9" x2="11" y2="9" stroke="currentColor" stroke-width="2"></line></svg>`;
case 'cell menu':
return svg`<svg viewBox="0 0 8 14" fill="currentColor" stroke="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" width="8" height="14"><circle r="1.5" cx="4" cy="2"></circle><circle r="1.5" cx="4" cy="7"></circle><circle r="1.5" cx="4" cy="12"></circle></svg>`;
case 'menu':
return svg`<svg style="margin: 0 .25rem;" viewBox="0 0 16 16" fill="currentColor" stroke="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"><circle r="2" cy="8" cx="2"></circle><circle r="2" cy="8" cx="8"></circle><circle r="2" cy="8" cx="14"></circle></svg>`;
}
}
notice = (node, hed) => html`<style>
.notice {
box-sizing: border-box;
border: 1px solid #7381bb;
background: #eef0f6;
padding: 3px 8px;
max-width: 640px;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir,
helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial,
sans-serif;
}
.notice p:first-child {
margin-top: 0;
}
.notice p:last-child {
margin-bottom: 0;
}
</style><div class="notice">${node}</div>`
mobile = width <= 640
html`<style>
blockquote {
margin-left: 0;
padding-left: 10px;
border-left: solid 2px lightgray;
}
</style>`
import { svg as cheery } from "33e458031363ef50"
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.
