Moon Phase Visualizer

Fig A Fig a Fig b Month 1
Moon phase visualizer is a simple demo to understand how Moon's phases (and eclipses) occur.

Moon Phases


Eclipses happen when lines of nodes (red line in Fig b) co-incides with shadow of earth or moon. Watch the lines of nodes turn green for every few revolutions (approx 3-4) when the shadow of moon and earth coincides with them. If the moon is in full moon position then it is a lunar eclipse; if in new moon position it is a solar eclipse. The part of the shadow shown is called 'umbra' which results in Total Eclipses. There is another component of shadow called 'penumbra' (not shown in the figure) which results in partial eclipses.

Feedback & Contributing

Feedbacks, Improvements and Contributions are greatly appreciated. If you are familiar with Github, you can find the source computer program for this demo here. Check out Github issue tracker here for current issues and problems.

If you are not familiar with computer programming or Github, not a problem at all. Mail me at with your feedbacks and suggestions to improve this demo.


This demo is built using d3.js. There is a very brief introduction to d3.js with some of the elements of this demo, which you can check out here.
This demo is currently best viewed in chrome. Tested in Chrome and Firefox.
This demo is not to scale. They are not shown with complete scientific accuracy for demonstration purposes.