I want to plot a sine wave while traversing the unit circle. I want to use it for educational purposes. The plot I want to have is similar to the one below:

Besides, I want x axis' tick labels to involve π/2, π, 3π/2, 2π. It may support some math I want to say.

How can I plot such a unit circle and a corresponding xy-plot using Javascript? Which library should I use? Could you provide a starting point?

I want to plot a sine wave while traversing the unit circle. I want to use it for educational purposes. The plot I want to have is similar to the one below:

Besides, I want x axis' tick labels to involve π/2, π, 3π/2, 2π. It may support some math I want to say.

How can I plot such a unit circle and a corresponding xy-plot using Javascript? Which library should I use? Could you provide a starting point?

• javascript
• plot
• interactive

• 2 What exactly is the question here? It's an interesting subject, but if you don't state what you're after exactly, it's likely to be closed. – Drew Noakes Commented Dec 19, 2012 at 11:56
• 3 Judging by the clueless question, it's no use explaining what HTML5 Canvas or requestAnimationFrame is. Just look at D3.js, it's all you need. Example: bl.ocks/1457934 – katspaugh Commented Dec 19, 2012 at 11:58
• 1 Sorry, I didn't notice that I forgot to ask the question :S. I modified it and cleared my question. – petrichor Commented Dec 19, 2012 at 15:05

3 Answers 3

Drawing

There are two good ways to "draw" arbitrary shapes using javascript.

• The first option is an HTML canvas element. Like an artists canvas, an html canvas provides a region in which you can draw arbitrary shapes, lines, etc. using javascript.
• The second option is a SVG drawing. SVG is a language similar to HTML which allows you to define lines, shapes, etc. There are good libraries for drawing out SVG code using javascript (e.g. raphael.js)

So both options let you draw to the screen with javascript. I would remend using SVG, as it gives you more ability to modify elements you have already drawn, attach event handlers to elements in your drawing, etc.

Animation

Once you have the ability to draw, you need to animate your drawing. The short answer is you want to use requestAnimationFrame to tell the browser you would like to have a function called periodically to draw a frame of your animation. Each time that function is executed, you will update your drawing appropriately.

First, notice that with the points you are wanting something shown at some time t. That is, x and y are functions of time or parametric equations.

Ignoring scale factors, your circle would be

x(t) = cos(t)
y(t) = sin(t)

and your wave would be

x(t) = t
y(t) = sin(t)

Where t ranges from 0 to 2pi. Javascript supports trigonometric operations via the Math object.

The html5 canvas is a pixel based representation of what has previously been drawn on it or erased from it. That is, it doesn't remember any of the shapes that are drawn to it, either something is drawn and pixels get changed, or not.

One thing that's useful about the html5 canvas is that you can define a set of statements to draw some particular object, and then if you need to draw that object at some particular location, scale, and/or rotation or reflection, you can save the state of the canvas to a stack (provided by the API), set up the transform, draw the object, and revert from the stack to continue doing what else needs to be done.

One thing to remember is that (without transform) the canvas coordinate (0,0) starts up at the top left hand corner with the y coordinate increasing going down, whereas the Cartesian coordinate system has the y coordinate increasing going up.

To draw text labels, the canvas api does allow for drawing with fonts with multiple neat effects with any font loaded (say from some web font foundary) or on your system.

You mentioned that this was to be done for "educational purposes", but it isn't clear to me if those purposes are for students to learn about some mathematical concepts, or for you to learn some programming concepts. If it's for the latter, I fear giving you an example directly using html5 canvas might be a bit too much (it's often better to discover things on your own with aid only requested for when you get stuck) and using d3.js might be a bit overkill, unless, of course, you want to learn about d3.js. I'd still remend some practice at the fundamental manipulations of the html5 canvas first. If it's for the former, well, utilizing d3.js might be quite fine. After all, it might be fun to play with something equivalent to Jason Davies Animated Bézier Curves related to sine waves and circles or something similar.

Edit: Oops, I somehow got into mind that d3 used canvas, but it's clearly more svg based now that I've rechecked at it. Html5 canvas "fundamentals" aren't necessarily related to d3.js, so I struck that line.

This animation pleted by Jason Davies using D3 JS and SVG would appear to be a pleted sample of what you are after: http://www.jasondavies./animated-trig/