nebellicht
Goto Top

Klimastreifen (farbcodes)

Hallo,
ich suche ein kl. Javascriptprogramm, welches mir Farb-bar-codes anhand der Jahreszahl entsprechende Temperatur oder vllt. aus einer db (Land, Bundesland, Stadt) erstellt.

Also ähnlich wie es diese Seite Klimawandel-Barcodes für alle 16 Bundesländer darstellt.


strich-jahr-klimastreifen


Hintergund: Ich würde gerne einen Text nach den Stripes einfärben.

(Hierzu würde dann in einer db (oder Array) nachgeschaut und anhand der Temperatur (Oder Ort nacheinander) die Jahres-Farb-Codes zurückgegeben um die einzelnen Buchstaben vom Satz/Text einzufärben. Wäre auch eine schöne Programmieraufgabe für eine AG oder Schulklasse oder HiWi oder Auszubildenden.)

(bytheway not OT und zum Thema passend. Heute erschien: BuchTipp)

viele Grüße
Nebellicht

#Klima
#climatestripes

Content-ID: 4419417481

Url: https://administrator.de/contentid/4419417481

Printed on: October 5, 2024 at 08:10 o'clock

Lochkartenstanzer
Lochkartenstanzer Oct 27, 2022 at 11:15:37 (UTC)
Goto Top
4400667902
4400667902 Oct 27, 2022 updated at 14:08:36 (UTC)
Goto Top
Wäre auch eine schöne Programmieraufgabe für eine AG oder Schulklasse oder HiWi oder Auszubildenden.
Oder dich 😂
https://jsfiddle.net/hv0Lydjo/
rubberman
Solution rubberman Oct 27, 2022 at 20:33:44 (UTC)
Goto Top
Sieht für mich eher nach HSL Color aus.
Quick 'n' dirty fürs JSFiddle:
// percentage -100..100 where 0 represents the mean value
for (var i = -100; i <= 100; ++i) {
  if (i < 0) {
    // hue: blue
    var h = 240;
    // lightness: 25..100 %
    var l = 100 + Math.round(0.75 * i);
  } else {
    // hue: red
    var h = 0;
    // lightness: 100..25 %
    var l = 100 - Math.round(0.75 * i);
  }
  // saturation: always 100 %
  var color = "hsl(" + h + ", 100%," + l + "%)";  

  var el = document.createElement("div");  
  el.style.backgroundColor = color;
  el.innerText = i + "%";  
  el.style.float = "left";  
  el.style.minWidth = "50px";  
  el.clientHeight = "10px";  
  el.style.margin = "2px";  
  el.style.padding = "2px";  
  el.style.textAlign = "center";  
  document.body.appendChild(el);
}

Steffen
Nebellicht
Nebellicht Oct 28, 2022 updated at 08:57:26 (UTC)
Goto Top
Essen-Bredeney Jahresmittel der Lufttemperatur
vom https://www.dwd.de


<script type="text/javascript">  
<!--

var x = new Array(125);
for (var i = 0; i < x.length; i++) { x[i] = new Array(1);}

// Jahr und Temperatur.

// Essen-Bredeney // Jahresmittel der Lufttemperatur

