D3.js animation speedup upon slider action

[fcichos]

Description

I wrote this code snippet in a ojs block in a quarto document to animate a oscillating circle using D3.js on my webpage. The circle oscillates in the vertical direction and does some random motion in the horizontal direction. The slider should just change the amplitude of the oscillation. The problem is now that changing the slider value will increase the oscillation amplitude but also the speed of the animation and the step size in the horizontal direction. If I comment out circle.attr("cx", newX); everything is back to normal with no speed up but of course also no random motion.

I have had similar issues also with other code. What could be the issue here?
Thank you for any help!

//| echo: false

width = 600
height = 400

svg = d3.create("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("background-color", "darkgrey")

  initialX = width / 2
  initialY = height / 2
  radius = 50
  frequency = 0.01

  circle = svg.append("circle")
    .attr("cx", initialX)
    .attr("cy", initialY)
    .attr("r", radius)
    .attr("fill", "steelblue")

  viewof amplitude = Inputs.range([0, 200], {step: 1, value: 100, label: "Amplitude"})


  d3.timer((elapsed) => {
    const newY = initialY + amplitude * Math.sin(frequency * elapsed);
    let currentX = parseFloat(circle.attr("cx"));
    const newX = currentX + 10 *( Math.random()-0.5);

    circle.attr("cx", newX);
    circle.attr("cy", newY);
  })


// Display the SVG
svg.node()

[mcanouil]

It does not feel like a Quarto issue. Do you observe the behaviour outside of Quarto?

Also, could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[fcichos]

Thanks! I did not try that outside Quarto yet. Will do that. Here is the whole quarto document.

---
title: This Book
format: html
---

```{ojs}
//| echo: false
d3 = require("d3@7")
```

```{ojs}
//| echo: false

width = 600
height = 400

svg = d3.create("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("background-color", "darkgrey")

  initialX = width / 2
  initialY = height / 2
  radius = 50
  frequency = 0.01

  circle = svg.append("circle")
    .attr("cx", initialX)
    .attr("cy", initialY)
    .attr("r", radius)
    .attr("fill", "steelblue")

  viewof amplitude = Inputs.range([0, 200], {step: 1, value: 100, label: "Amplitude"})


  d3.timer((elapsed) => {
    //animateCircle(elapsed,initialX,initialY,amplitude);
    const newY = initialY + amplitude * Math.sin(frequency * elapsed);
    let currentX = parseFloat(circle.attr("cx"));
    const newX = currentX + 10 *( Math.random()-0.5);

    circle.attr("cx", newX);
    circle.attr("cy", newY);
  })


// Display the SVG
svg.node()
```

[fcichos]

All works fine outside Quarto in this html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Circle with D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <div>
        <label for="amplitude">Amplitude: </label>
        <input type="range" id="amplitude" min="0" max="200" step="1" value="100">
    </div>

    <script>
        const width = 600;
        const height = 400;

        const svg = d3.select("#chart").append("svg")
            .attr("width", width)
            .attr("height", height)
            .style("background-color", "darkgrey");

        const initialX = width / 2;
        const initialY = height / 2;
        const radius = 50;
        const frequency = 0.01;

        const circle = svg.append("circle")
            .attr("cx", initialX)
            .attr("cy", initialY)
            .attr("r", radius)
            .attr("fill", "steelblue");

        const amplitudeInput = document.getElementById("amplitude");

        d3.timer((elapsed) => {
            const amplitude = parseFloat(amplitudeInput.value);
            const newY = initialY + amplitude * Math.sin(frequency * elapsed);
            let currentX = parseFloat(circle.attr("cx"));
            const newX = currentX + 10 * (Math.random() - 0.5);

            circle.attr("cx", newX);
            circle.attr("cy", newY);
        });
    </script>
</body>
</html>

[jimjam-slam]

Hey @fcichos, I can't quite try this out yet, but I think you might need to separate a few parts of your code out here. Remember that OJS code runs every time reactivity demands it — but in Quarto, it generally runs on a per-statement basis, unless you wrap a chunk in braces (note that inside the braces, you need to declare variables with regular JavaScript rules, using const or let).

So you want the code that sets up the initial animation to run once, and then you want the "reactive" part to run continuously.

I also note you're using d3.timer() with its default delay of 0. I haven't used d3.timer() a lot directly, but you might find you hit performance problems that way as the computer tries to redraw the animation as often as possible. Observable ships with the now object, which is a timer, and if you try to redraw stuff using now, Observable will automatically limit the animation to 60 FPS. That might work better.

Try something like this out:

---
title: This Book
format: html
---

```{ojs}
//| echo: false
d3 = require("d3@7")
```

```{ojs}
//| echo: false

{
  const width = 600
  const height = 400
  
  const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("background-color", "darkgrey")

    const initialX = width / 2
    const initialY = height / 2
    const radius = 50
    const frequency = 0.01

    const circle = svg.append("circle")
      .attr("cx", initialX)
      .attr("cy", initialY)
      .attr("r", radius)
      .attr("fill", "steelblue")

  return svg.node()
}

viewof amplitude = Inputs.range([0, 200], {step: 1, value: 100, label: "Amplitude"})


// d3.timer((elapsed) => {
//   //animateCircle(elapsed,initialX,initialY,amplitude);
//   const newY = initialY + amplitude * Math.sin(frequency * elapsed);
//   let currentX = parseFloat(circle.attr("cx"));
//   const newX = currentX + 10 *( Math.random()-0.5);
// 
//   circle.attr("cx", newX);
//   circle.attr("cy", newY);
// })

// i've left these calculations verbatim, but try rewriting them to use `now`
// instead of the previous position, `currentX` and `currentY`

circle.attr("cx", currentX + 10 *( Math.random()-0.5))
circle.attr("cy", initialY + amplitude * Math.sin(frequency * elapsed))

```

Hope that helps as a starting point!

The tl;dr of this is that D3 code you get from elsewhere won't run exactly the same in OJS, because OJS runs differently. Here's a good Observable notebook for starting out with animation in OJS!

[jimjam-slam]

@fcichos No need to rewrite the timer stuff if you don't want to, by the way: just pull the amplitude slider code out, wrap the rest in braces and add const to your variable assignments. Here's a working demo!