[Example] Random Histogram

package.json

@@ -18,6 +18,7 @@
     "acorn": "^8.15.0",
     "codemirror": "^6.0.2",
     "d3-array": "^3.2.4",
+    "d3-require": "^1.3.0",
     "object-inspect": "^1.13.4",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"

src/App.jsx

@@ -2,12 +2,21 @@ import {useMemo, useRef, useState, useEffect} from "react";
 import {examples} from "./examples.js";
 import {createEditor} from "./editor.js";
 
-export default function App() {
+function getInitialValue() {
   const initialValue = new URL(location).searchParams.get("name");
+  if (initialValue && examples.find(({name}) => name === initialValue)) {
+    return initialValue;
+  }
+  const name = examples[0].name;
+  history.pushState(null, "", `?name=${name}`);
+  return name;
+}
+
+export default function App() {
   const containerRef = useRef(null);
   const editorRef = useRef(null);
 
-  const [selected, setSelected] = useState(initialValue || examples[0].name);
+  const [selected, setSelected] = useState(getInitialValue());
 
   const code = useMemo(() => {
     return examples.find(({name}) => name === selected).code;

src/editor.js

@@ -6,11 +6,16 @@ import {Runtime} from "@observablehq/runtime";
 import inspector from "object-inspect";
 import {parse} from "acorn";
 import {group} from "d3-array";
+import {require} from "d3-require";
 
 const PREFIX = "//➜";
 
+const BUILTINS = {
+  require: () => require,
+};
+
 function split(code) {
-  return parse(code, {ecmaVersion: "latest"}).body;
+  return parse(code, {ecmaVersion: "latest", sourceType: "module"}).body;
 }
 
 function uid() {
@@ -31,21 +36,18 @@ function debounce(fn, delay = 0) {
   };
 }
 
-function formatMultiline(value) {
-  const lines = value.split("\n");
-  return `\`${lines.map((line, i) => (i === 0 ? line : ` ${line}`)).join("\n")}\``;
-}
-
 function isMultiline(value) {
   const isString = typeof value === "string";
   if (!isString) return false;
   const lines = value.split("\n");
   return lines.length > 1;
 }
 
-function inspect(value, options) {
-  if (isMultiline(value)) return formatMultiline(value);
-  return inspector(value, options);
+function inspect(value, {limit = 200, ...rest} = {}) {
+  if (isMultiline(value)) return value;
+  const string = inspector(value, rest);
+  if (string.length > limit) return string.slice(0, limit) + "…";
+  return string;
 }
 
 function format(value, options) {
@@ -81,7 +83,7 @@ export function createEditor(container, options) {
     run(code);
   }
 
-  const runtime = new Runtime();
+  const runtime = new Runtime(BUILTINS);
   const main = runtime.module();
   const nodesByKey = new Map();
 
@@ -107,7 +109,7 @@ export function createEditor(container, options) {
     for (const node of nodes) {
       const start = node.start;
       const {values, error} = node.state;
-      const V = error ? {value: error} : values;
+      const V = error ? [{value: error}] : values;
       if (V.length) {
         const output = V.map(({value, options}) => format(value, options)).join("\n") + "\n";
         dispatch.push({from: start, insert: output});

src/examples.js

@@ -9,7 +9,7 @@ function add(a, b) {
   return a + b;
 }`;
 
-const INSPECTORS = `doc("line1\\nline2");
+const INSPECTOR = `doc("line1\\nline2");
 
 doc([1, 2, 3]);
 
@@ -32,6 +32,34 @@ doc(new Map([[1, 2], [3, 4]]), {indent: 2});
 
 doc(new Date());`;
 
+const RANDOM_HISTOGRAM = `const d3 = await require("d3");
+
+const count = 200;
+const width = 50;
+
+const randomInt = doc(d3.randomInt(0, width));
+
+const numbers = doc(d3.range(count).map(randomInt));
+
+const groups = doc(d3.group(numbers, d => d));
+
+const bins = doc(d3.range(width).map((_, i) => groups.has(i) ? groups.get(i).length : 0));
+
+const height = doc(d3.max(bins));
+
+{
+  let output = "";
+  for (let i = 0; i < height; i++) {
+    for (let j = 0; j < width; j++) {
+      const bin = bins[j];
+      const h = bin ? bin * height / d3.max(bins) : 0;
+      output += h >= height - i ? "█" : " ";
+    }
+    output += i === height - 1 ? "" : "\\n";
+  }
+  doc(output);
+}`;
+
 const MANDELBROT_SET = `const cols = 80;
 const rows = 30;
 const maxIter = 80;
@@ -69,8 +97,12 @@ export const examples = [
     code: ADDITION,
   },
   {
-    name: "Inspectors",
-    code: INSPECTORS,
+    name: "Inspector",
+    code: INSPECTOR,
+  },
+  {
+    name: "Random Histogram",
+    code: RANDOM_HISTOGRAM,
   },
   {
     name: "Mandelbrot Set",