3f:null 40:["$","title",null,{"children":"Show me | Libraries and Functions | Observable"}] 46:T40a,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`

${Copier("Copy", { value: code })}

Code

${codeSection}

${ evaluate ? htl.html`

Results

${await renderSnippet(code, dependencies)}

` : htl.html`` }

`; }47:T688,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`Error: For this code to run, you need to define the variables: ${missingVariables}` }) 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 ; }48:[{"id":"3b12c349e13f0473701a290d17e9a79b07556c06bd498dd87f00b7b5f79475101f627ccbf33e99c5c4ba22dcb2693467871dd718398c5edfa3175a87c50dd4ea","href":"https://static.observableusercontent.com/files/3b12c349e13f0473701a290d17e9a79b07556c06bd498dd87f00b7b5f79475101f627ccbf33e99c5c4ba22dcb2693467871dd718398c5edfa3175a87c50dd4ea","name":"penguins.png","type":"image/png","lastModified":1698473913376.675,"size":358223},{"id":"7731b788d4d655580c534b85691e8a78dbe715599326ad22bb6e157ca86b14a142508f4f96c43f0ae209e8e7d59343d4935849294a802af95af32b733ef382d5","href":"https://static.observableusercontent.com/files/7731b788d4d655580c534b85691e8a78dbe715599326ad22bb6e157ca86b14a142508f4f96c43f0ae209e8e7d59343d4935849294a802af95af32b733ef382d5","name":"analytics.sqlite","type":"application/x-sqlite3","lastModified":1698473913376.675,"size":38158336}] 44:{"id":"8dbe8ee531056b67","slug":"show-me","title":"Show me","thumbnail":"0f1bebafa58441a7997580b8bd3c70c60fc40e4082af181d094691da8c62a256","access_level":"public","create_time":"$D2023-10-28T06:18:33.376Z","update_time":"$D2023-10-28T06:18:33.376Z","view_time":null,"first_public_time":"$D2023-10-28T06:18:33.376Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"cc62ca71f10761fe","login":"pbiqueryous-repo","name":"Libraries and Functions","avatar_url":"https://avatars-next.observableusercontent.com/3af165f0f88c264d557f44ea2c0bd231e7f3838a766690f9c147869f3f6c2c0d","tier":"starter_2024","bio":"","following":false},"version":2137,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"095ccf69e3466ab9","login":"pbi-queryous","name":"PBI Queryous","avatar_url":"https://avatars-next.observableusercontent.com/0e362e0326315a8b72bf30cfe2bf107a47fb597d0f8798eeb7f6330b2bbb725a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"095ccf69e3466ab9","login":"pbi-queryous","name":"PBI Queryous","avatar_url":"https://avatars-next.observableusercontent.com/0e362e0326315a8b72bf30cfe2bf107a47fb597d0f8798eeb7f6330b2bbb725a","tier":null,"role":"editor"},{"type":"team","id":"cc62ca71f10761fe","login":"pbiqueryous-repo","name":"Libraries and Functions","avatar_url":"https://avatars-next.observableusercontent.com/3af165f0f88c264d557f44ea2c0bd231e7f3838a766690f9c147869f3f6c2c0d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Show me","cells":[{"id":0,"value":"# Show me","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"A simpler UI element for workshops / tutorials than the (incredible) `{Q, A}` from [this notebook](https://observablehq.com/@observablehq/plot-exploration-penguins). Style / functionality based on [this work](https://observablehq.com/@d3/example-components).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"showMe('Plot.tickX([1,2,3], { stroke: \"steelblue\" }).plot()', { open: false })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1859,"value":"To use variables from the notebook, pass in an object of dependencies:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1807,"value":"// Pass in an object of dependencies\nshowMe(`Plot.tickX(data, {x: d => d[xVar]}).plot()`, {open:true, dependencies: { data, xVar }})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1822,"value":"data = [{label: \"a\", value: 1 }, { value: 2, label: \"b\" }, { value: 3, label: \"c\"}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1851,"value":"xVar = \"value\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1864,"value":"For tutorials, we suggest that you set any known dependencies to `undefined` and have users replace those values. The `renderSnippet` function will check for `undefined` values and advise users to edit them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1869,"value":"data2 = undefined","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1820,"value":"showMe(\"Inputs.table(data2)\", { open:true, dependencies: { data2, Inputs }})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1990,"value":"A few additional options:\n- `evaluate`: set to `false` to display the code only\n- `label`: the top level label\n- `styles`: an object of styles for the wrapper (e.g., `{maxWidth: width + \"px\"}`)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1702,"value":"// Set {evaluate:false} to only display the code, and customize the label, styles\nshowMe(\"Plot.plot(data)\", {evaluate: false, label:\"Display the code:\", styles:{maxWidth:width + \"px\"}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1903,"value":"Results from Arquero functions will be shown in a table:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1907,"value":"showMe(`aq.from(data).rollup({mean: d => aq.op.mean(d.value)})`, {dependencies: {data, aq}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1889,"value":"file = FileAttachment(\"penguins.png\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1995,"value":"The function will `await` any asynchronous functions (e.g., data loading):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1893,"value":"showMe(\"file.image()\", { dependencies: { file }, open: true, styles: {maxWidth:width + \"px\"}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1980,"value":"db = FileAttachment(\"analytics.sqlite\").sqlite()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1982,"value":"showMe(\"db.describe()\", { dependencies: { db }, open: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1638,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1569,"value":"async function showMe(code = \"Plot.plot()\",\n { \n open = false, \n evaluate = true, \n label = \"Show me...\", \n styles = {}, \n dependencies = {} \n } = {}) {\n const style = Object.assign(\n {},\n {\n maxWidth: \"640px\",\n background: \"#fffced\",\n boxSizing: \"border-box\",\n padding: \"10px 20px\",\n position: \"relative\"\n },\n styles\n );\n return htl.html`

${label}

\n ${await showCode(code, { evaluate, dependencies })}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2097,"value":"showMe(\"[1, 2, 3]\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2104,"value":"showMe(\"aq.from([{a:1, b:2}, {a:2, b:3}])\", {open:true, dependencies: {aq}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2114,"value":"t = aq.from([{a:1, b:2}, {a:2, b:3}])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2124,"value":"typeof t.objects","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2122,"value":"Object.keys(t)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1932,"value":"AsyncFunction = Object.getPrototypeOf(async function(){}).constructor","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1208,"value":"import {Copier} from \"@mbostock/pbcopy\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"