Style neue Daten UC 1

[AlexErb]

Ich habe die neuen jährlichen Veränderungen für 2020-2021 gerechnet und aufbereitet. Du findest sie auf dem SwitchDrive, @hkfrei, unter UC1 > NDVI_Diff_2021_2020, wie immer 3 Dateien (jeweils ein .tif für WCS und WMS, und ein .shp). Kannst du sie aufschalten?

Jetzt besteht noch die Frage der Farbgebung. Wir hatten ja ursprünglich mal überlegt, das aktuelle Jahr immer in rot zu halten. Ich denke aber, dass sich die User auch ein wenig an die Farben gewöhnen, und dass es eher Verwirrung stiftet, wenn wir das jedes Jahr ändern. Was meint ihr, @christianrosset und @Hannes-Ole ? Und was wäre ansonsten eine gute neue Farbskala für 2020/2021?

[christianrosset]

Hallo zusammen,

Ich finde es immer etwas kompliziert, sich mit den Farben zurecht zu finden, v.a. da sie nicht direkt ersichtlich sind …

@.***

Eine Möglichkeit, wäre eine klare und logische Abstufung zu verwenden, z.B. https://coolors.co/faa613-f7770e-f44708-a10702-550527

@.***

… oder nach RGB vorzugehen: das neuste is Rot, dann Richtung Grün, dann Richtung Blau.

Viele Grüsse und einen schönen Abend,

Christian

