explanation of animating a sine wave example - math

Question

I am looking at this example and one part of this does not make sense.
The code creates an array of values like this:
for (i = 0; i < 84; i++) {
data.push(i * 10 / 84);
}
It then uses this array to get both the x and y values for the graph where d is an element of the array:
sine
.x(function (d, i) { return xScale(d); })
.y(function (d, i) { return yScale(Math.sin(d - time)); });
Is 84 just an arbitrary number for the available width remaining for the graph or is there any particular reason of where this came from?

Answer 1

I think it is a number of points per circle... compromise between accuracy and speed. I usually use 36 for small circles and 90 for big. ... and few thousand for huge ones ... so the idea is to use as low count as possible while the circle still looks like circle (in max zoom) and not like polygon.
You can also compute this algebraically ...
da=2.0*M_PI/n
e=r-(r*cos(0.5*da))
where n is the number of line segments per circumference and e is the max distance from desired circle shape. if you set it to desired error in pixels (and radius r is in pixels) then:
n=M_PI/acos((r-e)/r)
Hopefully I did not make any mistake while deriving the equations directly in SO editor. So if you want really precise circle set e=0.4 [pixels] and you should be fine
[edit1] sin wave
The for loop creates list wit these properties:
d(i) = < 0.0 , 10.0 )
i = { 0,1,2,...83 }
Then the sinwave is rendered:
x(i) = xscale * d(i)
y(i) = yscale * sin(d(i)-time)
Which gives you:
x(i) = < 0.0 , xscale )
y(i) = < -yscale , +yscale )
So the sinwave renders 10/(2*PI)= ~ 1.59 periods. The half overlap is cut off by the view. So in theory you could use 6.28/84 -> 7/84 instead of 10/84 but it is maybe just safety value to handle different aspect ratio seettings of the rendering (I do not code in that platform so this is just speculation on my side) But as I said in the comments the sinwave is scaled so the PI period x size is equal to PI*circle_radius so the 84 most likely comes from the circle (my original answer).

Answer 2

This is possibly just a magic number, that is, completely arbitrary. In fact, as you said, the first thing I thought was that it is related to the width of the graph.
Here is a fiddle: https://jsfiddle.net/1nboube9/1/
You can tweak the number and see what happens. It seems to me that any number above 44 does the trick.
for (i = 0; i < 44; i++) {
data.push(i * 10 / 84);
}
But, of course, the path is not the same if you change the denominator as well:
for (i = 0; i < 44; i++) {
data.push(i * 10 / 44);
}
This creates a very different path. And, so, I tried this:
for (i = 0; i < someNumber; i++) {
data.push(i);
}
And it creates a very unpleasant path. So, I believe that this is what happened: the designer first created data.push(i * 10 / 84); to make the path more circular, and then changed the loop accordingly. Maybe I'm completely wrong, but that's my bet.