Dataviz @ databricks
penrose = require("@penrose/core")
baseURL = "https://raw.githubusercontent.com/penrose/penrose/main/examples/"
registry = (await fetch(baseURL + "registry.json")).json()
domains = objToMap(registry.domains)
substances = objToMap(registry.substances, ([key, d]) => d.domain === _domain.key)
styles = objToMap(registry.styles, ([key, d]) => d.domain === _domain.key)
objToMap = (obj, filter = () => true) => new Map(
Object.entries(obj)
.filter(filter)
.map(([key, value]) => ([value.name, {key, ...value}]))
)
function highlight(editor) {
editor.textContent = editor.textContent;
highlightjs.registerLanguage('penrose-dsl', penroseLanguage('dsl'))
highlightjs.registerLanguage('penrose-sty', penroseLanguage('sty'))
highlightjs.registerLanguage('penrose-sub', penroseLanguage('sub'))
highlightjs.highlightElement(editor)
}
function penroseLanguage(type) {
let keywords = null;
if (type === "dsl") {
keywords = "type value constructor function predicate notation Prop";
}
if (type === "sty") {
keywords =
"forall where with delete as true false layer encourage ensure override bove below";
}
if (type === "sub") {
keywords = "AutoLabel Label NoLabel All";
}
const COMMENT = {
variants: [highlightjs.COMMENT('--', '$'), highlightjs.C_BLOCK_COMMENT_MODE]
};
return function(hljs) {
return {
name: `Penrose-${type}`,
alias: [type],
aliases: ['penrose'],
keywords: keywords,
contains: [COMMENT, highlightjs.QUOTE_STRING_MODE]
};
};
}
editorStyle = `
border: 1px solid #eee;
background: #fafafa;
font-family: Menlo,Consolas,monospace;
font-size: 13px;
padding: 10px;
tab-size: 4;
line-hieght: 1.4;
overflow-wrap: break-word;
max-height: 250px;
`
import {Radio} from "@observablehq/inputs"
import {Editor, highlightjs} from '@cmudig/editor'
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.
