31:T5b9,## Observable Lessons learned ### Don't update views' value directly - Don't add/update properties on views (like [`Inputs.form(...)`](https://observablehq.com/@observablehq/input-form) objects) directly with your code - Mutating properties of `Inputs.form(...)` objects breaks the reactivity of their form controls. - For example, setting `runner_params[0].is_lonely=true` in my Javascript code **stopped** other cells from reacting to input change, i.e. the user changing the slider for `runner_params[0].speed`. - [Mutability is an anti-pattern in Observable](https://observablehq.com/@tmcw/observable-anti-patterns-and-code-smells) - To fix the broken reactivity if you messed it up like I did: - remove any code that directly mutates the input objects - rename the input objects (from `inputs` to `inputs_0`), then rename them back to original (from `inputs_0` back to `inputs`) - Maybe there's a correct way to do this using the `mutable` keyword - like [@mootari does here](https://observablehq.com/@mootari/solid-js#cell-115) - but remember the `mutable` keyword means - the mutable cell's value can be changed by other cells (i.e. mutation) - **not** that *properties* on the mutable cell's value can be changed by other (i.e. modification) - How to reconcile my point here with ["Views are Mutable Values"](https://observablehq.com/@mbostock/views-are-mutable-values) / ["Mutating Views"](https://observablehq.com/@mbostock/mutating-views)?32:Tca3,viewof use_this_to_remember_markdown = { const apples_without_this = d3.range(num_apples_example).map(randomly_assign_color) const apples_with_this = d3.range(num_apples_example).map((_,i)=>((this && this.value) || apples_without_this)[i] || randomly_assign_color()); const markdown = md`### Use \`this\` to remember previous values - If you have a list of inputs but you can **add or remove items from the list**... - for example: your user can choose the [number of apples](https://observablehq.com/@mbostock/inline-inputs): ${Inputs.bind(html``, viewof num_apples_example)} - then you create inputs for each of ${nlp(num_apples_example).values().toText().out()} apples: - ${apples_without_this} - some inputs might control your apple's size (or change your apple's color) - all apples start with a default size of 1 (or color that is randomly assigned) - Now your user **changes some properties** on one of the inputs in the list... - for example, your user increases your first apple's size to to 1.2 (or changes its color) - then your user adds a ${nlp(num_apples_example+1).values().toOrdinal().out('text')} apple ${randomly_assign_color()} ${+((viewof num_apples_example)[0].max) === num_apples_example ? `(actually you cannot do this because you reached the maximum allowed number of apples; try again with fewer apples)` : ''} - your \`viewof apples\` input cell will re-evaluate; **resetting their size** to the default of 1 (or **re-assigning their color randomly**) - try it using the input above: as you increase or decrease the number of apples, their colors **randomly change every time the cell re-evaluates** - unless you refer to the apples' size (color) in the previous valuation [**using \`this\`**](https://observablehq.com/@tmcw/untitled/5) - after re-evaluating the first apple **maintains their size of 1.2** (or the apples maintain the color they had in the previous evaluation): - ${apples_with_this} - try it; notice the input just above should maintain their colors they had before any new apples were added - the above technique works because: - > [\`this\`\... contains the previous returned value of a cell](https://observablehq.com/@tmcw/untitled/5#cell-0) - of course \`this\` only remembers the value in the **previous evaluation** - so this technique only remembers apples that existed one-evaluation-ago (not two, or three, or four evaluations ago) - for example: - let's say you're at evaluation \`n-2\` - then you remove the apple from the end of the list (evaluation \`n-1\`) - then you add a apple back to the list (evaluation \`n\`): - your most recent evaluation won't *restore* previous values - because \`this\` only represents evaluation \`n-1\` (where the apple stopped existing); - \`this\` can't reach back to evaluation \`n-2\`, evanluation \`n-3\`, etc - if you want to reach further back in history, you might need a new strategy, like stashing your state in some \`mutable\` variable, or...? `; markdown.value = apples_with_this; return markdown; }33:T761, ### More cells - Use more named cells instead of fewer monolithic blocks of code - name your cells. - named cells leads to greater reusability (others [can import your named cells](https://observablehq.com/@observablehq/documentation#cell-2870) or substitute their values using `import...with`) - named cells leads to better organization (i.e. through the [minimap pane](https://observablehq.com/@observablehq/minimap)) - embrace [literate programming](https://en.wikipedia.org/wiki/Literate_programming) > \[literate programming represents\] a move *away* from writing computer programs in the manner and order imposed by the computer, and instead gives programmers macros to *develop programs in the order demanded by the logic and flow of their thoughts* - don't be constrained by "top-down" order; Observable evaluates cells in [topological order](https://observablehq.com/@observablehq/how-observable-runs?collection=@observablehq/overview#cell-0) (Observable figures out the dependencies!) - Get/make new state in a separate cell - So your cell dependency looks like this: - inputs in their own cell... - state in a separate cell (reacting to inputs and updating at 60fps)... - animations in a separate cell (reacting to states and updating at 60fps (this might be bad! see below))... - The above is **bad advice**; consider... - Handle **both** state **and** animation in the same cell... - and expose it by using `viewof`, assigning to `canvas.value` and yielding `canvas`, as in [this example](https://observablehq.com/@observablehq/mutable#reactiveWalls) - Create as much state information as you want (to help with debugging; display in a [simple table](https://observablehq.com/@observablehq/input-table)) - I did all my logical calculations in my state, including runner location and whether a runner was "lonely" 34:T66d, ### New State - Don't update state, create new state - as shown in the [anti-pattern post](https://observablehq.com/@tmcw/observable-anti-patterns-and-code-smells) > ... it should be a new object, not a modification of the one you have. - so create new objects like `runner_state = runner_list.map(...)` - instead of modifying objects like `runner_state.forEach(...)` - State at time `n` can react to state at `n-1` (calculate state *incrementally* vs *cumulatively*) - `requestAnimationFrame(...)` kinda works like this by passing in the previous timestamp - an [example here](https://observablehq.com/@mbostock/variable-speed-generator-test) shows how to use `requestAnimationFrame` this way. Specifically shows how an `` controls a *velocity*, but the translates this to "state" called angle! (`viewof angle`) -- all in the same cell! - instead of calculating a runners' position based on the *start time of the race* and the distance they can run in the *cumulative time passed since the start* - ... update the runners' position based on *the runners' position one tick ago*, and the distance they can run in *one tick* - isn't this more aligned with patterns used in animation libraries (like threejs) and game engines (Godot)? - Even if you use mutation to update state; if you only update state in one cell, you "keep *mutation* to a minimum". - Be careful with your animation loop - Use best-practices to [manage your animation loop](https://observablehq.com/@observablehq/animation-loops) - If your animation seems slow/choppy/laggy, try saving and restarting your browser tab 35:T411,### Cell block interpreted differently Compare this block which contains a **`return` statement, followed by a `yield`** (which should never execute; it's [unreachable code](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*#return_statement_in_a_generator)). Observable doesn't even show me the value "0" which I expected to see... ``` { let i = 0; return i; // unreachable: while (true) yield i++ } ``` ... vs this block which contains **only a `return` statement**; Observable will show you the value "0" as I expected... ``` { let i = 0; return i; } ``` I think the former is implicitly interpreted as a *generator* because it contains a `yield`, even though that `yield` should never execute, Whereas the latter is interpreted as a *block*. [More here](https://observablehq.com/d/fc776cb054d112f7#observable_block_vs_observable_generator) on the difference between a generator and a block, and why the the generator's return value seems to be **ignored**.36:T567,cum_step_m_charts = { // awaiting visibility technique, so we don't start showing anything until the user reaches it // // https://observablehq.com/@observablehq/visibility // wanted to prevent this case (I think it works!) // - the user leaves the page (pausing animations) and returns much later (meaning a massive big step time between frames) causing huge spike in the line chart; huge outlier in the histogram? // downside // - the charts reset when user scrolls them out of visibility, and back in // when I moved this cell to its own new notebook, await visibility causes thrashing... // await visibility() // using `this` as a "pseudo-reducer" // https://observablehq.com/@tmcw/untitled/5 // seems like an "accumulator" to me: https://observablehq.com/@tmcw/untitled/5#cell-23 // so I cumulatively track the current_runner_state.step_time let cum_step = (this && this.value) || []; cum_step.push([new Date(), current_runner_state.step_time]); const height = 200; const result = htl.html`