Von: AlexErb @.> Gesendet: Montag, 4. Oktober 2021 17:18 An: HAFL-FWI/Digital-Forest-Monitoring @.> Cc: Rosset Christian @.>; Mention @.> Betreff: [HAFL-FWI/Digital-Forest-Monitoring] Style neue Daten UC 1 (#100)

Ich habe die neuen jährlichen Veränderungen für 2020-2021 gerechnet und aufbereitet. Du findest sie auf dem SwitchDrive, @hkfreihttps://github.com/hkfrei, wie immer 3 Dateien (jeweils in .tif für WCS und WMS, und ein .shp). Kannst du sie aufschalten?

Jetzt besteht noch die Frage der Farbgebung. Wir hatten ja ursprünglich mal überlegt, das aktuelle Jahr immer in rot zu halten. Ich denke aber, dass sich die User auch ein wenig an die Farben gewöhnen, und dass es eher Verwirrung stiftet, wenn wir das jedes Jahr ändern. Was meint ihr, @christianrossethttps://github.com/christianrosset und @Hannes-Olehttps://github.com/Hannes-Ole ? Und was wäre ansonsten eine gute neue Farbskala für 2020/2021?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/HAFL-FWI/Digital-Forest-Monitoring/issues/100, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ADDSE5TUHPKGZCFFBNTUVRDUFHAR3ANCNFSM5FJT3MSQ. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[hkfrei]

@AlexErb Ich werde die Daten baldmöglichst aktualisieren. Bezüglich Farben arbeite ich oft mit https://colorbrewer2.org/#type=sequential&scheme=PuBuGn&n=3 Wichtig ist, dass es sequenzielle Farbschemas sind... Aber es wird immer schwieriger je mehr Datensätze wir haben.

[Hannes-Ole]

Ich stimme Christian zu, dass die Farbgebung direkter ersichltich sein könnte, z.B. durch Einfärben der Schrift des Layers oder einer Farbfläche neben der Schrift, die die Grundfarbe des Farbschemas repräsentiert, z.B. so: Dann muss man nicht immer erst auf die layer-info klicken, um die Farbe zuzuordnen. Wenn wir die unten vorgeschlagene zyklische Farbgebung nutzen, können die Grundfarben gespeichert und automatisch den Layern zugeordnet werden (ohne die WMS Legenden abzurufen o.ä. - weiss nicht, wie du das aktuell löst, Hanskaspar).

Was die Farbpalette angeht: Ich hatte vor einiger Zeit schonmal mit einer Abstufung experimentiert (für die Einsatzbeispiele), damals mit Gelb - Orange - Rot - Rosa. Die Farben müssen sehr klar unterscheidbar sein, damit ihre "shades" (Intensität-/Helligkeits-Abstufungen) nicht verwechselbar sind (e.g. intensives Orange = schwaches Rot). Unterschiedliche Rot-Töne o.ä. kommen deshalb eher nicht in Frage. Ich habe hier mal eine Rainbow-Palette zusammengestellt und bin auf 7 klar unterscheidbare Farben gekommen: https://coolors.co/eb3333-f3942c-f8e025-80c757-46d8d5-4545d9-a444d6

Dies wären die Grundtöne, aus denen wir shades generieren können: Auf coolors.co können die shades mit dem kleinen "shades" Icon eingeblendet werden (beim hovern über die jeweilige Farbe) und die Hexcodes abgelesen. Die Basis-Intensität habe ich auf eine Stufe "normalisiert", da könnten wir je nach Bedarf auch allgemein dunkler oder heller werden.

So hätten wir 7 Grundtöne, die kontinuierlich "logisch" (=Regenbogen) verbunden sind, klar unterscheidbar und sich zyklisch wiederholen lassen (Farbe 2016 = 2023). Egal mit welcher Farbe/Jahr die Darstellung beginnt, sie kann in beide Richtungen fortgesetzt werden (hier beispielhaft verschoben):

Damit hätten wir eine Lösung "für die Ewigkeit". Das nicht mehr als 7 Layer eindeutig unterschieden werden können, sehe ich nicht als Problem, auch in 3 Jahren nicht: Die Darstellung so vieler Layer wäre sehr wahrscheinlich sowieso unübersichtlich und die Schattierungen würden sich ab irgendeinem Punkt farblich überschneiden. Durch die ungerade Anzahl (7) kann man "Jahrzehnte" immernoch gut vergleichbar darstellen (2020, 2030, 2040, ... hätten unterschiedliche Farben. Fünferschritte 2020, 2025, 2030, ... auch). Wenn man ausgerechnet 2016 und 2023 vergleichen möchte, könnten wir neben dem Transparenz-Slider vielleicht noch einen "Sättigung"-Slider anbieten, mit dem man einen beliebigen Layer in eine Grauskala konvertieren kann (?). Ist das so einfach umsetzbar wie die Transparenz (@hkfrei) (also client-side) oder viel aufwändiger, weil das WMS neu gerechnet werden müsste?

[hkfrei]

@Hannes-Ole Es geht leider nicht clientseitig. Aber man kann dem WMS Request einen Parameter "style" mitgeben. Wenn man auf dem Server einen grayscale Style hat, kann man diesen so zuweisen und die Daten werden entsprechend grayscale geliefert. Dies könnte man z.B. über einen Button implementieren -> bei Klick wird auf grayscale umgeschaltet. Was ich generell für alle Styles haben sollte, sind die einzelnen Farbwerte die verwendet werden. Bei mir sieht das in der Layekonfig. i.e. so aus:

               <sld:ColorMapEntry quantity="-10000" color="#7f0000" label="-1"/>
              <sld:ColorMapEntry quantity="-4000" color="#b30000" label="-0.4"/>
              <sld:ColorMapEntry quantity="-3000" color="#d7301f" label="-0.3"/>
              <sld:ColorMapEntry quantity="-2500" color="#ef6548" label="-0.25"/>
              <sld:ColorMapEntry quantity="-2000" color="#fc8d59" label="-0.2"/>
              <sld:ColorMapEntry quantity="-1500" color="#fdbb84" label="-0.15"/>
              <sld:ColorMapEntry quantity="-1000" color="#fdd49e" label="-0.1" opacity="0.498039"/>
            </sld:ColorMap>```

[hkfrei]

Die UC1 Daten von 2021 sind hochgeladen und im Viewer integriert. Als Farbe habe ich vorerst 7 Werte aus dem orangen Schema von @Hannes-Ole genommen. Falls ich die Farben der anderen Jahre auch noch gemäss dem Schema von @Hannes-Ole anpassen soll, lasst es mich wissen. Falls ihr mir die konkreten HEX Werte der Farben liefern könnt umso besser.

[AlexErb]

Also ich wäre dafür, die Farben der anderen Jahre auch anzupassen - aber habe in dem Projekt ja eigentlich nichts mehr zu entscheiden ;-) Auch finde ich den Vorschlag von @Hannes-Ole wirklich sehr gut, eine Farbfläche neben die Schrift im Auswahlmenü zu setzen (s.u.), damit man direkt einen besseren Überblick hat...

[Hannes-Ole]

Ja, ich würde auch die alten Farben aktualisieren. Die neue Farbe beisst sich ein bisschen mit dem alten Farbschema finde ich. Ich werde dir zeitnah die neuen Farbcodes zukommen lassen. Die Farblegende im Auswahlmenü mache ich hiermit "offiziell" als Feature-Request. Das kannst du gegenüber der Blickwinkel-Orientierung priorisieren. Finde ich wichtiger, v.a. wenn wir nun Farben ändern (vielleicht gibt es ja tatsächlich Leute, die sich schon an die Farben "gewöhnt" haben).

Am Rande zum Thema: Oben hast du den style-Parameter erwähnt, der ja aber erfordert, dass du Serverseitig entsprechende XML-SLD styles anlegst. Im Rahmen einer anderen Recherche bin ich darauf gestossen, dass man WMS-Requests wohl auch mit einem externen (public) XML-Style-File versehen kann (SLD=<sld_xml_url>) oder sogar in den Request selbst mit SLD_BODY integrieren kann (z.B. SLD_BODY=SLD_BODY=%3Csld%3AStyledLayerDescriptor%20xmlns%3Asld%3...). So kann man WMS-Layer selbst stylen (wenn man die unterliegende Struktur des Layers ausreichend kennt, um ein SLD zu formulieren). Das war neu für mich und ich habe es auch noch nicht ausprobiert, aber das müsste ja ein komplett flexibles "clientseitiges" Stylen (per Server-Request) von WMS Layern ermöglichen? Dies hier fand ich eine gute Zusammenfassung des Themas. Entsprechend müsste man doch eigentlich so etwas wie ein color switch/grey scale (und alles andere) umsetzen können, indem die entsprechenden WMS requests dynamisch erzeugt werden (mit einem generierten SLD_BODY-part).

[Hannes-Ole]

So, nun habe ich die shades generiert, mit diesem Tool: https://noeldelgado.github.io/shadowlord/#eb3333 Für die sieben Abstufungen (-1 bis -0.1) bleibt bei 12% Tintenreduktion m.E. auch im letzten Schritt noch ausreichend Farbe übrig. Ich würde folgende Verteilung auf die Jahre vorschlagen (so können zumindest 2018 und 2019 ähnliche Farben behalten):

Im folgenden die Farbcodes (wegen Copy&Paste von der Homepage ist immer der hellste Farbton oben (tint72%). base0% ist die Grundfarbe:

/* OVERVIEW RAINBOW 1 - 7 */
--cg-red: #eb3333ff;
--deep-saffron: #f3942cff;
--yellow-pantone: #f8e025ff;
--mantis: #80c757ff;
--medium-turquoise: #46d8d5ff;
--iris: #4545d9ff;
--dark-orchid: #a444d6ff;

/* GRADIENTS RAINBOW 1 - 7 */
/* 1  --cg-red: #eb3333ff; */
tint 72%: #f9c6c6
tint 60%: #f7adad
tint 48%: #f59595
tint 36%: #f27c7c
tint 24%: #f06464
tint 12%: #ed4b4b
base 0%: #eb3333

/* 2  --deep-saffron: #f3942cff; */
tint 72%: #fce1c4
tint 60%: #fad4ab
tint 48%: #f9c791
tint 36%: #f7bb78
tint 24%: #f6ae5f
tint 12%: #f4a145
base 0%: #f3942c

/* 3 --yellow-pantone: #f8e025ff; */ 
tint72%: #fdf6c2
tint60%: #fcf3a8
tint48%: #fbef8e
tint36%: #fbeb73
tint24%: #fae759
tint12%: #f9e43f
base0%: #f8e025

/* 4 --mantis: #80c757ff; */ 
tint72%: #dbefd0
tint60%: #cce9bc
tint48%: #bde2a8
tint36%: #aedb93
tint24%: #9ed47f
tint12%: #8fce6b
base0%: #80c757

/* 5 --medium-turquoise: #46d8d5ff; */
tint72%: #cbf4f3
tint60%: #b5efee
tint48%: #9febe9
tint36%: #89e6e4
tint24%: #72e1df
tint12%: #5cddda
base0%: #46d8d5

/* 6 --iris: #4545d9ff; */
tint72%: #cbcbf4
tint60%: #b5b5f0
tint48%: #9e9eeb
tint36%: #8888e7
tint24%: #7272e2
tint12%: #5b5bde
base0%: #4545d9

/* 7 --dark-orchid: #a444d6ff; */
tint72%: #e6cbf4
tint60%: #dbb4ef
tint48%: #d09eea
tint36%: #c587e5
tint24%: #ba71e0
tint12%: #af5adb
base0%: #a444d6

[hkfrei]

Sehr gut merci! Ich werde diese bis spätestens Freitag implementieren.

Bezüglich SLD: Da habe ich auch wieder etwas gelernt ;-). Theoretisch könnte man so die Farbgebung tatsächlich komplett dem User überlassen. Falls es jedoch "nur" um das Umschalten in Graustufen geht, würde ich die Variante mit dem SLD auf dem Server trotzdem bevorzugen. Dieses muss nur einmal erstellt werden und kann dann beliebigen Layern (vom gleichen Typ) zugewiesen werden. Clientseitig wäre so nur eine kleine Anpassung der URL nötig. Sprich, es wäre die einfachste und schnellste Implementation.

[hkfrei]

Die neuen Farben sind implementiert. Siehe c14ff6ab8d0fd1784afe747b3e9cf1e72373f0f9

[Hannes-Ole]

Tiptop, vielen Dank. Noch etwas gewöhnungsbedürftig, die neuen Farbtöne, aber das wird sich geben. In der alten Version waren Werte 0.1 semi-transparent (<sld:ColorMapEntry quantity="-1000" color="#fdd49e" label="-0.1" opacity="0.498039"/>), das fände ich gut, wenn das wieder der Fall ist. Kannst du testweise mal 0.2 auf 25% Transparenz setzen (so dass sich die Transparenz graduell aufbaut)?

[hkfrei]

@Hannes-Ole Ich habe die Transparenzen jetzt konfiguriert. Werte: -0.1 -> 0.5 Transparenz -0.15 -> 0.75 Transparenz Wobei: 0=Volle Transparenz 1=keine Transparenz

Beispiel:

<sld:ColorMap type="intervals">
               <sld:ColorMapEntry quantity="-10000" color="#4545d9" label="-1"/>
              <sld:ColorMapEntry quantity="-4000" color="#5b5bde" label="-0.4"/>
              <sld:ColorMapEntry quantity="-3000" color="#7272e2" label="-0.3"/>
              <sld:ColorMapEntry quantity="-2500" color="#8888e7" label="-0.25"/>
              <sld:ColorMapEntry quantity="-2000" color="#9e9eeb" label="-0.2"/>
              <sld:ColorMapEntry quantity="-1500" color="#b5b5f0" label="-0.15" opacity="0.75"/>
              <sld:ColorMapEntry quantity="-1000" color="#cbcbf4" label="-0.1" opacity="0.5"/>
            </sld:ColorMap>

[Hannes-Ole]

Ah, stimmt, in "opacity" (Deckkraft) muss man es umgekehrt zur Transparenz definieren (1 - Transparenz). Mir gefällt es viel besser so. Mir ist noch aufgefallen, dass die Farb- bzw. Schattierungsunterschiede in der Legende fast nicht erkennbar sind (zumindest auf meinem Display), insbesondere der Unterschied zwischen -1 und -0.4 zeigen. Ich würde sagen, wir lassen es erstmal so, aber ich werde dazu mal noch das ein oder andere Feedback einholen. Der recht grosse Sprung zwischen -0.4 und -1 sollte ja eigentlich auch gut erkennbar sein.

[hkfrei]

/* 3 --yellow-pantone: #f8e025ff; */ 
tint72%: #fdf6c2
tint60%: #fcf3a8
tint48%: #fbef8e
tint36%: #fbeb73
tint24%: #fae759
tint12%: #f9e43f
base0%: #f8e025

Die Abstufung (tint) entspricht nicht unserer Farbabstufung auf dem Server. Das hat ziemlich sicher eine Auswirkung...

tint 12% würde in den Daten einem Wert von -0.88 anstatt -0.4 entsprechen. Oder sehe ich das falsch? ;-)

Eine Lösung wäre, die tint Werte den Abstufungen im SLD anzugleichen. Hier das SLD für yellow-pantone als Beispiel:

<sld:ColorMap type="intervals">
               <sld:ColorMapEntry quantity="-10000" color="#f8e025" label="-1"/>
              <sld:ColorMapEntry quantity="-4000" color="#f9e43f" label="-0.4"/>
              <sld:ColorMapEntry quantity="-3000" color="#fae759" label="-0.3"/>
              <sld:ColorMapEntry quantity="-2500" color="#fbeb73" label="-0.25"/>
              <sld:ColorMapEntry quantity="-2000" color="#fbef8e" label="-0.2"/>
              <sld:ColorMapEntry quantity="-1500" color="#fcf3a8" label="-0.15" opacity="0.75"/>
              <sld:ColorMapEntry quantity="-1000" color="#fdf6c2" label="-0.1" opacity="0.5"/>
            </sld:ColorMap>

[Hannes-Ole]

Added a styling guide and current SLD styles here. Also see this issue for an update on SLD styles. Soon the new styles will be applied to all layers (including the old ones).