D3: Implement playback/scrubbing

[bastianilso]

For much of the data in e.g. Whack-A-Mole, we are dealing with a timestamp - the data is temporal. It's therefore important that we can playback and scrub in the data, via some kind of timeline.

Here is an example from plotly.

The question is:

• Are there widgets/scripts for D3 which implement functionality like this we could use and leverage?
• What data format do these widgets require?

[aldsanms]

For much of the data in e.g. Whack-A-Mole, we are dealing with a timestamp - the data is temporal. It's therefore important that we can playback and scrub in the data, via some kind of timeline.

Here is an example from plotly.

The question is:

• Are there widgets/scripts for D3 which implement functionality like this we could use and leverage?
• What data format do these widgets require?

Today I looked at different ways to work with timestamp, I'm trying R library "vistime" which might work in our case.

At the moment I don't have a scroll range, I'll look for that tomorrow.

Also the data is retrieved in a CSV file.

[aldsanms]

Today I managed to make graphs with D3.js, and add axes with date or value.

I made vertical and horizontal axes by retrieving date values from a list.

[bastianilso]

Checkout:

https://observablehq.com/@mbostock/scrubber

examples: https://observablehq.com/@mbostock/bar-chart-race-with-scrubber https://observablehq.com/@d3/animated-treemap https://observablehq.com/@mbostock/the-wealth-health-of-nations

[bastianilso]

Hi @aldsanms, I think a good next step for you is to use the Timestamp column to drive your scrubbing timeline. I have attached a csv file that includes continuous sampling of controller movement with timestamps. log2021-04-09 09-26-12.7771Sample.csv

• we will need time to pass so that 1 second matches 1 second of play time
  • the scrubbing timeline should encode timestamps so we can see where we are in time.

Have a look at what is possible and let me know what you find out.

[aldsanms]

At the moment I can display the data. I will look tomorrow for :

• To resize the bottom scrollbar axes;
• To ensure that 1 second matches with 1 second of play time;

[aldsanms]

Now the X and Y axes are scaled automatically. 1 second in the program is still not a second in real life.

https://user-images.githubusercontent.com/73821252/195097177-b0437edd-6889-465e-a1a0-558f278f1151.mp4

[aldsanms]

I managed to read the data in real time (5 seconds of error for 4 minutes because of the reading time of the program). I calculate the number of movements per second based on the number of data and the time gap between the first and last value.

[bastianilso]

@aldsanms please provide some more detail on your approach. is this still based on the Scrubber example from Mike? (https://observablehq.com/@mbostock/bar-chart-race-with-scrubber) I was wondering how come the controls look different in your example? What are the challenges? I'm not sure what you mean by the 5 seconds of error.

[aldsanms]

@aldsanms please provide some more detail on your approach. is this still based on the Scrubber example from Mike? (https://observablehq.com/@mbostock/bar-chart-race-with-scrubber) I was wondering how come the controls look different in your example? What are the challenges? I'm not sure what you mean by the 5 seconds of error.

---

With the aim that the information visible on the graph follow the real time (1 second corresponds to 1 second of game time), we need to know how much data per second we have to display. So I calculate it using the total number of data on the CSV and the time gap between the 1st and 2nd value. with this i can calibrate my clock in order to changes the position of the dot in real time (in our case the dot changes position 17 times per second)

I didn't exactly use Mike's "Scrubber" function, but I did something very similar.

The control is different on my example because I think R Shiny uses old version of HTML compiler.(the old scrollbar style looks like mine). I found this on the net:

On my example, the graph puts all the points present on the CSV how you send me according to the time slot.

In our case the red dot must change position approximately every 60ms, but the program is not read instantaneously, less than 2ms are lost at each read cycle. There are about 4000 points in the CSV, so the program will need to do 4000 clock cycles to move the red point from start to end, and 4000 * 2ms = 8s. So over the whole movement cycle of the red point it will arrive at the last point of the CSV with 8s of shift (8s of error).

[aldsanms]

I managed to use the zoom function of d3, it handles movement and zooming on the graph. moreover, it automatically manages the resizing of the axes.

https://user-images.githubusercontent.com/73821252/196193790-99bc5db5-1442-4167-932a-b33b931650a4.mp4

I failed to display and resize the date axis with d3.zoom().

[bastianilso]

@aldsanms thanks for the report. About the date axis, that's interesting. Is it the same thing for all axis? or does it have something to do with how the date axis is currently implemented? Just wondering whether d3 has its own way of defining axes which we might want to use here. :)

[aldsanms]

Hello, my problem is that dates are not numbers, I can't "multiply" them with .scalle(). I managed to resize the date axis with JS, but it no longer works when we move out of our date set range. however the Y axis works fine.

I use this command to resize the Y axis:

graphSettings.gy.call(graphSettings.yAxis.scale(e.transform.rescaleY(graphSettings.yScale)));

with: graphSettings.yScale = the range of data values in Y; graphSettings.gy = the visual parameterization of the axis; graphSettings.yAxis = the axis; e = d3's "zoom" event;

Here is my code, the commented parts are my attempt to add the X axis.

(https://github.com/aldsanms/sharedCode/tree/main/zoomWithData)

[bastianilso]

@aldsanms oh, but I guess that zooming should only be happening in the spatial domain (with X and Y being numerical values as you say). That is, the timestamp range slider/ playback should not "scale with content" so to speak. So this is fine.

[bastianilso]

@aldsanms what is the status on implementing playback/scrubbing visualizations in D3. Have you achieved all goals you wanted with your implementation from this perspective? Feel free to share a video of the current state.

[aldsanms]

I can now play a scrollbar and run an animation with a button.

Here is an example where we can see the use of a scrollbar and a button:

https://user-images.githubusercontent.com/73821252/201104953-14b4c354-067d-47f0-9b75-f4b9864e910b.mp4

In this example we can choose the time with the scrollbar and play or stop the animation with the button

I think this issue can be closed.