${LineChart(cum_step, { domain: [0, max_frame_step], height: 200, x: ([x]) => x, y: ([, y]) => y })}

${Histogram(cum_step, { xDomain: [0, max_frame_step], height: 200, normalize: true, value: ([, y]) => y })}

`; result.value = cum_step; return result; }37:T68f,md`## TODO - notebook changes - ~~separate lessons learned~~ - ~~add disclaimer about not a math proof, more Observable exercise~~ - ~~remove inputs that don't work as expected~~ - animation - convert [animated canvas to gif](https://observablehq.com/@mbostock/canvas-to-gif) - (otherwise I use [ScreenToGif](https://www.screentogif.com/), but my browser animation is choppy, so the recording is choppy) - resize the animation canvas when user changes input - make animation smoother (choppy?) - more state data (a table?) - race time (center of circle) - racer legend: - lonely time - distance run - speed - swap places if takes the lead - show "lonely distance" at moment a runner becomes lonely - fade out - understandability/algorithms/mathematical rigor - better way to decide distance to nearest runner - what unit is speed? - if runners 1-6 have speeds 1-6, they should all form a hexagon when runner 6 has just completed one lap. or as [Brian Weinstein says](https://brianweinstein.co/posts/20141225-lonely-runner-conjecture/): > Said differently, the LRC states that for each runner, the spacing around it will eventually be greater than or equal to the spacing it would experience if the **all of the runners were equally distributed** around the track. - and after runner 6 completes 1 lap, all runners should be 1/6th apart from each other = equally-spaced= *lonely*, why isn't that happening in my simulation? - is it because we skip past the exact milisecond it would be needed; should calculations decide whether any runner became lonely *since the previous_time* (vs at current time) `;38:T50c,## Inspirational Links/Examples - On Lonely Runner - animations - gif created by Rocchini (Wikipedia). ([found in tweet](https://twitter.com/TamasGorbe/status/1589184087528538112)) https://en.wikipedia.org/wiki/Lonely_runner_conjecture#/media/File:Lonely_runner.gif - Lonely Runner (with N=8) was made by Brian Weinstein, including link to Mathematica code ([found in tweet](https://twitter.com/TamasGorbe/status/1589185642889871360)) https://brianweinstein.co/posts/20141225-lonely-runner-conjecture/ - thoughts - by @terrytao https://terrytao.wordpress.com/2017/01/10/some-remarks-on-the-lonely-runner-conjecture/ - simulations - by @jdgmiles https://jdgmiles.github.io/The%20Lonely%20Runner/ (I didn't see this simulation until *after* I tried my hand, inspired by GIFs seen on twitter) - On Observable: - Modify inputs indirectly to create state: https://observablehq.com/@mbostock/variable-speed-generator-test - Expose state *through* your animation/canvas: https://observablehq.com/@observablehq/mutable#reactiveWalls - Or update state (careful) using `mutable` keyword, only when state changes: https://observablehq.com/@observablehq/mutable#mutableWalls - Step through generator https://observablehq.com/@anglee/stepping-through-a-generator-339:[] 2f:{"title":"Lonely Runner: Lessons Learned","cells":[{"id":0,"value":"lonely_runner_title = md`\n# Lonely Runner: Lessons Learned\n\nI saw [this tweet](https://twitter.com/TamasGorbe/status/1589184087528538112) and I wanted to try \"Lonely Runner\" visualization with Observable...\n\n> Consider N runners on a circular track of length L. They start from the same spot and run at constant, distinct speeds. A runner is \"lonely\" if the distance from everyone else is at least L/N\n\n> Lonely Runner Conjecture: Each runner is lonely at some time\n\n> It's unsolved for N > 7\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"import { get_lonely_runner_state } from '@theredpea/lonely_runner';","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"current_runner_state = {\n // return initial_runner_state;\n // https://observablehq.com/@akrawitz/pause-a-generator-function\n let prev_runner_state = this || get_lonely_runner_state(undefined, runner_params, runner_start_date, state_update_speed);\n if (is_pause.length) {\n yield prev_runner_state;\n return;\n } else {\n prev_runner_state.current_time = Date.now()\n }\n while (true){\n prev_runner_state = yield get_lonely_runner_state(prev_runner_state, runner_params, runner_start_date, state_update_speed);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1078,"value":"## Race state","pinned":false,"hidden":false,"mode":"md"},{"id":527,"value":"Inputs.table(current_runner_state.runners)\n// { \n// // return table(current_runner_state.runners)\n// // Inputs.table seems to be more \"responsive\", less slowdown on the \n// yield Inputs.table(current_runner_state.runners);\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"## Race inputs","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"viewof runner_start_date = Inputs.button(`Start ${num_runners} Runners`, { value: Date.now(), reduce: ()=> Date.now(), label : 'Restart race' });\n/* // https://github.com/observablehq/inputs/blob/main/README.md#button */","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"viewof is_pause = Inputs.checkbox(['Yes'], {label: 'Pause race' } ); // html``;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"viewof state_update_speed = Inputs.range([0, 10], { value: 2, step: 0.1, label: 'State update speed', width:500 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"## Runner inputs","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"viewof num_runners = Inputs.range([2,20], { value: 6, step: 1, label :'Number of Runners'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"viewof max_speed = {\n return Inputs.number({value: (this && this.value) || num_runners , label : 'Max Runner Speed' });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof runner_params = {\n const prev_runner_list_value = ((this || {}).value || []);\n return Inputs.form(\n d3.range(num_runners)\n .map(runner_index=>{\n const prev_runner_value = prev_runner_list_value[runner_index] ||{};\n return Inputs.form({\n // color: Inputs.color({label: `runner ${runner_index+1} color`, value: d3.schemeCategory10[runner_index] }), //d3.color('red').hex()}),\n speed: Inputs.range([0, max_speed], { \n value: (\n prev_runner_value.speed \n || state_speed_examples.runner_count_6_interesting_runner_1_and_3_become_lonely_last[runner_index] \n || d3.range(num_runners)[runner_index]\n ), \n step:0.1, \n label: `runner ${runner_index+1} speed`})\n });\n }\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":605,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":573,"value":"\n### Don't use a generator loop cells *that reference* generator-updated cells\n - At the start I thought this organization was best:\n - \"animation\" in one cell\n - \"state\" updates in another cell\n - then \"animation\" reacts to \"state\" updates\n - A common Observable pattern is to update \"animation\" in a `while(true) { ...yield...}` loop, aka a [\"generator loop\"](https://observablehq.com/@observablehq/animation-loops#o2) (Option 2)\n - These \"animation\" generator loops should update at 60fps\n - But if I wanted to update \"state\" variables (for example the position of each runner), I also wanted a loop...\n - So I put the \"state\" update inside a generator loop, also running at 60fps\n - Then I referenced the \"state\" cell, **from** the \"animation\" cell\n - **But that's the problem!**\n - Now the \"animation\" cell is loping at 60fps, **and** *reacting to a variable that updates at 60fps*. I think this is bad!","pinned":false,"hidden":false,"mode":"md"},{"id":761,"value":"md`### Default parameter initialization in Javascript\n - Unlike Python...\n - named parameters [**need *not* go last**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters#sect1)\n - named parameters are [**evaluated at call time**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters#evaluated_at_call_time)\n - so this function returns a new value every time it is called:\n - \\`const get_date_func = (d=new Date())=>{ return d; }\\`\n - as shown here: ${get_date_func()}\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"### one cell reacting to changes in another can't throttle\n - For example if cell `a` is yields a new value at 60fps...\n - and cell `b` references cell `a` (i.e. to display the contents of `a` as a table)...\n - cell `b` cannot do a `Promises.tick` or `Promises.delay(...)` to throttle/ slow down the rate of its update...\n - Unless we make cell `b` non-reactive / react on its own schedule?\n - Is that when we should [use the `mutable` keyword](https://talk.observablehq.com/t/making-some-cells-non-reactive/644/3)?\n - There must be a way, since we can [debounce inputs](https://observablehq.com/@mbostock/debouncing-input) which is a similar idea\n - but this technique *also* the keyword `viewof`; a special technique...\n - Also, does [awaiting visibility](https://observablehq.com/@observablehq/visibility) manage this somehow?","pinned":false,"hidden":false,"mode":"md"},{"id":800,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":820,"value":"### `return yield ...` to pause generators\n - Generators **can** contain `return yield ...`; [a useful technique to pause an Observable generator](https://observablehq.com/@akrawitz/pause-a-generator-function)\n - I learned more about that technique and how it works in [Javascript in general](https://stackoverflow.com/questions/42309185/js-generators-how-is-return-yield-different-from-yield) (especially when a value into the generator with `.next(...)`)\n - Now I understand why this pauses the generator in Observable; the generator is \"done\" (`{ done: true, value: {whatever was passed into next(...) } }`)","pinned":false,"hidden":false,"mode":"md"},{"id":1012,"value":"### Watching the tick between requestAnimationFrames in my generator\n\n I measure the step (in ms) between each time my state-getter function is executed, seems like that value keeps creeping up, \n - I might expect it to be around 16 or 20ms between animations (1000 ms / 60 frames per second = 16.66 ms between frames)\n - If you re-run this cell it starts around 50 ms between frames (ok, I can adjust expectations)\n - But it seems like the value keeps creeping up slowly (to ~80 ms between frames) over the minute following re-run (especially if you edit this cell and type in it)\n - And as you wait longer amounts of time, the value may creep as high as ~300 ms between frames\n - Refreshing your page resets the between-frames value back to its minimums\n - Also notice the spikes in the chart, roughly every 15-20 seconds","pinned":false,"hidden":false,"mode":"md"},{"id":993,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"viewof max_frame_step = Inputs.range([0, 1000], {step:10, value: 200, label: 'Framestep Domain' });\n/* when the histogram renders for the first time (after await visibility() if that's used), the domain *at that time* (max_frame_step) is used with the default bins number (40) to decide bin size, which never changes after that, even if we change value of max_frame_step! \nand remember how bin count is [not exact] (https://observablehq.com/d/9699b5ee67ee09c9#cell-113)\n*/ ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1099,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"state_speed_examples = ({\n runner_count_6_interesting_runner_1_and_3_become_lonely_last: [2.1, 0.3, 1.7, 4.8, 3.6, 6]\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":577,"value":"$38","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"import {tweet} from \"@observablehq/tweet\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"import {table} from \"@tmcw/tables@513\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"randomly_assign_color = _=>Math.random()>0.5?'🍎':'🍏';","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"viewof num_apples_example = Inputs.number([0,10], {value: 5})","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"nlp = {\n const nlp = await require('compromise');\n const numbers_plugin = await require('compromise-numbers');\n nlp.extend(numbers_plugin);\n return nlp;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":986,"value":"import { LineChart } from \"@d3/line-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1014,"value":"import { Histogram } from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":991,"value":"get_date_func = (d=new Date())=>{ return d; }","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}