Flipping the Y-axis
Understand how to correct Y-axis orientation when drawing scatter plots in D3.js. This lesson helps you map data values properly, ensuring temperatures are visualized from low at the bottom to high at the top, and positions circles accurately on the chart.
We'll cover the following...
Looking closely, we can see that the axis is going in the wrong direction. The temperature can be read from coldest to warmest. Usually, the y-axis for a scatter plot should be read from top to bottom. The lower a circle is positioned, the colder the temperature. The higher a circle is positioned, the warmer the temperature. We have the exact opposite.
It is not just the axis that is incorrect. The circles are also positioned incorrectly.
Understanding the problem
To better understand, let’s add an attribute to the <circle> elements. We are going to add an attribute to help us debug our problem.
We are ...