Hilfe:graph

Die Graph-Erweiterung ist derzeit wegen eines Sicherheitsproblems deaktiviert, weshalb Grafiken fehlen bzw. der entsprechende Grafik-Code im Artikel erscheinen kann. Seit 18. April 2023 werden deshalb Hinweise im Artikel angezeigt, dass die Grafiken derzeit nicht verfügbar sind. Bitte diese nicht entfernen. -- hgzh 13:55, 18. Apr. 2023 (CEST)[Beantworten]

Das Element <graph> ist eine seit 2015 in den Wiki-Projekten verfügbare Möglichkeit, um Grafiken – insbesondere Diagramme und Karten – innerhalb der Wiki-Seite aus Rohdaten zu erstellen.

Mittels Hilfsvorlagen dargestellt werden können:

Umsetzung und Nutzung

  • Direkt in enzyklopädische Artikel sollten derartige Konstrukte besser nicht hineingeschrieben werden; erst recht nicht in Pixel umgerechnet.
  • Vielmehr ist eine Einbindung geeigneter Strukturen mit aktuellen Anwendungsdaten in Vorlagensyntax ratsam.
  • Für die Realisierung dahinter ist ob der Komplexität allerdings keine Vorlagenprogrammierung mehr zu empfehlen.
  • Die Aufbereitung der strukturierten Daten sollte stattdessen mittels Lua erfolgen.
    • Mit der Bibliotheksfunktion mw.text.jsonEncode() ist es dann auch möglich, die in Lua erarbeitete table direkt in ein JSON-Objekt zu konvertieren, das dann über ein <graph>-Tag dargestellt werden kann.

Zusammengefasst: Eine direkte Einbindung von Grafikdaten unmittelbar in Artikel ist somit weder zu empfehlen noch in größerem Umfang zu erwarten.

  • Die grafischen Informationen sind recht umfangreich. Statt rein grafische Detailinformationen auf Wikiseiten auszubreiten, sollten besser echte Grafiken (möglichst als SVG) extern erstellt und hochgeladen werden, die dann klassisch als Bilder in Artikel eingebunden werden.
  • Enzyklopädische Informationen (Anwendungsdaten aus der realen Welt) sind ansonsten an Vorlagen zu übergeben, die daraus die entsprechenden Diagramme generieren.

Syntax

Die grafischen Daten werden als JSON-Objekt vereinbart. Inhaltlich wird die Struktur durch das Paket Vega vorgegeben.

Die JSON-Spezifikation wird in <graph>…</graph> eingeschlossen.

Die Daten werden an den Browser übertragen, der daraus die Grafik erstellt. Browser mit deaktiviertem JavaScript stellen keine Grafik dar.

JSON-Komponenten

Auswahl aus der Vega-Syntax (mehr):

axes
Array aus Objekten für x und y; Koordinatenachsen
  • type
  • scale
data
Array aus Objekten; Vereinbarung von Zahlenwerten oder Textelementen, auf die andere Komponenten dann zugreifen können
  • name
  • values
height
Integer; Höhe in Pixeln auf der Wiki-Seite
legends
Array
marks
Array; die eigentlich sichtbaren geometrischen Objekte
  • type
  • from
  • properties
padding
[Number | Object | String]
top
left
bottom
right
scales
Array aus Objekten für x und y; Koordinatentransformationen
  • name: "x"
  • type
  • range
  • domain
width
Integer; Breite in Pixeln auf der Wiki-Seite

Beispiele

Erstellen eigener Grafiken

Hilfsvorlagen

Mittels der Vorlagen {{Graph:Chart}}, {{Graph:Lines}} und {{Graph:Stacked}} können eigene Diagramme erzeugt werden, und {{Graph:Map}} hilft bei der Erstellung von eigenen Datenkarten, basierend auf vorhandenen Referenzkarten. {{WikidataChart}} stellt Wikidata-Daten mit Hilfe von Graph:Chart grafisch dar.

Die folgenden Teilabschnitte beschreiben die Vorgehensweise, falls Grafiken, die von diesen Vorlagen nicht unterstützt werden, erstellt werden sollen.

Vega Live Editor

In der technischen Dokumentation wird darauf verwiesen, dass das händische Editieren von Daten für die Darstellung mittels <graph> fehleranfällig ist und es wird die Nutzung vom Vega Live Editor empfohlen, der beispielsweise auf http://trifacta.github.io/vega/editor/ erreichbar ist.[1]

Um dessen Möglichkeiten zu erkunden, ist folgender Weg sinnvoll:

Nach dem Aufruf des Vega Live Editors finden sich oben im Fenster Bedienelemente, die zunächst folgende Beschriftungen haben:

Vega Custom Format Parse Visualization Renderer Canvas

Hinter Custom verbirgt sich eine Auswahlliste, die verschiedene Fähigkeiten von Vega präsentiert. Wähle also eine davon aus, beispielsweise bar und es erscheint im rechten Teil des Bildschirms ein Graph, der die Daten, die links dargestellt sind, präsentiert.

Um nun eigene Graphen zu erstellen, können die Daten auf der linken Seite manipuliert werden. Ein Klick auf die Schaltfläche Parse am oberen Rand sorgt dafür, dass der Graph auf der rechten Seite aktualisiert wird.

Der auf diese Weise erstellte Code für einen Graphen kann/sollte vor dem Einfügen in die Wikipedia noch überprüft werden (Entwickler sprechen vom Validieren). Dazu kann er auf der Website jsonlint.com eingefügt und mittels Validate auf formale Fehler überprüft werden.

Alternativ kann auch Spezial:GraphSandbox verwendet werden.

Modul:Graph

Alternativ können auch die Funktionen des Modul:Graph genutzt werden, deren Parameter identisch sind zu den Vorlagen GraphChart und GraphMap, um ein JSON-Objekt zu erzeugen. So würde {{#invoke:Graph|chart|type=area|x=1,2,3,4|y=8, 10, 2, 7}} (beispielsweise auf Spezial:Vorlagen expandieren eingegeben) ein Flächendiagramm mit vier Punkten zurückgeben.

Wartung

Es gibt die Kategorie:Wikipedia:Seite mit Grafikfehlern, in die vom System Seiten mit falscher Definition eingeordnet werden (zurzeit: 0).

Außerdem gibt es eine zeitweilig erforderliche Kategorie:Wikipedia:Seite mit Grafikproblem (obsolete Syntax).

Andere Software-Elemente

Weitere Informationen

MediaWiki: Extension:Graph – Freie Wikisoftware (englisch)

Extern

  • vega/vega/wiki – Wiki der Entwickler von Vega auf GitHub mit ausführlicher Dokumentation der Syntax (englisch)

Anmerkungen

  1. ↑ “Editing JSON by hand is fiddly and prone to error, so you should use a JSON checker such as JSONLint or a JSON formatter such as https://jsonformatter.org or the Vega Live Editor to edit the JSON before you copy and paste it into the wiki page.” (Extension:Graph/Demo)
Quelle: https://de.wikipedia.org/wiki/Hilfe:Graph