NASA on Mars: Images taken by the Curiosity Rover

Jessica YungData ScienceLeave a Comment

NASA-curiosity-rover

Yesterday we looked at satellite images of the Earth. Today let’s look at images of Mars taken by the Curiosity Rover! (Scroll down for the final product.) I made some quick adjustments to yesterday’s JS Bin app and got this nasty-looking return object:

JS Bin on jsbin.com

Parsing the data
Let’s get an idea of what the return object is like to see what data we need to extract.

We have an array of at most 25 photos (the API page says we can get at most 25 photos per page). Each photo has the following attributes:

  • ID
  • Earth_date and sol
  • Camera details
  • Image source (link to image)
  • Rover details

Parsing data can be made easier by commenting it as I did in the final five rows of the JSON object:

Extracting the data we want
We want the link to the image source of each image. We might also want to print the date the image was taken and the camera with which the image was taken. We don’t need to print the rover details for each picture because we are only considering images taken by Curiosity.

Steps:
1. Add divs to put figures in using HTML

Wrapping images with figure tags and adding figcaption tags is an easy way to add captions to images.

 

I copied and pasted 25 of these divs. If you’ve got a better way of doing this, do post in the comments.

2. Load photos of Mars and figure captions onto page with JavaScript

Other minor edits

  • Removed the if clause checking for video because we don’t have video here.
  • Added dynamic jQuery date display.

And here’s what we’ve got: an application that shows us up to the first 25 images taken by Curiosity for any given day.

JS Bin on jsbin.com

  1. To change the date, edit the year, month and day variables in the JS window.
  2. If you’ve reached the maximum number of API calls (data requests), get your own API key from NASA (for free) and replace DEMO_KEY with your own API key.

Leave a Reply