2b:null 2c:["$","title",null,{"children":"Scrubber | Mike Bostock | Observable"}] 31:Ta3b,function Scrubber(values, { format = value => value, initial = 0, direction = 1, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }32:[] 2f:{"id":"450051d7f1174df8","slug":"scrubber","title":"Scrubber","thumbnail":"e78c35da9a84833c598292a59b1732683381fb7987da903abb5b02eabf8ed266","access_level":"public","create_time":"$D2019-12-13T21:24:35.134Z","update_time":"$D2023-06-12T19:21:57.055Z","view_time":null,"first_public_time":"$D2019-12-13T22:08:50.688Z","fork":false,"stars":202,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"starter_2024"},"version":255,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[{"id":"8dbc29ec6464327e","reply_to_id":null,"content":"Suggestions:\n\n1. Method to programmatically pause scrubber.\n2. Method to programmatically assign starting/next play value.\n3. Customize button text.","create_time":"$D2020-06-20T01:02:34.820Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}},{"id":"d56c8bccb07ab036","reply_to_id":"8dbc29ec6464327e","content":"It seems to me like pause functionality now requires the delay property to be assigned a value beyond the default of null..?","create_time":"$D2020-07-01T18:21:09.855Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"22e199567a0e1d31","login":"pamacha","name":"Paul Chaikin","avatar_url":"https://avatars-next.observableusercontent.com/649b970c76896a3916ec5b0974cc8ca651b4afa19618672aacf2584be5a52253","tier":null}},{"id":"1a57103b0d69eab0","reply_to_id":"8dbc29ec6464327e","content":"Oops! Sorry, I broke it. It should be fixed now and thank you for the report!","create_time":"$D2020-07-01T19:05:21.361Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"6710f14099de29e1","reply_to_id":"8dbc29ec6464327e","content":"Maybe a way to control the width of the slider and the possibility to introduce an exact datum.","create_time":"$D2020-09-25T01:46:09.242Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"dedaedf5a8fc40fc","login":"bejuco","name":"bejuco","avatar_url":"https://avatars-next.observableusercontent.com/42ea759fcf97fb4815d7fa7efc0b8896b601182e4a50256ecfb66854d8f7892c","tier":null}},{"id":"82cd647376e537ef","reply_to_id":"8dbc29ec6464327e","content":"Is there a way to modify the scrubber value programmatically that will also update the Scrubber's internal label and slider position? see https://observablehq.com/@jonhelfman/modify-scrubber-value-programmatically","create_time":"$D2020-10-18T17:30:16.101Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"ba5c813f0f621f19","login":"jonhelfman","name":"Jonathan Helfman","avatar_url":"https://avatars-next.observableusercontent.com/a404535763c16060490629d896d876b5b4cea8c603c4993b2aaed749a15b041a","tier":null}},{"id":"af633c1f002e34ac","reply_to_id":"8dbc29ec6464327e","content":"Could you please externalize localized strings such as 'Play', 'Pause', for easier adaptation with other languages?","create_time":"$D2020-12-18T11:01:39.511Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c86281fcf8f7c7cc","login":"ericmauviere","name":"Éric Mauvière","avatar_url":"https://avatars-next.observableusercontent.com/a35a91b5ca23c5dd084a628d6c4898fb6eefb2ede192b1801b0efae516f49017","tier":null}},{"id":"5b3c6b459bf9fe4c","reply_to_id":null,"content":"Cf. https://observablehq.com/@sanderevers/animation-control","create_time":"$D2021-01-01T20:11:36.795Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ddd7235babc79ce0","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":null}},{"id":"4c7487378c01155d","reply_to_id":"5b3c6b459bf9fe4c","content":"Cf. https://observablehq.com/@oscar6echo/player","create_time":"$D2021-01-01T22:11:52.743Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ddd7235babc79ce0","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":null}},{"id":"f5f6b5f3dee36779","reply_to_id":null,"content":"Hi Mike, is it possible to programmatically stop and start the scrubber? @oscar6echo's implementation has a method that addresses this use case - I'm just curious if the internals of an instance of the scrubber in another notebook is accessible. Thanks!","create_time":"$D2021-04-14T16:03:08.223Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"98e2b3b7df01bd54","login":"samussiah","name":"Spencer Childress","avatar_url":"https://avatars-next.observableusercontent.com/221d14b7ab413800fbeda25a48a64a5c98c04289ddd61e67a778063aced60417","tier":null}},{"id":"4ccf663e07d7aad6","reply_to_id":"8dbc29ec6464327e","content":"Could you add an input number box aside like Inputs.range()?","create_time":"$D2022-01-13T05:25:28.423Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null}},{"id":"bd112d7634f93f66","reply_to_id":"8dbc29ec6464327e","content":"I agree with Jonathan's comment above. I'd love to be able to update programatically.","create_time":"$D2022-06-22T18:18:22.021Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"a9239813cf88562c","login":"mbrownshoes","name":"Mathew Brown","avatar_url":"https://avatars-next.observableusercontent.com/8d851e9b2c3656a745ef857c9e2881c47c470e8b59db24ca69b232a2554196fc","tier":null}},{"id":"4ececc43563fc0be","reply_to_id":"5b3c6b459bf9fe4c","content":"I have a need to customize the button text (for example, Replay instead of Play and Stop instead of Pause). Mind adding that to the config and use it to label the button?","create_time":"$D2023-07-18T17:09:27.001Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"1b1efa0ba3f22f0a","login":"ram-senth","name":"Ram Senthamarai","avatar_url":"https://avatars-next.observableusercontent.com/41d5bd2b34a1793d58ae6ce3a1c744f4fa4a7e12188e93de3a477a8896ba34af","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":110,"collection":null,"type":"notebook","body":{"title":"Scrubber","cells":[{"id":0,"value":"md`# Scrubber\n\nThis reusable input is intended to drive animations while providing the reader interactive control on demand: the animation pauses when the user interacts with the slider, but can be resumed by clicking the play button. For examples, see [Bar Chart Race](/@mbostock/bar-chart-race-with-scrubber), [The Wealth & Health of Nations](/@mbostock/the-wealth-health-of-nations), [Solar Path](/@mbostock/solar-path), or [Animated Treemap](/@d3/animated-treemap).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"md`To use in your notebook:\n\n~~~js\nimport {Scrubber} from \"@mbostock/scrubber\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"viewof i = Scrubber(numbers)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"numbers = Array.from({length: 256}, (_, i) => i)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"md`The current value of *i* is ${i}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"md`Given an array of *values* representing the discrete frames of the animation, such as an array of numbers or dates, Scrubber returns a [view-compatible input](/@observablehq/introduction-to-views). (It uses the [disposal promise](/@mbostock/disposal) to stop the animation automatically on invalidation.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"md`## Options\n\nScrubber has several options which you can pass as the second argument.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"autoplay = md`The *autoplay* option, which defaults to true, specifies whether the animation plays automatically. Set it to false to require the reader to click on the play button.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"Scrubber(numbers, {autoplay: false})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"loop = md`The *loop* option, which defaults to true, specifies whether the animation should automatically restart from the beginning after the end is reached. Set it to false to require the reader to click the play button to restart the animation after it ends.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"Scrubber(numbers, {loop: false})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"md`The *alternate* option, which defaults to false, specifies whether the animation should reverse direction when it reaches the end, rather than repeat from the start.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"Scrubber(numbers, {loop: false, alternate: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"delay = md`The *delay* option, which defaults to null, specifies how long to wait between frames in milliseconds. A null value means to use [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame), which typically means sixty times per second (about 17ms). Non-null delays use [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"Scrubber([\"red\", \"green\", \"blue\"], {delay: 1000})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":239,"value":"loopDelay = md`The *loopDelay* option, which defaults to 0, specifies how long to wait before looping in milliseconds. This can be paired with the *initial* option to show the ending value before the animation starts anew from the beginning.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"Scrubber(numbers, {initial: numbers.length - 1, loopDelay: 1000})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"format = md`The *format* option, which defaults to the identity function, specifies how to display the currently-selected value. The *format* function is passed the current value, the current (zero-based) index, and the values array.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"dates = Array.from({length: 365}, (_, i) => {\n const date = new Date(2019, 0, 1);\n date.setDate(i + 1);\n return date;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"viewof date = Scrubber(dates, {\n autoplay: false,\n format: date => date.toLocaleString(\"en\", {month: \"long\", day: \"numeric\"})\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"md`If you have suggestions for other options you’d like to see, please let me know!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"md`---\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"