Olympic athletes exhibit a wide range of heights and weights, with specific requirements varying across different sports. While some sports like gymnastics favor smaller, more agile athletes, others like basketball and rowing often select taller individuals with greater strength and power.

On this heatmap olympic athletes will be positioned according to their scaled weight (x-axis) and height (y-axis).
We will use a color scale to differentiate between male and female athletes.

Import the data

Let’s start with a blank chart. To do this, click on the dots in the upper right corner and select New blank chart. Now import the olympians dataset. Click the icon to search data, then select Observable Plot. Search for olympians and choose the corresponding dataset. You will now see the data in a table. Please note the height and the weight columns.

Plot the dots

Next we will add the dot mark. To do so, click icon to add a mark and choose the dot mark. On the newly created panel we will choose height for the X axis and weight for the Y axis.

You should now see the following chart:

Male and Female

Lets figure out which dots represent the female and which the male athletes. If you scroll down a bit you will find the stroke color, open the pulldown menu and click sex. This will result in blue dots for the females and yellow for the males.

Colors and legend

To change the default colors and add a legend for the sex we need to add and edit the color scale. Close the Dot panel and then click the icon to add a scale. Then choose Color to add the color scale. For color scheme we choose Rainbow. Below that we click Legend to add a legend to the heatmap.

Radius of the dots

We can use the radius of the dots to indicate the amount of athletes with the same height and weigth. For this we need to do some extra work because the count of athletes with the same height and weight is not a value in the data. Go back to the Dot Panel and click transform. For transformation choose bin and then for type we choose binX. For scale we choose radius and for reducer we choose count.

Change the radius

The default radius is a bit big which makes the heatmap a bit messy. We can change the the radius by adding the radius scale. You can add the radius scale in the same way as the color scale. Inside the radius panel you can change the range of the radius. For Min range pick 0, and for Max range pick 6.

You should now have this heatmap