Preparing S3 Data for Public Visualizations

Hands-On Lab

 

Photo of Fernando Medina Corey

Fernando Medina Corey

Training Architect

Length

00:30:00

Difficulty

Intermediate

In this hands-on lab, we will learn how to configure data in S3 to allow it to be accessed by JavaScript visualization libraries in order to make public visualizations.

What are Hands-On Labs?

Hands-On Labs are scenario-based learning environments where learners can practice without consequences. Don't compromise a system or waste money on expensive downloads. Practice real-world skills without the real-world risk, no assembly required.

Preparing S3 Data for Public Visualizations

Introduction

In this hands-on lab, we will learn how to configure data in S3 to allow it to be accessed by JavaScript visualization libraries in order to make public visualizations.

Log in to the AWS Management Console using the credentials provided on the lab instructions page.

Create an S3 Bucket and Upload Example Data to S3

Create an S3 Bucket

  1. In your web browser, navigate to this URL.
  2. Download the three files in the repo and save them to your local machine.
  3. In the AWS Management Console, navigate to the S3 service.
  4. Click + Create bucket.
  5. Name the bucket anything you like (e.g., "penguin365").
  6. Click Next.
  7. On the Properties page, leave the options as their defaults and click Next.
  8. On the Public access settings page, uncheck all of the options.
  9. Click Next.
  10. Click Create bucket.

Upload Example Data to S3

  1. Click the name of the bucket we just created to open it.
  2. Click Upload.
  3. Click Add files.
  4. Select data.json and click Open to upload it.
  5. Click Next.
  6. Under Manage public permissions, select Grant public read access to this object(s).
  7. Click Next.
  8. Leave the storage class options as their defaults, and click Next.
  9. Click Upload.

Configure the Data to Be Accessible from a JavaScript Visualization

  1. Open each of the three downloaded files in a new browser tab.
  2. Open your text editor and open all three downloaded files in it.
  3. In top-ten-highcharts.html and top-ten.html, replace BUCKET_NAME with the name of your S3 bucket.
  4. Save the changes, and refresh the files in your browser tabs.
  5. Go back to the S3 Management Console, and click the name of your S3 bucket to open it.
  6. Click the Permissions tab.
  7. Click CORS configuration.
  8. In the CORS configuration editor, enter the following:
    <CORSConfiguration&gt
    <CORSRule&gt
      <AllowedOrigin>*</AllowedOrigin&gt
      <AllowedMethod>GET</AllowedMethod&gt
    </CORSRule&gt
    </CORSConfiguration&gt
  9. Click Save.
  10. Refresh the page in your top-ten-highcharts.html browser tab.
  11. Refresh the page in the top-ten.html browser tab.
  12. You should see data visualizations in both tabs.

Conclusion

Congratulations, you've successfully completed this hands-on lab!