2f:T687,examples = ({"my code": mycode, "hello world": `return "hello world";`, "basic: simple scatter plot": `import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm"; const plot = Plot.plot({ x: {label: "Category"}, marks: [ Plot.dotY(mydata, { x: "_row", y: "NPS" }) ] }) return plot`, "intermediate: column chart with average marker": `import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm"; const plot = Plot.plot({ x: {label: "Category"}, marks: [ Plot.ruleY(mydata.filter(d => d["_row"] == "NET"), { y: "NPS" }), Plot.tip(mydata.filter(d => d["_row"] == "NET"), { y: "NPS", title: d => "Average: " + d["NPS"] }), Plot.barY(mydata.filter(d => d["_row"] != "NET"), { x: "_row", y: "NPS", sort: { x: "y", reverse: true }, fill: "steelblue" }) ] }) return plot `, "advanced: NPS drilldown beeswarm chart": `import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm"; const plot = Plot.plot({ height: 340, width: 900, y: {label: "Likelihood to recommend"}, color: {legend: true, reverse: true}, style: {fontSize: 12}, marks: [ Plot.dot(mydata, Plot.dodgeX("middle", { fx: "Dislikes category single choice", // add small vertical noise to break ties (tweak 0.25 if needed) y: d => d["Likelihood to recommend"] + (Math.random() - 0.5) * 0.25, r: 3, fill: "NPS Category", title: d => "Detractor reason: " + d["Dislikes"], tip: true }) ) ] }); return plot` })30:T4eb,styles = htl.html``31:T1db6,observable_styles = htl.html``32:[] 2d:{"title":"Interactive Javascript Editor","cells":[{"id":69,"value":"# Interactive Javascript Editor","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"viewof config = Inputs.radio([\"Interactive Javascript Editor\", \"Visualisation\", \"Download the data\"], {label: \"View\", value: \"Interactive Javascript Editor\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"toggle_examples = htl.html`

\n${viewof select_code_example}\n

As per the code examples, reference your data as: mydata

To refresh the visualisation, click the play javascript ⯈ symbol in the top right corner of the code editor.

To save your code, paste it into the Object Inspector Javascript Code textbox, then click Calculate.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"output = config == \"Interactive Javascript Editor\"? htl.html`

${data_summary}

${viewof js_editor}

Visualisation preview:

${visualisation}

` : config == \"Visualisation\"? htl.html`${visualisation}`: htl.html`

${downloadButton(mydata)}
${downloadButtonJSON(mydata)}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"viewof select_code_example = Inputs.select(Object.keys(examples), {label: \"Select code example\", value: \"my code\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"### view data component","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"viewof radios = Inputs.radio([\"as table\", \"as json\"], {label: \"View my data as:\", value: \"as table\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"data_summary = htl.html`

${viewof radios}

${radios == \"as table\"? Inputs.table(mydata, {\n rows: 20,\n //maxWidth: 900,\n layout: \"fixed\"\n}): prettyPrintJSON(mydata)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"### js editor component","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"viewof js_editor = Editor({\n language: \"javascript\",\n value: examples[select_code_example]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"### visualisation component","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"visualisation = eval(function run() {\n const f = new Function(`\n return (async () => {\n ${convertMyData(convertImportsToAwait(js_editor))} \n })();\n `);\n return f(); // this returns a Promise\n }())","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"formatted code:","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"

${prettier.format(`import * as Plot from \"https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm\";\n\nreturn Plot.plot({ marks:[Plot.dot(mydata, {x: \"x\", y: \"y\"})] });`, {\n  parser: \"babel\",\n  plugins: [prettier]\n}).replace(\"= data\", \"= ${JSON.stringify(data)}\")}

","pinned":false,"hidden":false,"mode":"html"},{"id":168,"value":"mydata = [\n{x: 1, y: 2},\n{x: 3, y: 4},\n{x: 5, y: 6},\n{x: 7, y: 8}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"JSON.stringify(mydata)","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"mycode = `import * as Plot from \"https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm\";\n\nreturn Plot.plot({ marks: [Plot.dot(mydata, { x: \"x\", y: \"y\" })] });\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":181,"value":"function convertMyData(code) {\n return code.replace(/\\bmydata\\b/g, JSON.stringify(mydata));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"function convertImportsToAwait(code) {\n return code\n\n // import * as X from \"url\"\n .replace(\n /import\\s+\\*\\s+as\\s+([A-Za-z_$][\\w$]*)\\s+from\\s+[\"']([^\"']+)[\"'];?/g,\n (m, ns, url) => `const ${ns} = await import(\"${url}\");`\n )\n\n // import X from \"url\"\n .replace(\n /import\\s+([A-Za-z_$][\\w$]*)\\s+from\\s+[\"']([^\"']+)[\"'];?/g,\n (m, name, url) => `const ${name} = (await import(\"${url}\")).default;`\n )\n\n // import { a, b as c } from \"url\"\n .replace(\n /import\\s+\\{([^}]*)\\}\\s+from\\s+[\"']([^\"']+)[\"'];?/g,\n (m, bindings, url) => `const {${bindings}} = await import(\"${url}\");`\n )\n\n // import X, { a, b as c } from \"url\"\n .replace(\n /import\\s+([A-Za-z_$][\\w$]*)\\s*,\\s*\\{([^}]*)\\}\\s+from\\s+[\"']([^\"']+)[\"'];?/g,\n (m, defaultName, named, url) =>\n `const ${defaultName} = (await import(\"${url}\")).default;\\n` +\n `const {${named}} = await import(\"${url}\");`\n );\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"import { Editor } from \"@cmudig/editor\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"// Thanks Toph Tucker: https://observablehq.com/@tophtucker/hello-prettier\nprettier = require(\"prettier@2\", \"prettier@2/parser-babel.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"function prettyPrintJSON(json) {\n const formatted = JSON.stringify(json, null, 2);\n const pre = document.createElement(\"pre\");\n pre.textContent = formatted;\n return pre;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"downloadButton = (data, filename = 'data.csv') => {\n const csv = new Blob([d3.csvFormat(data)], { type: \"text/csv\" });\n const size = (csv.size / 1024).toFixed(0);\n\n const button = DOM.download(\n csv,\n filename,\n `Download as CSV file: ${data.length} rows (~${size} KB)`\n );\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"downloadButtonJSON = (data, filename = 'data.json') => {\n // Convert the data to formatted JSON\n const json = new Blob([JSON.stringify(data, null, 2)], { \n type: \"application/json\"\n });\n\n const size = (json.size / 1024).toFixed(0);\n\n // Use Observable's DOM.download\n const button = DOM.download(\n json,\n filename,\n `Download as JSON file: ${data.length} rows (~${size} KB)`\n );\n\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}