Cowboy: Die Seite wurde neu angelegt: „{{LuaModuleDoc}} {{#if:{{{1|}}}||Modul mit Hilfsfunktionen für die Graph-Erweiterung. == Funktionen für Vorlagen == === map === Erstellt ein JSON-Objekt für zur Darstellung einer politischen Karte mit farbigen Markierungen. Im Artikelnamensraum sollte die Vorlage {{Vorlage|Graph:Map}} genutzt werden. Siehe dort auch für An…“

2025-03-09T00:04:43Z

Die Seite wurde neu angelegt: „{{LuaModuleDoc}} <onlyinclude> {{#if:{{{1|}}}||Modul mit Hilfsfunktionen für die Graph-Erweiterung. == Funktionen für Vorlagen == === map === Erstellt ein JSON-Objekt für <code><nowiki><graph></nowiki></code> zur Darstellung einer politischen Karte mit farbigen Markierungen. Im Artikelnamensraum sollte die Vorlage {{Vorlage|Graph:Map}} genutzt werden. Siehe dort auch für An…“

Neue Seite

{{LuaModuleDoc}}

<onlyinclude>
{{#if:{{{1|}}}||Modul mit Hilfsfunktionen für die [[Hilfe:Graph|Graph]]-Erweiterung.

== Funktionen für Vorlagen ==
=== map ===
Erstellt ein JSON-Objekt für <code><nowiki><graph></nowiki></code> zur Darstellung einer politischen Karte mit farbigen Markierungen. Im Artikelnamensraum sollte die Vorlage {{Vorlage|Graph:Map}} genutzt werden. Siehe dort auch für Anwendungsbeispiele.

Karten finden sich unter [[Spezial:Präfixindex/Modul:Graph/]] (beispielsweise [[Modul:Graph/WorldMap-iso2.json|WorldMap-iso2.json]] mit allen Staatsgrenzen) und weitere sollten daher ebenfalls unter Modul:Graph/ angelegt werden.

'''Parameter:'''
}}{{#ifeq:{{{1|map}}}|map|
* '''basemap:''' gibt an, welche Basiskarte verwendet werden soll. Die Kartendefinition muss im [https://github.com/mbostock/topojson/wiki TopoJSON]-Format erfolgen, dann auf Wikipedia abgelegt werden, wo sie fortan zur Verfügung für dieses Modul steht. Karten im Standardverzeichnis [[Spezial:Präfixindex/Modul:Graph/]] wie [[Modul:Graph/WorldMap-iso2.json|WorldMap-iso2.json]] sollten nur mit ihrem Namen referenziert und der Präfix „Modul:Graph/“ der Portierbarkeit wegen weggelassen werden. Daneben werden auch URLs akzeptiert, z. B. wenn Karten von anderen Wikipedia-Sprachversionen genutzt werden sollen (die Angabe sollte hierbei als <code>//en.wikipedia.org/w/index.php?title=''Mapname''&action=raw</code> erfolgen, d. h. protokollrelativ ohne http/s am Anfang und mit action=raw, um ausschließlich den Seiteninhalt zurückzugeben). URLs auf Karten von externen Websites sollten aus Gründen der Stabilität, Performanz und Sicherheit nicht genutzt werden bzw. würden von der Software oder dem Browser vermutlich geblockt werden.
* '''scale:''' Skalierungsfaktor der Karte (Standard: 100)
* '''projection:''' Methode der [[Kartenprojektion]]. Mögliche Werte dafür siehe unter https://github.com/mbostock/d3/wiki/Geo-Projections. Der Standardwert ist <code>equirectangular</code> für eine [[Rektangularprojektion]] (Plattkarte).
* '''center:''' Kartenmitte (in den Kartendaten die beide kommagetrennten Werte im <code>scale</code>-Feld)
* '''feature:''' welche geographischen Objekte sollen angezeigt werden (in den Kartendaten der Name des Feldes unter dem <code>objects</code>-Feld). Der Standardwert ist <code>countries</code>.
* '''IDs der geografischen Objekte:''' Diese Parameter hängen von der genutzten Basiskarte und dem ausgewählten ''feature'' ab. In der vorher genannten Beispielkarte sind dies zweistellige [[ISO-Ländercode]]s (bei dieser ist jedoch zu beachten, dass für Gebiete, die nicht von der ISO-3166-1 abgedeckt sind, folgende IDs zu verwenden sind: "KOSOVO", "NORTHERN_CYPRUS", "SOMALILAND"). Der Wert kann entweder eine Farbangabe sein oder eine Zahl, falls den einzelnen geografischen Objekten Daten zugeordnet werden sollen: <code>DE=lightblue</code> würde auf der Karte Deutschland hellblau färben, <code>DE=80.6</code> würde Deutschland den Wert 80.6 (hier die Bevölkerungszahl in Millionen) zuordnen. Die konkrete Färbung ergibt sich dann aus den folgenden Parametern.
* '''colorScale:''' zu verwendende Farbpalette. Das Format ist eine kommagetrennte Liste von Farbwerten. Die Farbwerte müssen entweder im Format <code>#rgb</code>/<code>#rrggbb</code> oder mit einem [[Webfarbe#Benannte Farben|CSS-Farbnamen]] erfolgen. Statt einer Liste können auch die eingebauten Farbpaletten [https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeCategory10 category10 und category20] genutzt werden.
* '''scaleType:''' mögliche Werte <code>linear</code> für eine lineare Abbildung zwischen den Datenwerten und der Farbskala, <code>log</code> für eine logarithmische, <code>pow</code> für eine exponentielle (der Exponent kann dahintergesetzt werden, z. B. <code>pow 0.5</code>), <code>sqrt</code> und <code>quantize</code> für eine quantisierte Skala, d. h. die Werte werden in so viele Klassen eingeteilt, wie die Palette Farben hat, und diese dann genutzt.
* '''domainMin:''' Skalenminimum, d. h. Datenwerte unter dem Minimum werden diesem zugeordnet
* '''domainMax:''' Skalenmaximum, d. h. Datenwerte über dem Maximum werden diesem zugeordnet
* '''legend:''' Farblegende anzeigen (funktioniert nicht bei <code>quantize</code>)
* '''defaultValue:''' Standardwert für unmarkierte geografische Objekte. Wenn die Datenwerte Farben sind, ist der Standandwert <code>silver</code>, bei Zahlen 0.
}}{{#if:{{{1|}}}||
* '''formatjson:''' JSON-Objekt für bessere Lesbarkeit formatieren

=== chart ===
Erstellt ein JSON-Objekt für <code><nowiki><graph></nowiki></code> zur Darstellung von Diagrammen. Im Artikelnamensraum sollte die Vorlage {{Vorlage|Graph:Chart}} genutzt werden. Siehe dort auch für Anwendungsbeispiele.

'''Parameter:'''
}}{{#ifeq:{{{1|chart}}}|chart|
* '''width:''' Breite des Diagramms
* '''height:''' Höhe des Diagramms
* '''type:''' Diagrammtyp: <code>line</code> für [[Liniendiagramm]]e, <code>area</code> für [[Flächendiagramm]]e, <code>rect</code> für [[Säulendiagramm]]e und <code>pie</code> für [[Kreisdiagramm]]e (Tortendiagramme). Mit dem Präfix <code>stacked</code> (z. B. <code>stackedarea</code>) können mehrere Serien gestapelt werden.
* '''interpolate:''' [[Interpolation (Mathematik)|Interpolations]]-Methode für Linien- und Flächendiagramme. Empfohlen ist <code>monotone</code> – weitere Werte lassen sich https://github.com/vega/vega/wiki/Marks#area entnehmen.
* '''colors:''' Farbpalette des Diagramms als kommagetrennte Liste von Farbwerten. Farbwerte werden im Format <code>#rgb</code>/<code>#rrggbb</code>/<code>#aarrggbb</code> oder mit einem [[Webfarbe#Benannte Farben|CSS-Farbnamen]] angegeben. Bei <code>#aarrggbb</code> bezeichnet <code>aa</code> den [[Alphakanal]], d. h. FF=100% Deckkraft, 80=50% Deckkraft/halbdurchsichtig, usw. (Die Standardpalette ist [https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeCategory10 category10.])
* '''xAxisTitle''' und '''yAxisTitle:''' Beschriftung der X- und Y-Achse
* '''xAxisMin, xAxisMax, yAxisMin''' und '''yAxisMax:''' ändert den Start- und Endwert der X- bzw. Y-Achse
* '''xAxisFormat''' und '''yAxisFormat:''' ändert die Formatierungen der Achsenbezeichnungen. Um beispielsweise Prozentzahlen auszugeben, kann das Format <code>%</code> genutzt werden, während <code>,d</code> [[Tausendertrennzeichen]] einschaltet (https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers für Zahlen und https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md für Zeitangaben).
* '''xAxisAngle:''' Dreht die x-Achsenbezeichnungen um den angegebenen Winkel. Sinnvolle Werte sind: -45, +45, -90, +90
* '''xGrid''' und '''yGrid:''' Anzeige von [[Gitternetz]]linien ja/nein
* '''xScaleType''' und '''yScaleType:''' Ändert die Skalierung der betreffenden Achse. Wenn der Parameter auf <code>log</code> gesetzt wird, erscheint die Achse mit logarithmischer Skalierung. Man sollte den Startwert dieser Achse dann nicht auf 0 setzen. (Weitere erlaubte Werte sind unter https://vega.github.io/vega/docs/scales/#types aufgeführt, diese wurden jedoch noch nicht getestet.)
* '''xType''' und '''yType:''' Datentypen der Werte, z. B. <code>integer</code> für Ganzzahlen, <code>number</code> für reelle Zahlen, <code>date</code> für Datumsangaben (z. B. im Format <code>JJJJ/MM/TT</code>) und <code>string</code> für beliebige Ordinalwerte.
* '''x:''' X-Werte als kommagetrennte Liste (wenn ein x-Wert selbst ein Komma enthält, muss dieses mit einem Backslash [[Escape-Sequenz#In_C_und_verwandten_Programmiersprachen|escapet]] werden, d. h. es muss stattdessen <code>\,</code> verwendet werden)
* '''y''' bzw. '''y1, y2,''' …: Y-Werte von einer bzw. mehreren Datenreihen. Bei Kreisdiagrammen gibt <code>y2</code> die Radien der entsprechenden Kreisstücke an.
* '''legend:''' Legende mit angegebenen Legendentitel anzeigen (funktioniert nur bei mehreren Datenreihen). Für Alternativen siehe [[Wikipedia:Farbe#Vorlagen]].
* '''y1Title, y2Title,''' …: Bezeichnung der jeweiligen Datenreihe in der Legende
* '''linewidth:''' Liniendicke bei Liniendiagrammen bzw. Abstand zwischen den Kreisstücken bei Kreisdiagrammen; bei mehreren Datenreihen können durch Komma separiert mehrere verschiedene Werte angegeben werden, z. B. <code>linewidth=1, 2.3, 6</code>. Wird der Wert für eine Datenreihe auf 0 gesetzt, können mit <code>showSymbols</code> die reinen Datenpunkte angezeigt werden.
* Darstellung der Datenpunkte:
** '''showSymbols:''' Fügt Symbole zur Datenpunkt-Markierung ein. Wenn eine Zahl angegeben wird, wird sie als Skalierungsfaktor interpretiert, wobei 2,5 der Default-Wert ist. Wie bei <code>linewidth</code> können unterschiedliche werte für die Datenreihen angegeben werden. '''Beispiel:''' <code>showSymbols=1, 2, 3, 4</code>.
** '''symbolsShape:''' Symbol der Datenpunkt-Markierung. Mögliche Werte sind unter anderem: ''circle'', ''x'', ''square'', ''cross'', ''diamond'', ''triangle_up'', ''triangle_down'', ''triangle_right'', ''triangle_left'', ''banana''. Wie bei <code>linewidth</code> können unterschiedliche Werte für die Datenreihen angegeben werden. '''Beispiel:''' <code>symbolsShape=circle, cross, square</code>
** '''symbolsNoFill:''' wenn der Parameter gesetzt wird, wird das Symbol der Datenpunkt-Markierung nicht ausgefüllt, sondern nur der Rand des Symbols angezeigt.
** '''symbolsStroke:''' Wenn <code>symbolsShape=x</code> oder die Option <code>symbolsNoFill=</code> gesetzt ist, kann mit diesem Parameter die Randdicke des Symbols gesetzt werden, Default-Wert: 2.5.
* '''showValues:''' gibt die Y-Werte zusätzlich als Text aus. (Wird momentan nur von (nicht gestapelten) Säulen- und Kreisdiagrammen unterstützt.) Die Ausgabe kann über folgende Parameter konfiguriert werden, die angegeben werden als <code>Name1:Wert1, Name2:Wert2</code>:
** '''format:''' formatiert die Werteausgabe gemäß https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers für Zahlen und https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md für Zeitangaben
** '''fontcolor:''' Textfarbe
** '''fontsize:''' Textgröße
** '''offset:''' verschiebt den Text gemäß dem angegebenen Offset. Bei Säulen- und Kreisdiagrammen (mit <code>midangle</code>-Winkelwert) gibt dies auch an, ob der Text inner- oder außerhalb der Diagrammgrafiken geschrieben wird.
** '''angle''' (nur Kreisdiagramme): Winkel in Grad oder <code>midangle</code> (Standard) für dynamischen Winkel basierend auf dem Winkel des Kreisstücks.
* '''innerRadius:''' innerer Radius, um aus einem Kreisdiagramm ein ''Ringdiagramm'' zu erzeugen.
* '''Annotations'''
** '''vAnnotationsLine''' and '''hAnnotationsLine''': display vertical or horizontal annotation lines on specific values e.g. <code>hAnnotationsLine=4, 5, 6</code>
** '''vAnnotationsLabel''' and '''hAnnotationsLabel''': display vertical or horizontal annotation labels for lines e.g. <code>hAnnotationLabel = label1, label2, label3</code>
}}{{#if:{{{1|}}}||
* '''formatjson:''' JSON-Objekt für bessere Lesbarkeit zu Debuggingzwecken formatieren.

=== Vorlagenwrapper ===
Die Funktionen <code>mapWrapper</code> und <code>chartWrapper</code> dienen lediglich dazu, alle Parameter einer aufrufenden Vorlage an die entsprechenden Funktionen <code>map</code> und <code>chart</code> durchzureichen, so dass die Vorlage selbst keine Parameterzuordnung vornehmen muss.
}}

'''Hinweis:''' In der Vorschau erzeugt die Graph-Funktion ein [[Canvas (HTML-Element)|Canvas]]-Element mit einer Vektorgrafik. Beim Abspeichern wird daraus jedoch eine [[Portable Network Graphics|PNG]]-Datei erzeugt.

'''Für Entwickler:''' Neue Funktionen können im [https://vega.github.io/vega-editor/index.html?mode=vega Vega Editor] ausprobiert werden, der auch eine Vielzahl von Beispielcodes enthält.
<includeonly>{{Kasten|1=

* Der nachstehende Abschnitt wird automatisch in jede Dokumentation zur Vorlagenprogrammierung eingebunden.
}}</includeonly></onlyinclude>

CowboysWiki:Lua/Modul/Graph/de - Versionsgeschichte