Creating an Anomaly Heatmap

On the right, the averaged global temperature per month, calculated from Jan 1951 to Dec 1980, is displayed. You can navigate to the next step by using arrow keys or the displayed buttons. To facilitate perceiving differences, the y-axis does not start at zero. Next, we take a closer look at the temperatures during the year 1887 - a year with a globally extremley high anomaly in January. This winter is also known as the "Big Die Up", as it especially affected the cattle industry in continental North America and led to major losses of cattle that died as a result of the extreme weather conditions. The anomalies of each month are highlighted in red - The anomaly is the difference between the actual temperature and the average temperature. If we smooth the averaged temperature curve down to a straight line, the differences and absolute values of the anomalies become clearer. Next, we color code the anomaly values relative to the lowest and highest anomaly that ever appeared between 1850 and 2022. As the anomaly value is now coded in color, we remove the y-axis and create rectangles of equal height. In order to compare different years to one another or to discover trends, the year 1887 is put in the context of the period from 1850 to 2020. Finally, we repeat steps 0 to 5 for every year and display them all at once in a heatmap to be able to identify trends or outliers. If you hover over a rectangle, the corresponding year will be shown. When clicking, you zoom into the selected year to have a more detailed looked at the values. (Note that this occludes other parts of the heatmap.)
This website showcases an animated sequence that was created with the help of the library GSAP-ASEQ. GSAP-ASEQ was developed in context of a bachelor thesis at the Institute of Simulation and Graphics at the Otto-von-Guericke University Magdeburg. The used data was extracted from Berkely Earth. The source code is publicly available on GitHub.
Imprint: Vincent Göring | Schweriner Str. 5 | 39104 Magdeburg | vincent.goering@ovgu.de. FavIcon: icons8.com