28:null 29:["$","title",null,{"children":"CDT Utilities (2026) | Jo Wood | Observable"}] 2e:Tc4e,function downloadData(data, options = {}) { const {format = "csv", filename, label} = options; const formatKey = format.trim().toLowerCase(); const isPrimitive = (value) => value === null || ["string", "number", "boolean", "bigint"].includes(typeof value); const isPlainObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value) && (Object.getPrototypeOf(value) === Object.prototype || Object.getPrototypeOf(value) === null); const serializeDelimited = (data, format, formatRows, name) => { if (isPlainObject(data)) { return format([data]); } if (!Array.isArray(data)) { throw new TypeError( `${name} format expects an object or an array of objects or primitive values.` ); } if (data.every(isPrimitive)) { return formatRows(data.map((value) => [value])); } if (data.every(isPlainObject)) { return format(data); } throw new TypeError( `${name} data must contain either only objects or only primitive values.` ); }; const formats = { csv: { serialize: (data) => serializeDelimited(data, d3.csvFormat, d3.csvFormatRows, "CSV"), extension: "csv", mimeType: "text/csv;charset=utf-8", label: "Download as local CSV file" }, tsv: { serialize: (data) => serializeDelimited(data, d3.tsvFormat, d3.tsvFormatRows, "TSV"), extension: "tsv", mimeType: "text/tab-separated-values;charset=utf-8", label: "Download as local TSV file" }, json: { serialize: (data) => JSON.stringify(data, null, 2), extension: "json", mimeType: "application/json;charset=utf-8", label: "Download as local JSON file" }, text: { serialize: (data) => { if (typeof data === "string") { return data; } if ( Array.isArray(data) && data.every( (d) => d === null || ["string", "number", "boolean", "bigint"].includes(typeof d) ) ) { return data.map(String).join("\n"); } throw new TypeError( 'Text format expects a string or an array of primitive values; use "csv" or "json" for objects.' ); }, extension: "txt", mimeType: "text/plain;charset=utf-8", label: "Download as local text file" } }; const selected = formats[formatKey]; if (selected === undefined) { throw new Error(`Unsupported download format: ${format}`); } const blob = new Blob([selected.serialize(data)], { type: selected.mimeType }); const href = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(href)); return html`${label ?? selected.label}`; }2f:T505,function createLookup(objects, options = {}) { const { keys = options.key, // Use 'key' if 'keys' is not provided values = options.value, // Use 'value' if 'values' is not provided separator = "_" } = options; const getNestedValue = (obj, path) => path .split(".") .reduce((acc, part) => (acc == null ? undefined : acc[part]), obj); const getFinalSegment = (path) => { const segs = path.split("."); return segs[segs.length - 1]; }; return objects.reduce((acc, obj) => { // Generate the lookup key, supporting nested properties const lookupKey = Array.isArray(keys) ? keys.map((k) => getNestedValue(obj, k)).join(separator) : getNestedValue(obj, keys || Object.keys(obj)[0]); // Generate the lookup value, supporting nested properties let lookupValue; if (values === undefined) { lookupValue = obj; } else if (Array.isArray(values)) { lookupValue = values.reduce((valAcc, val) => { valAcc[getFinalSegment(val)] = getNestedValue(obj, val); return valAcc; }, {}); } else { // If values is a single string, return the nested value directly lookupValue = getNestedValue(obj, values); } acc[lookupKey] = lookupValue; return acc; }, {}); }30:T53f,Useful for creating animated visualizations. To import: ```javascript import {ticker} from "observable:@jwolondon/utilities-cdt-2026" ``` To use: **ticker(_{options}_)** Provides a generator function that sequentially yields values between 0 and 1 over a customisable length of time. Values are rounded to 3 decimal places in case specific tick values need to be tested. A ticker should be created in its own code block and then any other code block, such as a Plot specification can then reference the ticker code block and will be updated on every new tick. The non-mandatory _options_ object allows customisation of the timing and sequence of tick values returned by the function: - **timeToComplete: _milliseconds_** The number of milliseconds to complete a sequence of 0 to 1 ticks. Default 1000 (1 second). - **delay: _milliseconds_** The number of milliseconds delay between each new tick value generated. This allows more intensive drawing functions that update with a tick value to update less frequently. Default 10 milliseconds. - **repeat: _repeatStyle_** Determine what happens when ticker value reaches 1. If `"none"`, ticker will stop; if `"loop"` ticker will reset to 0 and then continue to 1, repeating indefinitely; if "alternate" will alternate between 0 to 1 and 1 to 0 indefinitely. Default `"none"`. ### Example31:T723,function Player(options = {}) { const { step = 0.001, secondsPerLoop = 24, autoplay = false, alternate = false } = options; if (!Number.isFinite(step) || step <= 0) { throw new RangeError("Player: step must be a positive finite number"); } const values = [...d3.range(0, 1, step), 1]; const n = values.length; const form = html``; let [rafId,t0] = [null,null]; const update = () => { form.value = values[form.i.valueAsNumber]; }; const publish = () => { update(); form.dispatchEvent(new CustomEvent("input")); }; const start = () => { form.b.textContent = "Pause"; t0 = null; const tick = (now) => { if (t0 === null) { t0 = now; } const elapsed = (now - t0) / (secondsPerLoop * 1000); const phase = alternate ? 1 - Math.abs((elapsed % 2) - 1) : elapsed % 1; const index = Math.round(phase * (n - 1)); if (index !== form.i.valueAsNumber) { form.i.valueAsNumber = index; publish(); } rafId = requestAnimationFrame(tick); }; rafId = requestAnimationFrame(tick); }; const stop = () => { form.b.textContent = "Play"; if (rafId !== null) { cancelAnimationFrame(rafId); rafId = null; } }; form.i.oninput = (event) => { if (event.isTrusted && rafId !== null) { stop(); } update(); }; form.b.onclick = () => { if (rafId === null) { start(); } else { stop(); } }; publish(); if (autoplay) { start(); } else { stop(); } Inputs.disposal(form).then(stop); return form; }32:T5a9,Similarly, `Player` will provide a ticker that generates numbers between 0 and 1 that can act as a seed for animations. As well as autoplaying an animation, this allows manual movement of the slider to 'scrub' back and forth across the animated sequence. To import: ```javascript import {Player} from "observable:@jwolondon/utilities-cdt-2026" ``` To use: **const player = view(Player(_{options}_))** Creates a new instance of the Player. This acts much like Mike Bostock's [scrubber](https://observablehq.com/@mbostock/scrubber) except it provides a more compact minimal interface that does not display any numeric values. A ticker should be created in its own code block and then any other code block, such as a Plot specification can then reference the ticker code block and will be updated on every new tick. The non-mandatory _options_ object allows customisation of the Player's speed, increment between ticks and repeating behaviour: - **step: _n_** The amount by which subsequent ticks increase the Player's ticker value (default: 0.001, i.e. 1000 increments per cycle). - **secondsPerLoop: _seconds_** How long it takes a complete cycle to run (default 24 seconds). The smaller the positive value, the faster the animation. - **autoplay: _Boolean_** Whether or not the ticker starts when first created (default: `false`). - **alternate: _Boolean_** Whether or not the ticker bounces back and forth (default: `false`). ### Example33:T66f,To create checkboxes that can act as a legend for interactive Plots. Each checkbox item is preceded by a coloured box acting as a legend key. To import: ```javascript import {checkboxLegend} from "observable:@jwolondon/utilities-cdt-2026" ``` To use: **const myLegend = view(checkboxLegend(_categories_, _{options}_))** where _categories_ is an array of category names usually encoded in Plot with colour. Typically, you'd pass the component to `view()` so that the selected values are accessible as a simple array for filtering in a Plot. The non-mandatory _options_ allows further customisation of the checkbox legend appearance: * **format: _formatFunction_** To change how each category is displayed, _formatFunction_ takes a single parameter representing the category name and should generate its desired label to appear next to the checkbox. If not specified, default it to display the category name directly. * **scheme: _colourScheme_** An array of categorical colours matching the supplied _categories_, If not provided, defaults to the 'Observable10' categorical colour scheme. * **value: _[categoryNames]_** An array of category names corresponding to those that should be checked when first displayed. If not supplied, defaults to all categories being displayed. * **vertical: _boolean_** If `true`, one checkbox per line is displayed producing a vertical layout. If `false`, checkboxes are flowed horizontally within the permitted width of the page. If not supplied, defaults to `true`. * **border: _boolean_** Whether or not a thin border is drawn around each colour block. If not supplied, defaults to `true`. ### Examples34:T506,When faceting maps that depend on both a geoJSON and a separate table of values that are linked to the GeoJSON via some property, we need to transfer the tabled values into the GeoJSON. This involves creating one GeoJSON for each faceted value where each contains some property that can be used to join with the table of values. This function will take a single GeoJSON and an array of faceted keys and return a new GeoJSON that has one set of geo features with the new key value for each of the keys in the given array. The name used to identify the key in the geoJSONs is given as the third parameter (defaulting to "key" if not supplied). The geoJSON can either be a full geoJSON object (with top level elements of `type` and `features`), or it can be an array of geoJSON features. To use in other documents: ```javascript import {facetGeo} from "observable:@jwolondon/utilities-cdt-2026" ``` For example, the following loads a topoJSON file of 33 London boroughs, converts it to a geoJSON, then generates 10 sets of 33 borough features each with a separate `year` property (2015, 2016, ... 2024). Because the function has to `await` the result of the file reading, it is made [async](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function):35:T40f,Will space out node locations of a graph given an object representing a graph in the form of ```javascript { nodes: [{id: id1}, {id: id2}, {id: id3},...], edges: [ {source: nodeId, target: nodeId}, {source: nodeId, target: nodeId}, {source: nodeId, target: nodeId}, ... ] } ``` where _id1_, _id2_ etc. are individual node identifiers (e.g. numbers) and _nodeId_ values are references to the nodes that are connected via edges. To import: ```javascript import {ForceLayout} from "observable:@jwolondon/utilities-cdt-2026" ``` To use: **new ForceLayout(_graphObj_, _{options}_)** where _graphObj_ is the graph object as illustrated above. Any additional items in the `nodes` or `edges` object will be preserved. The non-mandatory _options_ allows further customisation of the layout: * **numIterations: _n_** How many iterations to run the layout simulator (default:100) * **repulsion: _x_** Repulsive force between nodes (default:10) * **collision: _x_** Collision force between nodes (default:5) For example:36:T898,function setPageStyle() { return html``; }37:[{"id":"91e0ff94724612530750fba340aaea403acdaddddeb9bde80dfff101fcf64f8b3ff000f3efbc86e5e88a8807cfd51f6f4f60b4f52c18e6e9ff023cb4d82915ec","href":"https://static.observableusercontent.com/files/91e0ff94724612530750fba340aaea403acdaddddeb9bde80dfff101fcf64f8b3ff000f3efbc86e5e88a8807cfd51f6f4f60b4f52c18e6e9ff023cb4d82915ec","name":"Woodcraft-Regular.otf","type":"font/otf","lastModified":1790437022000,"size":55764}] 2c:{"id":"2d1eaec6d47d9aeb","slug":"utilities-cdt-2026","title":"CDT Utilities (2026)","thumbnail":"cb62cbfa2a229cafe07b8f3fa9e5e35d10e5cbebfa07c72f6c035cbcb8b48745","access_level":"public","create_time":"$D2026-06-14T11:42:53.709Z","update_time":"$D2026-09-26T17:04:23.771Z","view_time":null,"first_public_time":"$D2026-09-15T10:54:13.010Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":1782,"publish_version":1782,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"members":[{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"CDT Utilities (2026)","cells":[{"id":0,"value":"# CDT Utilities (2026)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"_A collection of utilities for reuse across multiple notebooks._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1307,"value":"## 1. Data file uploads/downloads","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1440,"value":"### 1.1 Loading a data file","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"function readData(\n name,\n path = \"https://cdn.jsdelivr.net/npm/vega-datasets@2/data/\"\n) {\n const safePath = path.endsWith(\"/\") ? path : `${path}/`;\n const url = safePath + name;\n const extension = name.split(\".\").at(-1).toLowerCase();\n\n const content = (row) =>\n Object.values(row).some((d) => d.trim() !== \"\") ? d3.autoType(row) : null;\n\n if (extension === \"csv\") {\n return d3.csv(url, content);\n }\n if (extension === \"tsv\") {\n return d3.dsv(\"\\t\", url, content);\n }\n if (extension === \"json\") {\n return d3.json(url);\n }\n\n return Promise.reject(new Error(`Unsupported file type: .${extension}`));\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"To simplify loading CSV (comma-separated), TSV (tab-separated) and JSON files from remote URLs. Defaults to the Vega data collection, but any path to a CORS compliant data source can be provided (e.g. `https://gicentre.github.io/data/`).\n\nTo use in other documents:\n\n```javascript\nimport {readData} from \"observable:@jwolondon/utilities-cdt-2026\"\n```\n\nNote this is an asynchronous process (Promise) so should be called either in its own code block, or handled as a Promise (e.g. via `await` or placed in an `async` function).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1441,"value":"### 1.2 Saving a data file","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1438,"value":"$2e","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1445,"value":"To use in other documents:\n\n```javascript\nimport {downloadData} from \"observable:@jwolondon/utilities-cdt-2026\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1442,"value":"You can also save data created in an Observable page as a local text file in a variety of text formats:\n\n| Format | Accepted data |\n| -------------- | --------------------------------------------- |\n| `csv` or `tsv` | Array of objects or array of primitive values |\n| `json` | Any JSON-serializable value |\n| `text` | A string or array of primitive values |\n\nCalling `downloadData` will create a button on your Observable page that, when pressed, will download the given data in the format you specify (default CSV). For example,","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1443,"value":"{\n const myData = [\n {colA: \"a1\", colB: \"b1\"},\n {colA: \"a2\", colB: \"b2\"},\n {colA: \"a3\", colB: \"b3\"}\n ];\n\n display(downloadData(myData));\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1444,"value":"The first parameter of `downloadData()` will be the data to download. This can be string or array of strings, objects or primitives. The second parameter is an `options` object with options `format` (one of `\"csv\"`, `\"tsv\"`, `\"json\"` or `\"text\"`), `filename` for customising the name of the downloaded file, and `label` for customising the text that appears on the button.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1106,"value":"## 2. okLCH colour conversion","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1287,"value":"function toRgb(clrExpr) {\n const match = clrExpr.match(\n /oklch\$\\s*([\\d.]+)(%)?\\s+([\\d.]+)(%)?\\s+([\\d.]+)(?:deg)?\\s*\$/\n );\n if (match) {\n const [lpc, cpc] = [match[2] === \"%\", match[4] === \"%\"]; // Are units percentages?\n const coords = [\n lpc ? Number(match[1]) / 100 : Number(match[1]),\n cpc ? Number(match[3]) / 250 : Number(match[3]), // Chroma of 100% is equivalent to 0.4\n Number(match[5])\n ];\n const [r, g, b] = TC.convert(coords, TC.OKLCH, TC.sRGB).map(TC.floatToByte);\n return `rgb(${r},${g},${b})`;\n }\n // If we cannot detect a valid okLCH expression, just return the original\n return clrExpr;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1293,"value":"Some Plot functions, notably the creation of colour ranges, cannot interpolate colours expressed as [okLCH triplets](https://observablehq.com/@jwolondon/hello-modern-colour-spaces). To allow you to express colours for interpolation as `oklch()` this function will convert it to a CSS RGB string that can be used by interpolators.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1304,"value":"To use in other documents:\n\n```javascript\nimport {toRgb} from \"observable:@jwolondon/utilities-cdt-2026\"\n```\n\nExample use:\n\n```javascript\ntoRgb(\"oklch(70% 0.15 38deg)\")\n```\n\nwill return the string `rgb(235,121,85)`\n\nA typical use case will be when specifying a custom colour range, for example:\n\n```javascript\ncolor: {\n type: \"diverging\",\n range: [\n toRgb(\"oklch(40% 0.15 270deg)\"),\n \"white\",\n toRgb(\"oklch(40% 0.15 30deg)\")\n ]\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1259,"value":"## 3. Data shaping with tidy.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1421,"value":"import * as T from \"npm:@tidyjs/tidy@2.6\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1276,"value":"function table(data, options) {\n return Inputs.table(data, {rows: 4.5, layout: \"auto\", ...options});\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"[tidy.js](https://pbeshai.github.io/tidy/docs/api/tidy/) is probably the easiest data shaping package for teaching. It has many functions for 'tabular data as objects' manipulation including pivoting, relational joining and row filtering. Rather than import a very long list of functions, easier to reference them via `T` with this import. This also helps to signal a difference between core JavaScript from the functions in this package, which students may otherwise fail to realise.\n\nSee also this [tidy collection from Peter Beshai](https://observablehq.com/collection/@pbeshai/tidy-js).\n\nAs a convenience it may also be useful to use the customised version of `Inputs.table` with a smaller default row count for slightly more compact table display.\n\nTypically they'd be imported together:\n\n```javascript\nimport {T, table} from \"observable:@jwolondon/utilities-cdt-2026\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":899,"value":"## 4. Object creation\n\nSometimes we need to create objects from other types of representation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1354,"value":"### 4.1 Array of objects to object conversion","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1236,"value":"$2f","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"Tables of data are normally represented as an array of objects, where each object comprises a sequence of _column name_ : _value_ pairs. When we need to use a table to lookup the value associated with a given key, it is more convenient to represent that lookup as a single object of key-value pairs. This function will convert a table into such an object.\n\nTo use in other documents:\n\n```javascript\nimport {createLookup} from \"observable:@jwolondon/utilities-cdt-2026\"\n```\n\nThe first parameter is the table array to convert; the second is an _options_ object that can contain the names of the keys and values column headings to look up. For example, starting with a standard data table array:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"arrayToObject","database":"$undefined"},{"id":624,"value":"const myTable = [\n { animal: \"cat\", legs: 4, name: \"Mary\" },\n { animal: \"spider\", legs: 8, name: \"Hairy\" },\n { animal: \"axolotl\", legs: 4, name: \"Scary\" },\n { animal: \"fish\", legs: 0, name: \"Scaly\" }\n]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"We can create a lookup object that relates each animal to its number of legs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":626,"value":"const limbLookup = createLookup(myTable, { key: \"animal\", value: \"legs\" })","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"limbLookup[\"spider\"]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"It is also possible to create aggregate keys by providing an array of key names. By default, multiple keys are combined with a '`_`' symbol (although this can be customised with the `separator` option).\n\nHere's an example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":645,"value":"const myTable2 = [\n { place: \"London\", year: 2024, rating: 43, agreement: \"yes\" },\n { place: \"London\", year: 2025, rating: 40, agreement: \"no\" },\n { place: \"Manchester\", year: 2024, rating: 51, agreement: \"yes\" },\n { place: \"Manchester\", year: 2025, rating: 52, agreement: \"yes\" }\n]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"const ratingLookup = createLookup(myTable2, {\n keys: [\"place\", \"year\"],\n value: \"rating\"\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"ratingLookup[\"Manchester_2025\"]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":928,"value":"If you wish to associate more than one value with a key, the `values` option should be an array of value fields, which will be stored as an object. For example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":930,"value":"const ratingLookup2 = createLookup(myTable2, {\n keys: [\"place\", \"year\"],\n values: [\"rating\", \"agreement\"]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"ratingLookup2[\"Manchester_2025\"]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"If no `value` or `values` option is provided, the entire table row object is provided:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1256,"value":"const ratingLookup3 = createLookup(myTable2, { keys: [\"place\", \"year\"] })","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"ratingLookup3[\"Manchester_2025\"]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1358,"value":"### 4.2 String path to object conversion","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1360,"value":"function pathsToTree(paths, options = {}) {\n const { sep = \"/\", labelFormat = (name, path) => name } = options;\n const root = { children: [] };\n const seen = new Map([[\"\", root]]);\n\n for (const path of paths) {\n let parent = root;\n const parts = path.split(sep);\n\n for (let i = 0; i < parts.length; i += 1) {\n const subpath = parts.slice(0, i + 1).join(sep);\n const id = labelFormat(parts[i], subpath, i, parts);\n\n if (id == null) {\n break;\n }\n if (!seen.has(subpath)) {\n const node = { id };\n seen.set(subpath, node);\n parent.children.push(node);\n }\n parent = seen.get(subpath);\n if (!parent.children) {\n parent.children = [];\n }\n }\n }\n return root.children[0];\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"If we have hierarchical tree data represented as strings of paths, we can convert them to objects that reflect the hierarchy. This is especially useful for D3 functions that expect object hierarchies.\n\nFor example we might have some file paths:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1367,"value":"const filePaths = [\n \"users/abigail/documents/readme.txt\",\n \"users/abigail/documents/homework.txt\",\n \"users/abigail/photos/july/holiday.jpg\",\n \"users/abigail/photos/november/party.jpg\",\n \"users/ben/documents/readme.txt\",\n \"users/ben/documents/planning.pdf\"\n]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1384,"value":"Calling `pathsToTree(filePaths)` will create an object with `id` elements representing nodes and `children` arrays representing nested objects.\n\nAll supplied paths must share a common first segment. The function returns that common root node.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1371,"value":"pathsToTree(filePaths)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"This can be used as input for [d3.radial-tree-component](https://observablehq.com/@d3/radial-tree-component) and other functions requiring hierarchical objects.\n\nIn addition to the required array of path strings provided as the first argument, an `options` object may be provided overriding the default separator symbol (`sep: \"/\"`) and default label formatter `labelFormat: (name, path) => name`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1224,"value":"## 5. Ticker and Player utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"tickerAndPlayer","database":"$undefined"},{"id":1226,"value":"function* ticker(options = {}) {\n const { timeToComplete = 1000, delay = 10, repeat = \"none\" } = options;\n const epsilon = 10e-6; // Ensures time to compelte is at least a small positive duration.\n const niceNum = (num) =>\n Math.min(1, Math.max(0, Math.round(num * 1000) / 1000));\n let [t, reverse] = [0, false];\n yield t; // Yield an immediate result at start\n do {\n const start = Date.now(); // Poll the current time in milliseconds.\n const end = start + Math.abs(timeToComplete) + epsilon;\n while (t <= 1) {\n t = (Date.now() - start) / (end - start);\n yield Promises.delay(\n delay,\n Math.min(\n 1,\n repeat === \"alternate\" && reverse ? niceNum(1 - t) : niceNum(t)\n )\n );\n }\n if (repeat === \"loop\" || repeat === \"alternate\") {\n t = 0;\n reverse = !reverse;\n } else {\n return; // We've completed the sequence\n }\n } while (true);\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"tickerUtility","database":"$undefined"},{"id":509,"value":"const alternatingT = ticker({\n timeToComplete: 12000, // 12 seconds to complete a 0 to 1 sequence\n delay: 500, // Update every half second\n repeat: \"alternate\" // Alternate forwards and backwards\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"Plot.plot({\n x: { domain: [0, 1] }, // Fix the domain of possible x values\n marks: [\n Plot.dot(\n [{ x: alternatingT }], // Referencing the ticker code block updates this plot every time it changes.\n { x: \"x\", r: 12, fill: \"tan\" }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"$31","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1336,"value":"const myPlayer = view(new Player({ step: 0.01, secondsPerLoop: 5, alternate:true }))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"Player is reporting ${myPlayer.toFixed(2)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1208,"value":"## 6. Custom checkbox legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1212,"value":"function checkboxLegend(categories, options = {}) {\n const {\n scheme = [\n \"#4269d0\",\n \"#efb118\",\n \"#ff725c\",\n \"#6cc5b0\",\n \"#3ca951\",\n \"#ff8ab7\",\n \"#a463f2\",\n \"#97bbf5\",\n \"#9c6b4e\",\n \"#9498a0\"\n ],\n value = categories,\n vertical = true,\n border = true,\n format = (d) => d\n } = options;\n\n const colour = d3.scaleOrdinal(categories, scheme);\n\n return Inputs.checkbox(categories, {\n value,\n format: (d) => html`\n \n \n ${format(d)}\n \n `\n });\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"cbLegend","database":"$undefined"},{"id":429,"value":"const animals = view(checkboxLegend([\"cat\", \"mouse\", \"chicken\"]))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1428,"value":"The value of the `animals` array will update dynamically as checkboxes are interactively changed:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1429,"value":"animals","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"Similarly, with a horizontally laid out selection of colours:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"const rainbow = () => {\n const clrs = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"];\n return view(\n checkboxLegend(clrs, {\n scheme: clrs,\n vertical: false,\n value: [],\n format: (d) => d[0].toUpperCase()\n })\n );\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"rainbow()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"Or as an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) of unemployment codes here displayed inline as **${employment.join(\", \")}** inside a markdown block.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"const employment = (() => {\n const labels = {\n um: \"unemployed (men)\",\n uw: \"unemployed (women)\",\n sm: \"long term sick (men)\",\n sw: \"long term sick (women)\"\n };\n return view(\n checkboxLegend([\"um\", \"uw\", \"sm\", \"sw\"], {\n scheme: d3.schemePaired,\n value: [\"um\", \"uw\"],\n format: (d) => labels[d],\n border: false\n })\n );\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"## 7. GeoJSON duplication","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":655,"value":"function facetGeo(geo, keys, keyName = \"key\") {\n const features = Array.isArray(geo) ? geo : geo?.features;\n if (!features || !Array.isArray(features) || features.length === 0) {\n throw new Error(\n \"facetGeo requires a geoJSON object or features array with at least one feature.\"\n );\n }\n const newFeatures = keys.flatMap((x) =>\n features.map((feature) => ({\n ...feature,\n properties: { ...feature.properties, [keyName]: x }\n }))\n );\n return Array.isArray(geo) ? newFeatures : { ...geo, features: newFeatures };\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"geojsonDuplication","database":"$undefined"},{"id":670,"value":"async function londonGeo() {\n // Read topoJSON\n const topo = await readData(\n \"londonBoroughs.json\",\n \"https://gicentre.github.io/data/geoTutorials/\"\n );\n // Convert to geoJSON\n const geo = topojson.feature(topo, topo.objects.boroughs);\n\n // Create faceted features, one set per year\n return facetGeo(geo, d3.range(2015, 2025), \"year\");\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1434,"value":"Then called from within a separate code cell to assemble the feature collection:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"londonGeo()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"## 8. Simple force graph layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":693,"value":"class ForceLayout {\n #g; // Modified graph\n\n constructor(graph, options = {}) {\n const { numIterations = 100, repulsion = 10, collision = 5 } = options;\n this.#g = structuredClone(graph);\n const simulation = d3\n .forceSimulation()\n .force(\"fCentre\", d3.forceCenter(400 * 0.25, 400 * 0.5))\n .force(\"fSpace\", d3.forceManyBody().strength(-repulsion))\n .force(\n \"fEdge\",\n d3.forceLink().id((d) => d.id)\n );\n simulation.randomSource(Math.random);\n simulation.nodes(this.#g.nodes);\n simulation.force(\"fEdge\").links(this.#g.edges);\n simulation.force(\"collide\", d3.forceCollide(collision));\n simulation.stop();\n simulation.tick(numIterations);\n }\n\n nodes() {\n return this.#g.nodes;\n }\n edges() {\n return this.#g.edges;\n }\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"forceLayout","database":"$undefined"},{"id":710,"value":"const myLayout = new ForceLayout(\n {\n nodes: [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}, {id: 6}],\n edges: [\n {source: 1, target: 5},\n {source: 4, target: 5},\n {source: 4, target: 6},\n {source: 3, target: 2},\n {source: 5, target: 2},\n {source: 1, target: 2},\n {source: 3, target: 4}\n ]\n },\n {numIterations: 50, repulsion: 180}\n);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"The new node positions are accessed with ForceLayout's `nodes()` method that stores the original node IDs but with added `x` and `y` fields reporting their laid out position as `.x` and `.y` values. Similarly, `edges()` provides the edge list with each edge's `source` and `target` being objects with `id`, `x` and `y` fields. This allows the laid out graph to be drawn, for example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":712,"value":"Plot.plot({\n axis: null,\n width: 300,\n height: 200,\n inset: 10,\n marks: [\n Plot.arrow(myLayout.edges(), {\n x1: (d) => d.source.x,\n y1: (d) => d.source.y,\n x2: (d) => d.target.x,\n y2: (d) => d.target.y,\n headLength: 0\n }),\n Plot.dot(myLayout.nodes(), {\n x: \"x\",\n y: \"y\",\n fill: \"brown\",\n stroke: \"white\",\n r: 8\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"By default, when a new `ForceLayout` is created, the supplied graph has a force simulation applied for 100 iterations, which is typically enough to produce a set of spaced out nodes and edges. To change, set `numIterations` in the options object to the number of iterations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1177,"value":"## 9. Page styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1179,"value":"_For imported and custom handwritten fonts:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1054,"value":"const wcUrl = await (await FileAttachment(\"Woodcraft-Regular.otf\")).url();\n\nfunction setFonts() {\n return html`\n \n \n `;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"_For adding additional spaces between sections:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1184,"value":"function spacer(ems = 10) {\n return md`

`;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1187,"value":"_For default page style:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1057,"value":"$36","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1435,"value":"`setFonts()` and `setPageStyle()` can be called separately for more precise control, or for convenience combined with the single call below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1436,"value":"function defaultStyle() {\n return html`${setFonts()}${setPageStyle()}`;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1437,"value":"defaultStyle()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":747,"value":"## Appendices\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1295,"value":"_For the Texel Color library:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1297,"value":"import * as TC from \"npm:@texel/color@1\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"2","titling":"auto"}} 2d:"$2c:body"