x=[1888, 8.38];
x[1]=[1889, 9.17];
x[2]=[1890, 8.58];
x[3]=[1891, 9.02];
x[4]=[1892, 9.17];
x[5]=[1893, 9.99];
x[6]=[1894, 10.22];
x[7]=[1895, 9.54];
x[8]=[1896, 9.67];
x[9]=[1901, 9.12];
x[10]=[1902, 8.38];
x[11]=[1903, 9.61];
x[12]=[1904, 9.42];
x[13]=[1905, 9.14];
x[14]=[1906, 9.52];
x[15]=[1907, 9.19];
x[16]=[1908, 9.03];
x[17]=[1909, 8.87];
x[18]=[1910, 9.98];
x[19]=[1911, 10.64];
x[20]=[1912, 9.72];
x[21]=[1913, 10.14];
x[22]=[1914, 9.73];
x[23]=[1915, 9.09];
x[24]=[1916, 9.52];
x[25]=[1917, 8.49];
x[26]=[1918, 9.77];
x[27]=[1919, 8.46];
x[28]=[1920, 9.85];
x[29]=[1921, 10.27];
x[30]=[1922, 8.57];
x[31]=[1923, 9.26];
x[32]=[1924, 9.02];
x[33]=[1925, 9.20];
x[34]=[1926, 10.02];
x[35]=[1927, 9.22];
x[36]=[1928, 9.36];
x[37]=[1929, 8.78];
x[38]=[1930, 9.86];
x[39]=[1931, 8.63];
x[40]=[1932, 9.44];
x[41]=[1933, 8.84];
x[42]=[1934, 10.38];
x[43]=[1935, 9.64];
x[44]=[1936, 9.47];
x[45]=[1938, 9.84];
x[46]=[1939, 9.77];
x[47]=[1940, 8.24];
x[48]=[1941, 8.78];
x[49]=[1942, 8.60];
x[50]=[1943, 10.05];
x[51]=[1944, 9.35];
x[52]=[1948, 10.48];
x[53]=[1949, 10.49];
x[54]=[1950, 9.77];
x[55]=[1951, 9.98];
x[56]=[1953, 10.13];
x[57]=[1954, 9.13];
x[58]=[1955, 8.96];
x[59]=[1956, 8.15];
x[60]=[1957, 9.98];
x[61]=[1958, 9.45];
x[62]=[1959, 10.77];
x[63]=[1960, 9.81];
x[64]=[1961, 10.25];
x[65]=[1962, 8.20];
x[66]=[1963, 8.27];
x[67]=[1964, 9.58];
x[68]=[1965, 8.82];
x[69]=[1966, 9.79];
x[70]=[1967, 10.06];
x[71]=[1968, 9.40];
x[72]=[1969, 9.41];
x[73]=[1970, 9.28];
x[74]=[1971, 9.91];
x[75]=[1972, 9.23];
x[76]=[1973, 9.64];
x[77]=[1974, 9.95];
x[78]=[1975, 10.14];
x[79]=[1976, 10.16];
x[80]=[1977, 9.86];
x[81]=[1978, 9.04];
x[82]=[1979, 8.77];
x[83]=[1980, 9.18];
x[84]=[1981, 9.33];
x[85]=[1982, 10.44];
x[86]=[1983, 10.33];
x[87]=[1984, 9.49];
x[88]=[1985, 8.52];
x[89]=[1986, 9.09];
x[90]=[1987, 8.76];
x[91]=[1988, 10.20];
x[92]=[1989, 10.97];
x[93]=[1990, 10.75];
x[94]=[1991, 9.72];
x[95]=[1992, 10.53];
x[96]=[1993, 9.78];
x[97]=[1994, 10.89];
x[98]=[1995, 10.48];
x[99]=[1996, 8.54];
x[100]=[1997, 10.30];
x[101]=[1998, 10.13];
x[102]=[1999, 10.91];
x[103]=[2000, 10.96];
x[104]=[2001, 10.19];
x[105]=[2002, 10.69];
x[106]=[2003, 10.68];
x[107]=[2004, 9.89];
x[108]=[2005, 10.33];
x[109]=[2006, 10.77];
x[110]=[2007, 10.98];
x[111]=[2008, 10.42];
x[112]=[2009, 10.51];
x[113]=[2010, 9.09];
x[114]=[2011, 11.12];
x[115]=[2012, 10.27];
x[116]=[2013, 9.72];
x[117]=[2014, 11.65];
x[118]=[2015, 10.92];
x[119]=[2016, 10.77];
x[120]=[2017, 10.92];
x[121]=[2018, 11.79];
x[122]=[2019, 11.44];
x[123]=[2020, 11.84];
x[124]=[2021, 10.42];


