Published
Edited
Sep 28, 2022
14 stars
Plot: Quantitative groupsPlot: Coloring lines in wide untidy dataTable with linksClick a button to add to an arrayPlot: Stacked bars with totalsPlot: Click handler render transformSending notifications every week, two weeks, month, etc.See full stack trace with queueMicrotaskNormalize SVG elements to pathsCustom table, click to select rowPlot: Bar chart with label overlayCells, streaming, and side effectsNotes to self on error handlingMasking special namesRecursive Plot subtitlesTiming-safe and and orPlot: Simple render transformFetch CSV from private GitHub repoGeoJSON tableThe two kinds of Plot widthCould Plot.auto make the Simpsons cell heatmap? #1672Plot: Dual axis line chartImport from past versionFacet wrapConvert Plot.auto to explicit marksPlay button and mutationInteractive Plot legendRects in a tableAverage line in faceted plotHorizontal inputsUse Inputs.form with a templateFetch a local file from a notebookHow to respect version locking in an embedded notebookUpdate method on DOM nodeHello, AG GridBeware d3.select on ObservableRe-run cell when checkbox is clickedHow to fix Plot facet labels getting cut offGet JavaScript array from Markdown listInputs.select: Chaining and defaulting to no filterTable with serif fontSetting path length as CSS property variable with D3Read in CSV, define values as undefined/nullUsing a mutable cell to log stuffCombining Inputs with internal interactivity in a chartDrag (SVG), with scaleGive a user a persistent personal key for a notebookSetting @mootari/range-slider from another inputSynchronized slider and dropdownXML to radio button optionsFilter dates from JSONSurprising colors in PlotVega-Lite, JSON and JavaScript APIUse a different render function depending on widthTransition from previous value to new valueDon’t use ordinal scales for datesFormat years stored as numbers without commas in PlotDifferences between htl.html and htl.html.fragmentScrubber await visibilityDifferences between html and htl.htmlWolfram embed demoRe: Get multiple properties from the same object in one array of unique valuesD3 Tube MapRe: How to access data object from a nested arraySynchronized checkboxesGroup all rows by school_type, count and create a percentage of the totalDebug HTML cellsMake an array of PlotsHow to compose generators
Convert JavaScript to Observable JavaScript
Also listed in…
Utilities
nodes = {
const comments = [];
try {
const nodes = acorn.parse(input, {
ecmaVersion: 11,
sourceType: "module",
onComment: comments
}).body;
// Interleave top-level comments among AST nodes
for (const comment of comments) {
const {start} = comment;
const priorNodes = nodes.filter((n) => n.start <= start);
// Only splice in comment if it starts after the end of the previous node
if (!priorNodes.length || priorNodes[priorNodes.length - 1].end < start) {
nodes.splice(priorNodes.length, 0, comment);
}
}
return nodes;
} catch (err) {
throw new Error("Cannot parse the vanilla JavaScript you entered above.\n" + err);
}
}
cells = {
const cells = [];
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
switch (node.type) {
case "Line": {
// Combine consecutive single-line comments
if (i && nodes[i - 1].type === node.type) {
cells[cells.length - 1].value += "\n" + node.value.trim();
break;
}
// or else cascade to case "Block"
}
case "Block": {
cells.push({ type: "md", value: node.value.trim() });
break;
}
case "VariableDeclaration": {
// Can have multiple declarations in one statement:
// const x = 0, y = 1;
for (const declaration of node.declarations) {
if (declaration.id.type === "Identifier") {
const name = declaration.id.name;
const value = input.slice(
declaration.init.start,
declaration.init.end
);
if (declaration.init.type === "ObjectExpression") {
// Special case for wrapping object literals in parentheses
cells.push({ type: "js", value: `${name} = (${value})` });
} else {
cells.push({ type: "js", value: `${name} = ${value}` });
}
} else if (declaration.id.type === "ObjectPattern") {
// Destructuring:
// const {a, b} = {a: "toph", b: "tucker"};
// const {first: a, last: b} = {first: "toph", last: "tucker"};
// const {first, last} = user;
for (let i = 0; i < declaration.id.properties.length; i++) {
const key = declaration.id.properties[i].key.name;
const name = declaration.id.properties[i].value.name;
if (declaration.init.type === "Identifier") {
cells.push({
type: "js",
value: `${name} = ${declaration.init.name}.${key}`
});
} else if (declaration.init.type === "ObjectExpression") {
const { start, end } = declaration.init.properties.find(
(d) => d.key.name === key
).value;
const value = input.slice(start, end);
cells.push({ type: "js", value: `${name} = ${value}` });
}
}
}
}
break;
}
case "EmptyStatement": {
break;
}
default: {
cells.push({ type: "js", value: input.slice(node.start, node.end) });
break;
}
}
}
return cells;
}
acorn = require("acorn@8")
import {copyCellButton} from "@tophtucker/generate-copied-cells"
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.
