avoid scroll glitches in Safari

Author: mbostock

docs/reactivity.md

@@ -162,22 +162,18 @@ const name = Generators.observe((notify) => {
 });
 ```
 
-As another example, here is using `Generators.observe` to expose the current pointer coordinates:
+As another example, here is using `Generators.observe` to expose the current pointer coordinates as `pointer` = <span style="font-variant-numeric: tabular-nums;">[${pointer.join(", ")}]</span>:
 
 ```js echo
-const pointer = Generators.observe((change) => {
-  const pointermoved = (event) => change([event.clientX, event.clientY]);
+const pointer = Generators.observe((notify) => {
+  const pointermoved = (event) => notify([event.clientX, event.clientY]);
   addEventListener("pointermove", pointermoved);
-  change([0, 0]);
+  notify([0, 0]);
   return () => removeEventListener("pointermove", pointermoved);
 });
 ```
 
-```js echo
-pointer.map(Math.round) // try moving your mouse
-```
-
-And here’s a generator `j` that increments once a second, defined directly by an immediately-invoked async generator function.
+And here’s a generator `j` = <span style="font-variant-numeric: tabular-nums;">${j}</div> that increments once a second, defined directly by an immediately-invoked async generator function.
 
 ```js echo
 const j = (async function* () {
@@ -188,11 +184,7 @@ const j = (async function* () {
 })();
 ```
 
-```js echo
-j
-```
-
-If a generator does not explicitly `await`, it will yield once every [animation frame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame), typically 60 times per second. Generators also automatically pause when the page is put in a background tab.
+If a generator does not explicitly `await`, as `i` = <span style="font-variant-numeric: tabular-nums;">${i}</div> below, it will yield once every [animation frame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame), typically 60 times per second. Generators also automatically pause when the page is put in a background tab.
 
 ```js echo
 const i = (function* () {
@@ -202,47 +194,53 @@ const i = (function* () {
 })();
 ```
 
-```js echo
-i
-```
-
 As you might imagine, you can use such a generator to drive an animation. A generator is typically easier than a `requestAnimationFrame` loop because the animation is declarative — the code runs automatically whenever `i` changes — and because you don’t have to handle [invalidation](#invalidation) to terminate the loop.
 
-```svg echo
-<svg width="640" height="32">
-  <rect fill="#4269d0" width="32" height="32" x=${(i % (640 + 32)) - 32}></rect>
-</svg>
+<canvas id="canvas0" width="640" height="30" style="max-width: 100%; height: 30px;"></canvas>
+
+```js
+const context0 = canvas0.getContext("2d");
 ```
 
-You can also use a generator to stream live data. Here is a WebSocket that listens for the current price of Bitcoin, keeping the last minute of data in memory.
+```js echo
+context0.clearRect(0, 0, canvas0.width, canvas0.height);
+context0.fillStyle = "#4269d0";
+context0.fillRect((i % (640 + 32)) - 32, 0, 32, 32);
+```
+
+You can also use a generator to stream live data. Here is a WebSocket that reports the current price of Bitcoin via Unicorn Data Services.
 
 ```js echo
 const socket = new WebSocket("wss://ws.eodhistoricaldata.com/ws/crypto?api_token=demo");
 invalidation.then(() => socket.close());
 socket.addEventListener("open", () => socket.send(JSON.stringify({action: "subscribe", symbols: "BTC-USD"})));
-const messages = Generators.observe((change) => {
-  const messages = [];
-  const duration = messages.duration = 60_000;
+const btc = Generators.observe((notify) => {
+  let currentValue;
   const messaged = (event) => {
     const m = JSON.parse(event.data);
-    const t = m.t;
-    if (t == null) return;
-    while ((t - messages[0]?.t) > duration) messages.shift();
-    messages.push(m);
-    change(messages);
+    const v = +m.p;
+    if (isNaN(v) || v === currentValue) return;
+    notify((currentValue = v));
   };
   socket.addEventListener("message", messaged);
   return () => socket.removeEventListener("message", messaged);
 });
 ```
 
-```js echo
-Plot.plot({
-  marginLeft: 50,
-  x: {type: "time", domain: [now - messages.duration, now]},
-  y: {type: "linear", label: "price", inset: 10},
-  marks: [Plot.lineY(messages, {x: "t", y: "p", curve: "step", clip: true})]
-})
+<div class="grid grid-cols-4">
+  <div class="card">
+    <h2>Bitcoin price (USD/BTC)</h2>
+    <div class="big">${btc.toLocaleString("en-US", {style: "currency", currency: "USD"})}</div>
+  </div>
+</div>
+
+```html run=false
+<div class="grid grid-cols-4">
+  <div class="card">
+    <h2>Bitcoin price (USD/BTC)</h2>
+    <div class="big">${btc.toLocaleString("en-US", {style: "currency", currency: "USD"})}</div>
+  </div>
+</div>
 ```
 
 ## Inputs
@@ -288,7 +286,7 @@ const penguin = view(Plot.dot(penguins, {x: "culmen_length_mm", y: "flipper_leng
 ```
 
 ```js echo
-penguin
+penguin // try hovering the chart above
 ```
 
 In the future, Plot will support more interaction methods, including brushing. Please upvote [#5](https://github.com/observablehq/plot/issues/5) if you are interested in this feature.