console.log(x);
-->
</script>
rubberman
rubberman Oct 28, 2022 at 08:26:49 (UTC)
Goto Top
Na ist doch super. Mittelwert feststellen, Min/Max feststellen. Range festlegen was deine 100% nach oben und unten sind und Werte in % umrechnen. Easy.

Viel Spaß,
Steffen
Nebellicht
Nebellicht Oct 28, 2022 at 09:08:14 (UTC)
Goto Top
Hi Steffen, den code kann ich nicht lesen od. anpassen. Da steckt komprimiertes Wissen drin face-smile
Textzug wäre "Hallo Welt! In climate stripes"

Gruß Nebellicht.
Lochkartenstanzer
Lochkartenstanzer Oct 28, 2022 at 09:17:13 (UTC)
Goto Top
Zitat von @Nebellicht:

Hi Steffen, den code kann ich nicht lesen od. anpassen. Da steckt komprimiertes Wissen drin face-smile
Textzug wäre "Hallo Welt! In climate stripes"

Wie wäre es, wen du mal ein wenig selbst Hirnschmalz da reinsteckst. face-smile

lks
Nebellicht
Nebellicht Oct 28, 2022 updated at 09:48:20 (UTC)
Goto Top
Zitat von @Lochkartenstanzer:

Zitat von @Nebellicht:

Hi Steffen, den code kann ich nicht lesen od. anpassen. Da steckt komprimiertes Wissen drin face-smile
Textzug wäre "Hallo Welt! In climate stripes"

Wie wäre es, wen du mal ein wenig selbst Hirnschmalz da reinsteckst. face-smile

lks

Von Dir kommt auch nix Neues. (Lochkarten... Luftlöcher... heiße Luft durch nix. face-smile
4400667902
4400667902 Oct 28, 2022 updated at 11:01:42 (UTC)
Goto Top
Tja manch einer schwafelt viel von Klima hat aber selbst bei der Prozentrechnung in der Schule gefehlt ... vermutlich auf irgendeiner Demo abgehangen, ist ja auch nicht so anstrengend, nä, immer dat selbe ... Da liefert man schon Steilvorlagen und es reicht immer noch nicht ...🤮 Herr lass Hirn regnen.
Tu was für's Klima, meld dich ab, und schalte den Rechner aus.
Nebellicht
Nebellicht Oct 28, 2022 at 12:40:43 (UTC)
Goto Top
das ist Mobbing! @4400667902 (=misstöne)
Lochkartenstanzer
Lochkartenstanzer Oct 28, 2022 updated at 12:55:53 (UTC)
Goto Top
Zitat von @Nebellicht:

das ist Mobbing! @4400667902 (=misstöne)

Das ist nur dünne Haut und Faulheit
Nebellicht
Nebellicht Oct 28, 2022 updated at 13:05:39 (UTC)
Goto Top
falsch! @lochie Hier ist er auch am Verfolgen.
Tags für die grüne IT gewünscht
rubberman
Solution rubberman Oct 28, 2022 at 13:07:58 (UTC)
Goto Top
Textzug wäre "Hallo Welt! In climate stripes"
Ja nee, is klar. Und ich verteile nun 125 Farbwerte auf ein paar Buchstaben? Und schreib dir noch den Quelltext für deine Webseite? Nee! Ich bin da ziemlich nah bei meinen Vorrednern. Das bisschen Mathe liefere ich dir noch, dann ist aber auch mal gut.

Steffen

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 = 100 - Math.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 = "50px";  
  el.clientHeight = "10px";  
  el.style.margin = "2px";  
  el.style.padding = "2px";  
  el.style.textAlign = "center";  
  document.body.appendChild(el);
}

