2d:null 2e:["$","title",null,{"children":"Spreader | Martien van Steenbergen | Observable"}] 33:T530,This notebook is quite elaborate – overengineered even – for simply spacing out a set of dots either horizontally or vertically. I needed the – fairly straightforward – code in ${ƒ("absolutePosition")} in another notebook. I got carried away because I also wanted to get a better understanding of the **performance trade-offs between calculating needed values on-the-fly or upfront**. Plus, I wanted to hone my knowledge about and skills in parameter defaults and destructuring. So, I stretched my effort to make the differences between upfront and on-the-fly crystal clear, as shown in ${ƒ("nuggets")}. This while honing the [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) principle and sprinkling in some [Functional Programming](https://en.wikipedia.org/wiki/Functional_programming) practices, especially [currying](https://en.wikipedia.org/wiki/Currying): creating **partials** – [partial function application](https://en.wikipedia.org/wiki/Partial_application) – by moving from one n-ary function to n unary functions. BTW, I somehow favor the term **Only Once** over DRY. DRY expresses what you _don’t_ want, while Only Once expresses what you _do_ want. That said, I welcome any and all critique and encourage you to add comments as you see fit. What doesn’t kill it makes it stronger. 34:T671,### Vocabulary I’m using some specific – probably unconventional – words: - **yearn**, **yearning** – [partial function application](https://en.wikipedia.org/wiki/Partial_application) that still need arguments in order to complete _yearn_ for those arguments; whenever you ‘feed’ them another argument, they take a step closer to their finish; - **seed**, **seeded** – seed a yearning function with initial arguments right after its definition; it’s like having those arguments preloaded, embedded, baked-in, ready to use; - **list** – array; - **[Palette](#palette)** – a list of color values, like `d3.schemeCategory10`; - **`raw`** data – original unprocessed data, directly from the source; - **`cooked`** data – cleaned, tidied, normalized data, geared towards straightforward rendering by `Plot()` and `D3`; - **[Nugget](#defNugget)** – object holding the data (list) as well as their key D3-ready accessors in order to make the `D3` code simpler; - **`nuggets`** – Nugget list; - **[Geometry](#geometry)** – basic geometric values, like aspect ratio, dimensions, origin, and some derived conveniences; - **[Settings](#settings)** – global values that control aspects like appearance, style, and behaviour; often adjustable through [Inputs](/@observablehq/inputs); - **[Artist](#artist)** – when called, e.g. by _selection_.call, render their illustration on the provided `Pad`; - **[artists](#artists)** – `Artist` list; - **`Pad`** – the SVG created according to `Geometry` for `artists` to leave their marks on;35:T959,### Puzzles - **Fleeting Follows Fixed** – _Currying creates partials_ and forces you to consider the order of arguments. It beckons to sort the arguments according to their volatility: **fixed stable data first, fast fleeting data last**. Fixed data is not really fixed, of course. It is just relatively more fixed than fleeting data; it changes much less than fleeting data. The idea for `Geometry`, `Settings`, and `Artists` is that they contains quite stable data that controls the overall visual appearance, hence are fed in this order. - **Front Door** – The relatively stable or global data is needed by many functions across the notebook. Two ways to access these global values deep in the call chain are: 1. **Deep Injection** - One way is to define this globally, at notebook level, as a global object, and simply use it when and where needed. This blocks properly importing the notebook into other notebooks. 2. **Front Door** – Another way is to pass it on through the front door down the call chain as argument. Somehow this feels cleaner, more proper. Also, unlike Deep Injection, _Front Door policy facilitates importing the notebook_. You can set up your own invariants in the importing notebook and pass them on to also imported functions. This notebook adopts the Front Door policy. - **Seed Early** – What’s the best place to provide `Geometry` and `Settings` – when calling or when defining a function? - For example, ${ƒ("crosshairs")} is seeded with `settings` at its definition. - Likewise, ${ƒ("studio")} is seeded with `(geometry)(settings)(artists)` at its definition. - If ${ƒ("studio")} was provided with these arguments at invocation, these arguments needed to be provided for every call (twice in this example). This rubs against DRY. Also, since ${ƒ("studio")} is curried, it is properly defined and preloaded with the static data, yearning for its `Nugget`, its data to render. - **Better Flatter** – How about merging stable data like `Geometry` and `Settings` into one large object? Only needs one argument, yet deepens it. Or flatten it completely to only one level? Requires unique properties across the board. - Had some trouble getting the first argument of [crosshairs](#crosshairs) working. Cannot leave it empy; that is, must at least have `{}` as argument. Don’t understand why, nor how to fix it.36:[] 31:{"id":"40eaad36e97425a6","slug":"spreader","title":"Spreader","thumbnail":"819e3bb75c0b61a676a0584aa47d6aaa8e1837dadf5e05c6d8a850a985b31781","access_level":"public","create_time":"$D2022-10-17T07:31:32.568Z","update_time":"$D2022-11-24T18:54:26.462Z","view_time":null,"first_public_time":"$D2022-10-25T09:55:14.567Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":"starter_2024"},"version":1966,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}],"members":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"0180a9554265628b","slug":"discover","title":"Discover","owner":{"id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen"}},"type":"notebook","body":{"title":"Spreader","cells":[{"id":0,"value":"# Spreader","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":592,"value":"studio(nuggets.cooked) // very very latest 2 3 df","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"studio(nuggets.raw)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"viewof settings = Inputs.form(\n {\n spacing: Inputs.range([-width/4, +width/4], {label: \"Spacing\", value: 24, step: 1}),\n radius: Inputs.range([0, +36], {label: \"Radius\", value: 9, step: .1}),\n shift: Inputs.range([-5, +5], {label: \"Shift\", value: 0, step: .1}),\n orientation: Inputs.radio([\"x\", \"y\"], {label: \"Orientation\", value: \"x\"})\n },\n {\n template: (inputs) => \n htl.html`

${Object.values(inputs)}

`\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1573,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1601,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1586,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":904,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1201,"value":"All data is based on a simple color scheme contained in **`Palette`**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":731,"value":"palette = d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1625,"value":"**`Nuggets`** take the `Pallette` and define two different data instances that include their accessors for D3:\n- **`raw`** is the `Palette` verbatim and recalculates needed data **on-the-fly** for each redraw - hence probably more expensive; and\n- **`cooked`** processes `Palette` once **upfront** for straightforward and efficient access by D3; an accessor simply references an attribute, e.g. using `d => d.color`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"defNugget","database":"$undefined"},{"id":760,"value":"nuggets = ({ // a Nugget is data plus its accessors\n\n // time needed to execute 1e5 times on a iMac Late 2015 with macOS Monterey 12.6\n // cooked is 1.5 times faster than raw\n // see later in this notebook\n \n // use palette as is; requires on-the-fly calculations\n raw: { // 6400+ ms\n data: palette,\n fill: (_, i) => palette[i % palette.length],\n position: (_, i) => position(i),\n },\n \n // turn palette it into a list of objects holding a `Dot`;\n cooked: { // 4300+ ms\n data: palette.map((color, i) => ({color, position: position(i)})),\n fill: point => point.color,\n position: point => point.position,\n },\n \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"**`Geometry`** holds the basic values for the `Pad`, like aspect ratio, dimensions, origin, and some derived conveniences.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":521,"value":"// const width = 1152;\n// interface Aspect {\n// wide: number,\n// tall: number\n// }\n// interface Size {\n// x: number,\n// y: number,\n// width: number,\n// height: number,\n// }\n// interface Geometry {\n// aspect: Aspect,\n// width: number,\n// height: number,\n// size: Size,\n// viewBox: Array,\n// }\n// const aspect: Aspect = {wide: 16, tall: 9};\n// const height = width * aspect.tall / aspect.wide;\n// const size: Size = {\n// x: -width / 2,\n// y: -height / 2,\n// width,\n// height,\n// }\n// const geometry: Geometry = {\n// aspect: {wide: 16, tall: 9},\n// width,\n// height,\n// size,\n// viewBox: Object.values(size),\n// }\n\ngeometry = {\n const aspect = {wide: 16, tall: 3};\n const height = width * aspect.tall / aspect.wide;\n const size = ({x: -width / 2, y: -height / 2, width, height});\n return ({\n aspect,\n width,\n height,\n size,\n viewBox: Object.values(size),\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"**`Artists`** holds the list of artists. Each `Artist` in turn creates marks an scratches on the Pad.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":906,"value":"artists = [\n crosshairs({stroke:\"red\"}), // must at least contain {}\n dotter,\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"### Data Wranglers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1915,"value":"**`position`**:\n- takes `palette` and `settings`\n- returns a function that takes a relative position (or list index) and returns an absolute position","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1913,"value":"position = absolutePosition(palette)(settings)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"// yearns for Points, Settings, and index (relative position)\n// returns absolute position\n\nabsolutePosition = \nCURRY(\n (\n {length}, // from Points\n {spacing, shift}, // from Settings\n i, // relative position of element\n ) =>\n (\n i + // relative position plus…\n ((shift - 1) / 2) // projects [-1, +1] to [-1, 0] so -1/2 centers the whole\n * (length - 1) // total span: number of gaps\n ) \n * spacing // absolute position\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1863,"value":"## Studio\n${ƒ(\"studio\")} has overview over the complete atelier and sets up `Pad` for `Artists`, based on `Geometry` and `Settings`. Next it calls each `Artist` in turn, providing `Pad` and `Nugget`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":514,"value":"// takes Geometry, Settings, Artists, and Nugget\n// sets up new Pad \n// yearns for Nugget\n// calls each Artist, passing on Geometry, Settings, and Nugget\n// returns Pad’s node\n\nstudio =\nCURRY(\n (\n geometry,\n settings,\n artist,\n nugget,\n ) => \n {\n\n const {width, height, viewBox} = geometry;\n\n const pad = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", viewBox)\n ;\n\n artists.forEach((artist) => pad.call(artist(geometry)(settings)(nugget)));\n\n return pad.node();\n\n }\n)(geometry)(settings)(artists)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"## Artist\nAn `Artist`:\n- is invoked exactly once, passing in this selection;\n- is expected to leave marks on `Pad`;\n- first optional private arguments: make sure to provide proper and forgiving defaults:\n - e.g. ƒ `crosshairs` supports specifying stroke attributes and provides sensible defaults when called without;\n- is provided with:\n 1. Geometry;\n 2. Settings;\n 3. Nugget;\n 4. Pad.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"artist","database":"$undefined"},{"id":553,"value":"// type: Artist\n// takes Options, Geometry, Settings (unused), Nugget (unused), and Pad\n// side effect: draws the axes on Pad\n\ncrosshairs = \n CURRY(\n (\n {stroke = \"steelblue\", strokeWidth = .5, strokeDasharray}, // from Options\n {size: {x, y, width, height}}, // from Geometry\n settings,\n nugget,\n pad\n ) =>\n {\n pad\n .append(\"path\")\n .attr(\"d\", `M${x} 0h${width}M0 ${y}v${height}`)\n .attr(\"stroke\", stroke)\n .attr(\"stroke-width\", strokeWidth)\n .attr(\"stroke-dasharray\", strokeDasharray)\n ;\n }\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"// type: Artist\n// takes Geometry, Settings, Nugget, and Pad\n// side effect: creates a corresponding circle on Pad for Points in Nugget\n\ndotter = \nCURRY(\n (\n geometry, // Geometry unused\n {orientation, radius}, // from Settings\n {data, fill, position}, // from Nugget\n pad\n ) => \n {\n pad\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"r\", radius)\n .attr(\"fill\", fill)\n .attr(`c${orientation}`, position)\n ;\n } \n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"### Performance: cooked data outperforms raw data\nWhat is most appropriate: when running through a list and needing to calculate attribute values like color and position:\n1. **on the fly** for each datum, simply supplying **`raw`** data; or\n2. **upfront** as preparation into a list called **`cooked`**:\n - makes getting the values for each attribute simpler;\n - code better legible and evolvable;\n - concentrates derivations at a single place (non-DRY);\n - makes derivations reusable.\n\nElapsed time to execute 100k times on a iMac Late 2015 with macOS Monterey 12.6 shows that **`cooked` is about 1.1–1.5 times faster than `raw`**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1089,"value":"viewof RunRaw = Inputs.button(\n html`Click to run studio() 100k times.
May stall window for several seconds!`,\n {value: null}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"viewof benchmark = Inputs.radio(Object.keys(nuggets), {label: \"Benchmark\", value: Object.keys(nuggets)[0]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"elapsed = {\n const n = 1e5;\n const startTime = performance.now();\n if (RunRaw > 0) {\n for (let i = n; i --> 0;)\n studio(nuggets[benchmark]);\n }\n yield {benchmark, elapsed: Math.round(performance.now() - startTime)};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1728,"value":"ƒ = (name) => `[${name}](#${name})`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"R = require(\"ramda\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"CURRY = R.curry","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"