Powerful Data Visualization Using JavaScript Carousels And NASA APIs
Carousels are a great way to allow users to swipe through multiple full-screen pages. A carousel shows only one of its pages at a time but allows you to browse through other pages using a swipe gesture. You can think of a carousel as a single active item, with the rest of the items stretching away left and right. Indicator dots visualize how many available screens are available to swipe through. In this blog post, we’ll look at how we can use NASA APIs to create beautiful JavaScript image carousels for powerful data visualization and analysis. How can I get images from NASA APIs? NASA provides a bunch of APIs to access a variety of astronomical data such as APOD, Asteroids NeoWs, DONKI, Earth, EONET, EPIC, Exoplanet, etc. To use these APIs, you need to have an access token. You can create your access token by registering onto the NASA portal with your email address and password. For demonstration activities throughout this tutorial, we will use the following API calls to NASA to get the images for our Sencha carousel. APOD (current day) APOD (specific day) Earth imagery APOD API (current day) let request = new XMLHttpRequest(); request.open(“GET”, “https://api.nasa.gov/planetary/apod?api_key=”); request.send(); request.onload = () => { if (request.status === 200) { // by default the response comes in the string format, we need to parse the data into JSON console.log(JSON.parse(request.response)); } else { console.log(`error ${request.status} ${request.statusText}`); } }; In the code above, we are calling NASA’s planetary APOD API with no optional query parameters. It means that it will return the astronomical picture of the day for the current day. Notice that the api_key query parameter specifies a placeholder in the above code snippet which should be replaced with your personal API access token before making the API call. Earth Imagery API let request = new XMLHttpRequest(); request.open(“GET”, “https://api.nasa.gov/planetary/earth/imagery?lon=100.75&lat=1.5&date=2014-02-01&api_key=”); request.send(); request.onload = () => { if (request.status === 200) { // by default the response comes in the string format, we need to parse the data into JSON console.log(JSON.parse(request.response)); } else { console.log(`error ${request.status} ${request.statusText}`); } }; In the above code, we are calling NASA’s earth imagery API with a bunch of query parameters. The API will return an earth image at the specified latitude and longitude values. Notice that the api_key query parameter specifies a placeholder in the above code snippet which should be replaced with your personal API access token before making the API call. APOD API (specific day) let request = new XMLHttpRequest(); request.open(“GET”, “https://api.nasa.gov/planetary/apod?date=2020-05-05&api_key=”); request.send(); request.onload = () => { if (request.status === 200) { // by default the response comes in the string format, we need to parse the data into JSON console.log(JSON.parse(request.response)); } else { console.log(`error ${request.status} ${request.statusText}`); } }; In the above code, we are calling NASA’s planetary APOD API with the date as an optional query parameter. It means that it will return the astronomical picture of the day for the specified day. Notice that the api_key query parameter specifies a placeholder in the above code snippet which should be replaced with your personal API access token before making the API call. You can find numerous other NASA APIs at api.nasa.gov. How can I set up a simple horizontal carousel? The response of each API call we used above will either return a link […]