var min = x[1];
var max = x[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(max - avg, avg - min);

for (var i = 0; i < x.length; ++i) {
  print_climatecolors(100 * (x[i][1] - avg) / range, x[i]);
}
Nebellicht
Nebellicht Oct 28, 2022 updated at 13:40:56 (UTC)
Goto Top
Vielen Dank. @steffen

so siehts für Essen-Bredeney (Beispielsweise für NRW) aus:
climate-stripes-essen-bredeney
1888 - 2021
Anmerkung: Ich hatte so Probleme mit dem HSL Farbcode (Farbton, Sättigung und Helligkeit) aber das nur am Rande.

Schönes Wochenende! Gruß Nebellicht.
Lochkartenstanzer
Lochkartenstanzer Oct 28, 2022 at 13:42:47 (UTC)
Goto Top
Das löst aber nicht das Problem, daß manche den Unterschied zwischen Korrelation und Kausalität nicht kennen. Und vor allem, daß sich Klimaänderingen Jahrhunderten und nicht einzelnen Jahren abspielen.

lks
4400667902
4400667902 Oct 28, 2022 updated at 13:53:46 (UTC)
Goto Top
Bevor uns die Wärme brutzelt haben wir uns mit unseren eigenen Waffen atomisiert ... Die Frage ist nicht ob sondern wann, und dann hat sich das mit dem Klima von selbst erledigt.
Nebellicht
Nebellicht Oct 30, 2022 updated at 11:07:41 (UTC)
Goto Top
Korrelation
BILDUNGSSPRACHLICH•FACHSPRACHE

wechselseitige Beziehung "die Korrelation zwischen Angebot und Nachfrage"

MATHEMATIK

nur statistisch, mithilfe der Wahrscheinlichkeitsrechnung zu erfassender [loser, zufälliger] Zusammenhang zwischen bestimmten Erscheinungen

Kausalität
kausaler Zusammenhang; Ursächlichkeit

Jahrhunderte
(2021-1880)/100)= 1,33
Lochkartenstanzer
Lochkartenstanzer Oct 30, 2022 at 11:36:58 (UTC)
Goto Top
Zeigt, daß Du meine Aussage nicht verstanden hast.

lks
Nebellicht
Nebellicht Oct 30, 2022 updated at 20:50:43 (UTC)
Goto Top
ac220923_104

"Ganz dünnes Eis" (globale FFF Demo 2022 in Aachen)
4400667902
4400667902 Oct 31, 2022 updated at 07:14:51 (UTC)
Goto Top
Zitat von @Nebellicht:
"Ganz dünnes Eis" (globale FFF Demo 2022 in Aachen)
Och je is des aber schee, die geimpften FFFler💉sammeln Kohle für ein Leben nach der Hauptschule, an die Straße gewôhnen sie sich ja schon 😂.
Lochkartenstanzer
Lochkartenstanzer Oct 31, 2022 at 07:22:17 (UTC)
Goto Top
Zitat von @4400667902:

Zitat von @Nebellicht:
"Ganz dünnes Eis" (globale FFF Demo 2022 in Aachen)
Och je is des aber schee, die geimpften FFFler💉sammeln Kohle für ein Leben nach der Hauptschule, an die Straße gewôhnen sie sich ja schon 😂.

Naja, es ist nicht ganz klar, wer die ganze Kohle einsackt die da kassiert wird. Denn es ist ist nicht herauszufinden, wer hinter den Bankkonten steckt. Siehe z.B. https://www.danisch.de/blog/2021/03/29/datenschutz-das-betrugssystem-fri ... und den darin verlinkten Artikeln.

FFF ist ist ein Veranstaltung, die naive Jugendliche ausnutzt!

lks
Nebellicht
Nebellicht Oct 31, 2022 at 07:38:31 (UTC)
Goto Top
puuuh ! beachtet doch bitte O.T.
Lochkartenstanzer
Lochkartenstanzer Oct 31, 2022 updated at 07:51:23 (UTC)
Goto Top
Du hast damit angefangen. İch wüßte nicht, wer sonst hier dauernd Werbung für die Schulschwänzer macht.

lks
4400667902
4400667902 Oct 31, 2022 updated at 08:17:00 (UTC)
Goto Top
Eben, das hat ihn einem IT spezialisiertem Forum ehrlich gesagt nichts zu suchen.
Tob dich doch hier aus wenn du das Bedürfnis hast.