A D3.js in Vue.js+Pinia demonstration that displays ephemerides in a graph and tabular form

Graphic Ephemeris

What is an Ephemeris?

According to Dictionary.com it is:

  1. a table showing the positions of a heavenly body on a number of dates in a regular sequence.

  2. an astronomical almanac containing such tables.


What is the ‘Graphic Ephemeris’ ?

It is a D3.js in Vue.js+Pinia Demonstration program. It shows time series data (ephemerides) in a visual display along with a tabular format and analysis.

Have a look at the LIVE DEMO

The D3 graph presents two selectable perspectives of the data, and a lockable tracking crosshair which selects data points to be displayed in the tables. Utilizing a Resize Observer the graph will resize as the window resizes. (see Best Viewing below)

The code for this Demo uses the Vue3 Composition API. It demonstrates Components and their reuse, as well as reactivity between loosely coupled components via a Pinia store. The Pinia store retrieves the time series data from an API and provides functions to calculate the Aspects of the data.

The demo also includes User inputs for Dates, check boxes, and radio buttons. Again, demonstrating the reactivity between User controls and D3.

No CSS framework/library was incorporated, but a little CSS fun was thrown in for good measure.

Best viewing

This is a busy frontend, packed with lots of information, and as such doesn’t fit well in a small screen. You should have a window of 1400 x 800 or larger to view this demo properly. YMMV

Additional Requirements

In addition to this project, you will also need an Ephemeris API. Fortunately, one can easily be found here: https://github.com/llhovind/ephemeris-api

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

GitHub

View Github