Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
chart = {
try {
return dot`${source}`;
} catch (error) {
return this;
}
}
viewof source = {
const textarea = html`<textarea rows=1 spellcheck=false>digraph {
rankdir = LR;
node [shape = oval];
// ARROWS
"main.tsx" [shape = rarrow];
"Public Broadcast" [shape = rarrow];
// COMPONENTS
"web/src/womp.tsx" [shape = component];
"web/src/womp-card.tsx" [shape = component];
"wompCard.less" [shape = component];
"common.less" [shape = component];
"web.less" [shape = component];
"client.less" [shape = component];
// START:
edge [label="", color="black"];
"main.tsx" -> "avatar.tsx" -> "web/src/womp-card.tsx";
"main.tsx" -> "parcel.tsx" -> "web/src/womp-card.tsx";
"main.tsx" -> "explorer.tsx" -> "web/src/womp-card.tsx";
// START: Public Broadcast
edge [label="Womp Info", color="orange"];
"Public Broadcast" -> "web/src/womp-card.tsx";
// START styles
edge [label="", color="blue"];
"common.less" -> "main.tsx";
"web.less" -> "main.tsx";
"client.less" -> "main.tsx";
edge [label="", color="red"];
"wompCard.less" -> "web/src/womp-card.tsx";
// START: web/src/WOMP.TSX
edge [label="", color="green"];
"main.tsx" -> "web/src/womp.tsx";
"web/src/womp.tsx" -> fetchParcel;
"web/src/womp.tsx" -> fetchAuthor;
}`;
textarea.style = `
outline: none;
display: block;
box-sizing: border-box;
width: calc(100% + 28px);
font: var(--mono_fonts);
min-height: 33px;
border: none;
padding: 4px 10px;
margin: 0 -14px;
background: rgb(245,245,245);
tab-size: 2;
`;
textarea.oninput = () => {
textarea.style.height = "initial";
textarea.style.height = `${textarea.scrollHeight}px`;
};
yield textarea;
textarea.oninput();
}
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.
