2f:T62f,examples = ({ "basic: hello world": `const body = d3.select("body"); body.append("div").html("hello world");`, "intermediate: column chart with average marker": `import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm"; const mydata = data; 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" }), ] }) const div = document.querySelector("body"); div.append(plot);`, "advanced: NPS drilldown beeswarm chart": `import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm"; const mydata = data; 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 }) ) ] }); const div = document.querySelector("body"); div.append(plot); ` })30:[{"id":"460711dcb88b850e10d30076d9166c0623d046d0c6becdc3480eb6de6a08041420afa8c3b537fc4b077ddcd696a4b985b7a489b8eaafb16f9a3c0fd1e4d9fdc3","href":"https://static.observableusercontent.com/files/460711dcb88b850e10d30076d9166c0623d046d0c6becdc3480eb6de6a08041420afa8c3b537fc4b077ddcd696a4b985b7a489b8eaafb16f9a3c0fd1e4d9fdc3","name":"nps_by_country.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1762706764613.367,"size":9057},{"id":"397a093af35bd62957378a2c91b0f231f9d2cd1761fcd7821e08f08eb7a9ec6567e0de16088038fb8eefad07a593eb686795a694a6a97cfeff69ce247eede82a","href":"https://static.observableusercontent.com/files/397a093af35bd62957378a2c91b0f231f9d2cd1761fcd7821e08f08eb7a9ec6567e0de16088038fb8eefad07a593eb686795a694a6a97cfeff69ce247eede82a","name":"data2.csv","type":"text/csv","lastModified":1763113821841.565,"size":2343}] 2d:{"title":"Custom Visualisation Builder: Data Interrogator","cells":[{"id":0,"value":"# Custom Visualisation Builder: Data Interrogator","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"viz = htl.html`\n

\n${downloadButton(data)}
${downloadButtonJSON(data)}\n

\n
\n\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"data_summary = htl.html`

${viewof radios}

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"code_sample = htl.html`${viewof js_editor}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"code = htl.html`

${prettier.format(examples[typeof(data[0]) == \"string\" ? data[0]: \"basic: hello world\"], {\n  parser: \"babel\",\n  plugins: [prettier]\n}).replace(\"= data\", \"= ${JSON.stringify(data)}\")}

`;","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"viewof js_editor = Editor({\n language: \"javascript\",\n value: code,\n label: \"Paste the below code sample into the Object Inspector Javascript Code textbox\",\n keywords: \"${JSON.stringify(data)}\"\n });\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"viewof radios = Inputs.radio([\"as table\", \"as json\"], {label: \"View my data as:\", value: \"as table\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"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":false,"hidden":false,"mode":"ojs"},{"id":5,"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":false,"hidden":false,"mode":"ojs"},{"id":49,"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":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"styles = htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"workbook = FileAttachment(\"nps_by_country.xlsx\").xlsx()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"workbook.sheetNames","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"data = workbook.sheet(0, {\n headers: true,\n // range: \"A1:J10\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"data2 = await FileAttachment(\"data2.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"import { Editor } from \"@cmudig/editor\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"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"}],"files":"$W30","stdlib":"1","titling":"auto"}