Learn D3.js

Using a logarithmic scale

Since the GDP per capita grows exponentially, and most data points use the first 10% of the scale, a logarithmic scale may improve readability. Since no GDP values are zero, a logarithmic scale can be used. All you have to do is replace scaleLinear() with scaleLog():

const scaleY = d3.scaleLog().range([h-marginH, marginH]);

This change made the vertical scale appear in scientific notation, which is the default when an axis uses a log scale. You can change it back to how it was displayed in the linear scale with the ticks() method:

axisY.ticks(8, ',');

That's it; now, you can finally distinguish most points, as shown in the following screenshot:

An improved chart using a logarithmic scale for the GDP per capita. ...