Shinning - React JS based Starlink Trajectory Visualization

Related tags

Charts Shinning
Overview

Starlink

Demo Gif

Project Description

Ready for a space adventure? Starlink is a React.js project to track satellites in real-time based on geo-location. Users can enter parameters including longtitude and latitude to find all matched satellites, and then select one or a few satellites to view their animated trajectory on a world map for a custom duration. The real-time satellite tracking functionality is enabled by N2YO.com.

Technical Details

A lightweight frontend project based on React.js, Starlink uses Ant Design for user-friendly UI components and D3 for dynamic satellite visualization. It also uses the Axios library to make AJAX requests and create-react-app-buildpack to deal with CORS issues. It is now deployed on Heroku and served via Nginx for better stability.

The app is bootstrapped using create-react-app boilerplate. The React component layout diagram is illustrated as below:

Diagram

How to Use

Settings

  1. Visit the Starlink website, enter all the parameter settings on the upper-left panel and click "Find Nearby Satellite". If you have no clue about the settings, feel free to use the example settings in the table below.
Parameter Unit Range Example
Longtitude degree -180 - 180 50
Latitude degree -90 - 90 60
Elevation meter -413 - 8850 2000
Altitude degree 0 - 90 80
Duration second 0 - 90 20
  1. Select the satellites you want to see on the bottom-left panel, click "Track on the map" and wait for the animation to load. Notice that "no data" will appear if there are no satellite on your specified geo-location, which means you need to go back and adjust your satellite settings.
  2. View the selected satellite paths on the world map, and be awed!

For Developers

  • To develop locally, download the project from my GitHub, cd into the folder and run npm install. You can later run npm start to start the app on the default localhost:3000 port and npm run build to build the project for production.

Handy References


Rui Zhang

Jan 11, 2022

Owner
Rui Zhang
I'm starting to contact this world.
Rui Zhang
BizCharts - Powerful data visualization library based on G2 and React.

New charting and visualization library has been released: http://bizcharts.net/products/bizCharts. More details about BizCharts Features Rea

Alibaba 5.8k Jan 13, 2022
Tanyoung Kim 27 Nov 12, 2021
A data visualization framework combining React & D3

Semiotic is a data visualization framework combining React & D3 Interactive Documentation API Docs on the wiki Examples Installation npm i semiotic E

nteract 2.2k Jan 20, 2022
A thin, typed, React wrapper over Google Charts Visualization and Charts API.

React Google Charts A thin, typed, React wrapper for Google Charts. Docs and examples. React Google Charts Docs and examples. Installation Quick Start

Rakan Nimer 1.1k Jan 14, 2022
This is a visualization tool for sorting algorithms made using React JS

This is a visualization tool for sorting algorithms made using React JS. I made this project to help me comprehend the working of the sorting algorithms.

Harsh 12 Nov 28, 2021
Reactochart is a library of React components for creating data visualization charts and graphs.

Reactochart is a library of React components for creating data visualization charts and graphs. Components include line chart, bar chart, area chart, heat maps, scatterplot, histogram, pie chart, sankey diagram, and tree map.

Spotify 478 Dec 9, 2021
A thin, typed, React wrapper over Google Charts Visualization and Charts API.

A thin, typed, React wrapper for Google Charts. Docs and examples. React Google Charts Docs and examples. Installation Quick Start

Rakan Nimer 1.1k Jan 11, 2022
This is React Signals Plot component for geophysical data visualization.

React Signals Plot This is React Signals Plot component for geophysical data visualization. The component supports 'on the fly' data compression. That

Roman Guseinov 0 Jun 27, 2020
React component for Globe Data Visualization using ThreeJS/WebGL

react-globe.gl React bindings for the globe.gl UI component. A React component to represent data visualization layers on a 3-dimensional globe in a sp

Vasco Asturiano 324 Jan 17, 2022
A simple Covid 19 dashboard analytics visualization developed with React and Ant Design

A simple Covid 19 dashboard analytics visualization developed with React and Ant Design

null 1 Jan 6, 2022
Data Visualization Components

react-vis | Demos | Docs A COMPOSABLE VISUALIZATION SYSTEM Overview A collection of react components to render common data visualization charts, such

Uber Open Source 8.1k Jan 16, 2022
🐯 visx | visualization components

visx visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefi

Airbnb 14.7k Jan 21, 2022
Data Visualization Component

react-charty This component was born from the Telegram programming contest where I took one of the prize places. A big thanks to the Telegram team and

Aleksandr Telegin 54 Jan 13, 2022
Data Visualization Components

react-vis | Demos | Docs A COMPOSABLE VISUALIZATION SYSTEM Overview A collection of react components to render common data visualization charts, such

Uber Open Source 8.1k Jan 13, 2022
Muze is a free data visualization library for creating exploratory data visualizations (like Tableau) in browser

Composable data visualisation library for web with a data-first approach now powered by WebAssembly

Charts.com 1.2k Jan 9, 2022
visx is a collection of reusable low-level visualization components.

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

Airbnb 14.6k Jan 13, 2022
Reactive Polyomino Packing for Interactive Data visualization

Reactive Polymino Packing (RPP) Reactive Polymino Packing algorithm is developed to introduced interactivity within a packed layout of arbitrarily sha

Sarah Abdelkhalek 7 Oct 25, 2021
js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart

Why? While I've been working on Under-the-hood-ReactJS I spent enormous amount of time on creating schemes. Each change in code or flowchart affects a

Bohdan Liashenko 6.3k Jan 14, 2022
Casual data visualization framework, built on top of D3.js

d3 wrapper for casual data visualization Status v0.1.0 (alpha release), the npm package is available. The static bundle file is not supplied at now. I

Suzume Nomura 2 Dec 9, 2021