Maik Schulte
Homepage

// climate stripes
// thx to Steffen (November 2022)
// Daten vom DWD
// Hier die Jahresmittel der Lufttemperatur (1888-2021) für NRW am Beispiel von der Wetterstation Essen-Bredeney.
//
var x = new Array(125);
for (var i = 0; i < x.length; i++) { x[i] = new Array(1);}
var x = [[1888,8.38],[1889,9.17],[1890,8.58],[1891,9.02],[1892,9.17],[1893,9.99],[1894,10.22],[1895,9.54],[1896,9.67],[1901,9.12],[1902,8.38],[1903,9.61],[1904,9.42],[1905,9.14],[1906,9.52],[1907,9.19],[1908,9.03],[1909,8.87],[1910,9.98],[1911,10.64],[1912,9.72],[1913,10.14],[1914,9.73],[1915,9.09],[1916,9.52],[1917,8.49],[1918,9.77],[1919,8.46],[1920,9.85],[1921,10.27],[1922,8.57],[1923,9.26],[1924,9.02],[1925,9.20],[1926,10.02],[1927,9.22],[1928,9.36],[1929,8.78],[1930,9.86],[1931,8.63],[1932,9.44],[1933,8.84],[1934,10.38],[1935,9.64],[1936,9.47],[1938,9.84],[1939,9.77],[1940,8.24],[1941,8.78],[1942,8.60],[1943,10.05],[1944,9.35],[1948,10.48],[1949,10.49],[1950,9.77],[1951,9.98],[1953,10.13],[1954,9.13],[1955,8.96],[1956,8.15],[1957,9.98],[1958,9.45],[1959,10.77],[1960,9.81],[1961,10.25],[1962,8.20],[1963,8.27],[1964,9.58],[1965,8.82],[1966,9.79],[1967,10.06],[1968,9.40],[1969,9.41],[1970,9.28],[1971,9.91],[1972,9.23],[1973,9.64],[1974,9.95],[1975,10.14],[1976,10.16],[1977,9.86],[1978,9.04],[1979,8.77],[1980,9.18],[1981,9.33],[1982,10.44],[1983,10.33],[1984,9.49],[1985,8.52],[1986,9.09],[1987,8.76],[1988,10.20],[1989,10.97],[1990,10.75],[1991,9.72],[1992,10.53],[1993,9.78],[1994,10.89],[1995,10.48],[1996,8.54], [1997,10.30],[1998,10.13],[1999,10.91],[2000,10.96],[2001,10.19],[2002,10.69],[2003,10.68],[2004,9.89],[2005,10.33],[2006,10.77],[2007,10.98],[2008,10.42],[2009,10.51],[2010,9.09],[2011,11.12],[2012,10.27], [2013,9.72],[2014,11.65],[2015,10.92],[2016,10.77],[2017,10.92],[2018,11.79],[2019,11.44],[2020,11.84],[2021,10.42]];

function print_climatecolors(percent, txt) {
 if (percent < 0) {
 // hue: blue
 var h = 240;
 // lightness: 25..100 %
 var l = 100 + Math.round(0.75 * percent);
 } else {
 // hue: red
 var h = 0;
 // lightness: 100..25 %
 var l = 100Math.round(0.75 * percent);
 }
 // saturation: always 100 %
 var color = "hsl(" + h + ", 100%, " + l + "%)";

 var el = document.createElement("div");
 el.style.backgroundColor = color;
 //el.innerText = txt;
 el.style.float = "left";
 el.style.minWidth = "2px";
 el.style.minHeight = "50px";
 el.style.margin = "0px";
 el.style.padding = "0px";
 el.style.textAlign = "center";
 document.body.appendChild(el);
}

var min = x[0][1];
var max = x[0][1];
var sum = 0;
for (var i = 0; i < x.length; ++i) {
 var cur = x[i][1];
 if (cur < min) { min=cur; }
 if (cur > max) { max=cur; }
 sum+=cur;
}

var avg = sum / x.length;
var range = Math.max(maxavg, avgmin);

for (var i = 0; i < x.length; ++i) {
 print_climatecolors(100 * (x[i][1]avg) / range, x[i][0]);
}