Build a React application to track the orbit of the International Space Station using Telegraf, InfluxDB, ExpressJS, and Giraffe. Credit: NASA / Roscosmos During an InfluxData internal hackathon, I was looking to work on a project that would help me strengthen my Telegraf and Flux skills. I also wanted to use InfluxData’s Giraffe to visualize my project in a React application. After reading Sean Brickley’s blog post on tracking the International Space Station with InfluxDB, I was inspired to build on this idea. So I landed on building a React application that could track the ISS’s position live and document its journey using InfluxDB, ExpressJS, Telegraf, and Giraffe. There are three primary components for this project: The Telegraf config The ExpressJS API server The React application Let’s start with the Telegraf config. Like Sean, I used a public API to get the current position of the ISS. My plan was to use Telegraf to poll this API, parse the coordinate data, and send this location information to InfluxDB. I used Telegraf’s HTTP plug-in to achieve this. The next step was to parse the coordinate information from the JSON and convert the strings into floats. This can be accomplished with Telegraf’s Converter plug-in. And finally, I needed to send my location data to my InfluxDB cloud instance running in AWS. Naturally, this is easily done with Telegraf’s InfluxDB plug-in. Step one complete! Now we can run telegraf --config ./telegraf/iss.conf and start collecting the ISS’s location. Now that we are beginning to collect some data, the next step is querying it. I decided to build an API using ExpressJS and to query my InfluxDB instance using the InfluxDB JS client. The goal here is to build an API that the React app can use to retrieve the location data that it will need to visualize the ISS’s flight path using Giraffe. First we need to connect to InfluxDB, and we can do that by passing our URL and token to the InfluxDB object. Since we’re going to use the client to run queries, we need to get the Query API object. If you wanted to get bucket information, for example, you would want to get the Bucket API object instead. const influxDB = new InfluxDB({ url: baseURL, token: influxToken }) const queryApi = influxDB.getQueryApi(orgID) Next, we can use the InfluxDB JS client to query our InfluxDB instance like so: app.get('/iss, (_, res) => { let csv = '' const issQuery = `todo` let clientQuery = flux``+issQuery queryApi.queryLines(clientQuery, { next(line) { csv = `${csv}${line}n`; }, error(error) { console.error(error) console.log('nFinished /iss ERROR') res.end() }, complete() { console.log('nFinished /iss SUCCESS') res.end(JSON.stringify({ csv })) }, }) }) This route will use the Query API object from the InfluxDB client to execute our query (which we haven’t defined yet). We’ll use the queryLines function to get our response back line by line. The resulting string will be a csv response that Giraffe can understand. Great! Now we just need a Flux query. I experimented with several queries to try and see which one I thought highlighted the ISS’s movement the best. If I simply grabbed all the data over the past several hours, the Giraffe plot might be too busy. If I focused on trying to grab the data for one full orbit, there is a weird problem to solve with drawing a circular, continuous line across a flat map. So I ended up deciding to draw the ISS’s current orbit, from west to east, meaning I grabbed all the data points from 0 degrees longitude to its current position. The ISS orbits every 93 minutes, so I limited my query within that range. Here’s what I came up with: import "experimental/geo" currentPos = from(bucket: "iss") |> range(start: -1m) |> filter(fn: (r) => r._field == "iss_position_longitude") |> tail(n: 1) |> findRecord( fn: (key) => true, idx: 0 ) from(bucket: "iss") |> range(start: -93m) |> aggregateWindow(every: 3m, fn: min, createEmpty: false) |> geo.shapeData(latField: "iss_position_latitude", lonField: "iss_position_longitude", level: 14) |> filter(fn: (r) => r.lon <= currentPos._value) |> geo.asTracks() The query starts by finding the current longitude position of the ISS, which would be the most recent record. Then we query for all the positional data, aggregated into three-minute windows where the longitude is less than the ISS’s current position. We use Flux’s experimental Geo package to shape the data and to return the positional data as a track. OK now on to the fun part — drawing the graph! I’m just going to cover the highlights, so feel free to check out the details of the implementation in the repo. Basically, we have a React application that is using InfluxData’s Giraffe visualization library. Giraffe recently added Geo plots with the ability to plot markers and tracks (check out the Storybook to play around with them). Our React application will query our API every 30 seconds or so to retrieve the latest data. We’ll use the fromFlux function to parse the response into a table that Giraffe can consume. As you can see from the Storybook, there are a lot of knobs you can tweak with the Geo plot. One important parameter is tileServerConfiguration, which tells Giraffe where to get the map images. I used OpenStreetMap and provided Giraffe the following object so it knows how to retrieve the correct map tiles: const osmTileServerConfiguration = { tileServerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', } At this point, all the pieces are falling together! I added a checkbox into my UI to add the markers as an optional layer and also provided the ability to query for historical data of a custom time range. InfluxData And there we have it — the ISS’s location updated live as it travels around the globe! Feel free to check out the source code and play with it yourself. Let me know if you find other Flux queries that produce interesting visualizations of this data. As Sean mentioned in his post, the Geo features shown here are still experimental, but we’re working hard to get them ready for production. Stay tuned for more exciting updates in this space (pun intended)! If you’re working on a fun InfluxDB project like Sean and you need help please reach out on our community forum or Slack. We’d love to answer your questions and learn about what you’re doing with InfluxDB. Gene Hynson is a software engineer at InfluxData who is passionate about building thrilling product features for InfluxDB. Gene has five years of experience as a full-stack engineer building modern, cloud-first software at VMware, Pivotal, and Boeing. — New Tech Forum provides a venue to explore and discuss emerging enterprise technology in unprecedented depth and breadth. The selection is subjective, based on our pick of the technologies we believe to be important and of greatest interest to InfoWorld readers. InfoWorld does not accept marketing collateral for publication and reserves the right to edit all contributed content. Send all inquiries to newtechforum@infoworld.com. Related content news Data Workshops for Ukraine: Learn a skill and support a cause The two-hour workshops offer training in data visualization and analysis with R, Python, and SQL and cost just $20 or €20. Next up is ChatGPT in R. By Sharon Machlis Mar 06, 2023 3 mins Python R Language Data Science how-to A beginner's guide to using Observable JavaScript, R, and Python with Quarto Using Quarto with Observable JavaScript is a great solution for R and Python users who want to create more interactive and visually engaging reports. By Sharon Machlis Oct 06, 2022 8 mins JavaScript Python R Language how-to Learn Observable JavaScript with Observable notebooks Free, hosted Observable notebooks provide an interactive experience and lots of open-source Observable JS code you can reuse and learn from. Here's how to get started. By Sharon Machlis Oct 06, 2022 9 mins JavaScript Python R Language how-to Data visualization with Observable JavaScript Learn how to make the most of Observable JavaScript and the Observable Plot library, including a step-by-step guide to eight basic data visualization tasks in Plot. By Sharon Machlis Oct 06, 2022 15 mins JavaScript Python R Language Resources Videos