Project

Our Objective

In this lesson, we’ll recreate a bubble plot illustrating the relationship between GDP per capita (x-axis) and life expectancy (y-axis).

Each bubble represents a country, with color indicating the continent and size representing population.

The data

The dataset is an array of objects, with each object representing a country. Each object has five properties that provide all the information needed for the bubble chart:

const data = [
  {
    "country": "Afghanistan",
    "continent": "Asia",
    "lifeExp": 43.828,
    "pop": 31889923,
    "gdpPercap": 974.5803384
  },
  {
    "country": "Albania",
    "continent": "Europe",
    "lifeExp": 76.423,
    "pop": 3600523,
    "gdpPercap": 5937.029526
  }
]

You can find the complete js object here.

Get full data

Good Luck!

You’ll soon see that the process for creating a graph follows similar steps each time.

• Start by carefully examining the data to fully understand its contents.
• Next, consider the necessary scales. For this chart, you’ll need four: x, y, color, and size! (Use these colors: #e0ac2b, #e85252, #6689c6, #9a6fb0, #a53253)
• Then, organize your return() statement to initialize the boundsArea.
• Next, loop through the dataset to render your markers (circles in this case). This step is straightforward once your scales are set up!
• Finally, add the axis components.

Note: Avoid typing everything from scratch. Instead, refer to previous exercises in the course to copy and paste any code snippets you need!

Solution