Hilfe:Graph
Graph ist eine seit dem 5. Mai 2015 in den Wiki-Projekten verfügbare Möglichkeit, um Grafiken – insbesondere Diagramme und Karten – innerhalb der Wiki-Seite aus Rohdaten zu erstellen.
Dargestellt werden können:
- Säulen-/ Balkendiagramme, auch gestapelt oder gruppiert
- Tortendiagramme (etwa für die Sitzverteilung bei Wahlergebnissen, oder prozentuale Verteilungen)
- Liniendiagramme, auch mit auffälligen Markern
- Flächendiagramme
- Baumdiagramme / Tree Maps (zur Darstellung hierarchischer Strukturen)
- Streudiagramme
- Schlagwortwolken
- Beliebige Konturen und Teilgebiete darauf, z.B. für:
- Landkarten, spezifiziert im TopoJSON-Format (siehe z.B. Datenquelle /w/index.php?title=Wikipedia:Graph/WorldMap-iso2.json&action=raw für Staaten) mit Unterstützung diverser kartografischer Projektionen
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.
- 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
Zusammengefasst: Eine direkte Einbindung von Grafikdaten umittelbar 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.
Das JSON-Objekt wird an den Graphoid-Server der WMF transferiert, der daraus eine PNG-Grafik[1] erstellt, die dann schließlich auf der Wiki-Seite angezeigt wird. Dafür wird Grafik-Software von Vega verwendet.
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
- name
- Wohl für Wikis nicht erforderlich; Identifikation der gesamten Grafik
- padding
- [Number | Object | String]
- top
- left
- bottom
- right
- scales
- Array aus Objekten für x und y; Koordinatentransformationen
- name: "x"
- type
- range
- domain
- viewport
- Array. Für Wikis kaum einsetzbar; beschreibt die dynamische momentane Bildschirmbreite des Lesers, während für die Wiki-Seite eine fest formatierte Grafik eingebunden wird.
- width
- Integer; Breite in Pixeln auf der Wiki-Seite
Beispiele
Erstellen eigener Grafiken
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.[2]
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.
Andere Software-Elemente
- Graph ist ein modernerer und mutmaßlich robusterer Ersatz für Hilfe:Zeitleisten (EasyTimeline).
- Inline SVG hatte sich nicht durchgesetzt; auch nicht GraphViz mittels mw:Extension:GraphViz, das nur Objektbeziehungen visualisiert, aber nicht beliebige Grafiken erstellen kann.
Weitere Informationen
Fehler bei Vorlage * Parametername unbekannt (Vorlage:MediaWiki): "3"
Extern
- trifacta/vega/wiki – Wiki der Entwickler von Vega auf GitHub mit ausführlicher Dokumentation der Syntax (englisch)
Anmerkungen
- ↑ SVG zukünftig vorstellbar
- ↑ „Editing JSON by hand is fiddly and prone to error, so you should use a JSON checker such as JSONLint or a JSON editor such as the Vega Live Editor to edit the JSON before you copy and paste it into the wiki page.“ (Extension:Graph/Demo)