The sun and moon data is based on the SunCalc.net project and library. Full credit goes to Vladimir Agafonkin (@mourner) and Richard Körber for their work in producing these libraries.
Horizon Line: the shaded circular outline represents the horizon.
Sun and Moon Paths: the paths within the horizon outline represent the path the sun (orange) and moon (dark blue) will follow. The distance the sun or moon is in from the horizon to the center is the elevation or altitude of the sun or moon. If the sun or moon is touching the horizon line, the celestial body will be on the horizon, and if it's at the center of the circle, then the body is directly above you.
The coloured segment of the path is when the sun or moon is above the horizon, and the shaded segment is when they are below the horizon.
You will also notice the celestial bodies change from coloured to/from shaded when they are above or below the horizon.
Rising and Setting Lines: are the lines that project from the center to the horizon outline. When shown these represent the time and azimuth (angle) at which the sun or moon will rise or set. For example, if you align your phone with the north direction and sunset line will point in the direction the sun is setting.
Moon Phase and Angle: the rendered moon also shows the phase and angle of the moon which you'll notice will change as you swipe.
Number Display: the numbers displayed above the map show the sunrise, sunset, moonrise and moonset in that order. This may change in the future when more sun/moon metrics are added.
There are many improvements planned for the future including:
If you'd like to add any suggestions, please post them on the Flowx Forum so we can keep track of them.