Public
Edited
Oct 28, 2023
Importers
showMe('Plot.tickX([1,2,3], { stroke: "steelblue" }).plot()', { open: false })
// Pass in an object of dependencies
showMe(`Plot.tickX(data, {x: d => d[xVar]}).plot()`, {open:true, dependencies: { data, xVar }})
data = [{label: "a", value: 1 }, { value: 2, label: "b" }, { value: 3, label: "c"}]
xVar = "value"
data2 = undefined
showMe("Inputs.table(data2)", { open:true, dependencies: { data2, Inputs }})
// Set {evaluate:false} to only display the code, and customize the label, styles
showMe("Plot.plot(data)", {evaluate: false, label:"Display the code:", styles:{maxWidth:width + "px"}})
showMe(`aq.from(data).rollup({mean: d => aq.op.mean(d.value)})`, {dependencies: {data, aq}})
file = FileAttachment("penguins.png")
showMe("file.image()", { dependencies: { file }, open: true, styles: {maxWidth:width + "px"}})
db = FileAttachment("analytics.sqlite").sqlite()
showMe("db.describe()", { dependencies: { db }, open: true })
async function showMe(code = "Plot.plot()",
{
open = false,
evaluate = true,
label = "Show me...",
styles = {},
dependencies = {}
} = {}) {
const style = Object.assign(
{},
{
maxWidth: "640px",
background: "#fffced",
boxSizing: "border-box",
padding: "10px 20px",
position: "relative"
},
styles
);
return htl.html`<details open=${open} style=${style}><summary style="font-weight: bold; cursor: pointer; outline: none;">${label}</summary>
${await showCode(code, { evaluate, dependencies })}`;
}
async function showCode(code, {
evaluate = true,
dependencies = {}
} = {}) {
const codeSection = md`
~~~js
${code}
~~~`;
const styleString = {
fontFamily: "system-ui, sans-serif",
fontSize: "14px",
position: "relative"
}
const copierStyleString = {
position: "absolute",
right: "3px",
top: "25px",
width: "50px"
}
return htl.html`
<div style=${styleString}>
<div style=${copierStyleString}>${Copier("Copy", { value: code })}</div>
<strong>Code</strong>
<div style="border:1px solid #d3d3d3;padding:5px; border-radius:5px;margin-bottom:10px; background-color:white;">
${codeSection}
</div>
${
evaluate
? htl.html`<div><strong>Results</strong><br/>
<div style="background-color: white; padding:5px 15px; border-radius:5px; border:1px solid #d3d3d3; overflow-x: hidden;">
${await renderSnippet(code, dependencies)}
</div></div>`
: htl.html``
}
</div>`;
}
async function renderSnippet(rawStr, dependencies = {}) {
// always add Plot, d3, Inputs, and width as dependencies
if(!dependencies.Plot) dependencies.Plot = Plot
if(!dependencies.d3) dependencies.d3 = d3
if(!dependencies.Inputs) dependencies.Inputs = Inputs
if(!dependencies.width) dependencies.width = width
dependencies = Object.assign(dependencies, { Plot, d3, width })
// show arquero results in a table
let str = rawStr;
// if(str.startsWith("aq")) {
// str = `Inputs.table(${rawStr})`
// }
let code = `return ${str}`
// create the array that we will pass into new Function from the keys
let arr = Object.keys(dependencies).concat([code])
const func = new AsyncFunction(...arr)
const results = await func(...Object.values(dependencies))
.then((r) => r)
.catch(e => {
const missingVariables = Object.keys(dependencies).filter(d => !dependencies[d]).join(", ")
return htl.html`<strong style="color:#ff5400;">Error:</strong> For this code to run, you need to define the variables: <code>${missingVariables}</code>`
})
console.log(results.constructor === Array && typeof results[0] === "object")
if((results.constructor === Array && typeof results[0] === "object") // array of objects
|| typeof results.objects === "function" // arquero table
) {
return Inputs.table(results)
} else if(results.constructor === Array && (typeof results[0] === "string" || typeof results[0] === "number")) {
return results.slice(0, 20).join(", ") + "...."
}
return results;
// return (results.constructor === Array && typeof results[0] === "object") ? Inputs.table(results) : results ;
}
showMe("[1, 2, 3]")
showMe("aq.from([{a:1, b:2}, {a:2, b:3}])", {open:true, dependencies: {aq}})
t = aq.from([{a:1, b:2}, {a:2, b:3}])
typeof t.objects
Object.keys(t)
AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
import {Copier} from "@mbostock/pbcopy"
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.
