Prep 9: External APIs

Due: Wednesday, Apr 2nd

Read

• 10.3 Asynchronous Coding (10.3.2 to end)
• 10.5 Using External APIs
• MDN: Asynchronous JavaScript
• MDN: Promises

Write

The goal of this exercise is to become familiar with Plotly.js (from Section 10.5 of the book).

1. Download example.html, which is a "hello world" example.
   • Notice the code uses cdn.plot.ly; you don't need to install anything.
   • Run the example and hover over / experiment with the toolbar buttons.
2. Go to Plotly.js Basic Charts and skim through a few more examples.
   • See also the Function Reference to learn more about the API.
3. Download world_data.js, which is data is from Gapminder (CC-BY license).
   • The data is taken from the year 2025, with the numbers reformatted to integers.
4. Create a new file named bubble.html. Make a bubble chart with the following data:
   • X-axis: GDP per capita
   • Y-axis: Life Expectancy
   • Text: Country Name
5. Use the following layout options:

   layout = {
     title: {
       text: 'Bubble Chart Example'
     },
     xaxis: {
       range: [0, 75000],
       title: { text: 'GDP per capita' }
     },
     yaxis: {
       range: [50, 90],
       title: { text: 'Life Expectancy' }
     }
   }
   

6. Your plot should look something like this:
7. Submit your bubble.html to Gradescope.