Wikipedia:Grafiktipps/Diagramme

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

Auf dieser Seite befinden sich Beispiele von Diagrammen. Gezeigt werden soll, welche Möglichkeiten es bei der Gestaltung gibt, welche Programme verwendet werden und wie die Diagramme hergestellt wurden. Im Mittelpunkt steht hier nicht die verwendete Software, sondern das Ergebnis – man kann auch mit ungewöhnlichen Methoden gute Diagramme erzeugen.

Erstellung von Diagrammen innerhalb der Artikel der Wikipedia[Quelltext bearbeiten]

Vorlagen und Wikipedia-Erweiterungen[Quelltext bearbeiten]

Für häufig genutzte Diagrammtypen gibt es in der Wikipedia Vorlagen, in die Zahlenwerte eingetragen werden können und aus denen dann automatisch ein Diagramm erstellt wird. Einige dieser Vorlagen sind nur in der deutschsprachigen Wikipedia verfügbar:

Stammbaum[Quelltext bearbeiten]

Die Vorlage:Stammbaum dient der Übertragung einfacher Stammbäume, die auf einer ASCII-Syntax beruhen und aus Boxen und Verbindungslinien bestehen. Die Stammbäume werden als eine Tabelle angezeigt, die auf HTML mit CSS-Parametern basiert, und können beliebige Wiki-Syntax innerhalb der Boxen enthalten.

Beispiel:

 
 
 
Helios
 
 
 
Klymene
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Aigle
 
Phaetusa
 
Lampetia
 
Phaeton


Tabellen als Säulendiagramm[Quelltext bearbeiten]

Wahlen zum Abgeordnetenhaus von Berlin 2001
29,7 %
23,8 %
22,6 %
9,9 %
9,1 %
4,4 %
SPD CDU PDS FDP Bü90/
Grüne
Sonstige

Das nebenstehende Diagramm der Wahlen in Berlin ist keine Grafikdatei, sondern eine verschachtelte Tabelle. Sie besteht aus sechs Spalten und drei Zeilen. In jeder Spalte steht eine Partei; in der obersten Zeile (spaltenübergreifend) steht die Überschrift, in der zweiten Zeile die Prozentzahl und in der dritten Zeile der Parteiname. Zusätzlich ist in jeder Zelle der zweiten Zeile hinter der Prozentzahl eine weitere Tabelle eingebaut, die über CSS-Befehle die Farbe der Partei und eine Höhe entsprechend der Prozentzahl hat. Diese mit Hintergrundfarbe versehenen Tabellen erscheinen als Diagrammbalken. Die Anweisung valign="bottom" sorgt dafür, das alle Diagrammbalken samt Prozentzahlen am Unterrand ausgerichtet sind.

Siehe auch Vorlage:Balkendiagramm und Vorlage:Wahldiagramm.

Software zur externen Diagramm-Erstellung[Quelltext bearbeiten]

Diagramme sollten möglichst in einem Vektorformat (z.B. SVG) erstellt werden, damit sie gut skalierbar bleiben.

Ein Pixelbild sollte so groß sein, dass es bei einer druckbaren Auflösung von 600 dpi ( ≈ 24 px/mm) größer als eine Briefmarke ist.

Wer ein Diagramm für die WP erstellen will, der sollte vorher folgende Fragen klären:

1. welcher Diagrammtyp ist der richtige?
2. Wie groß soll das Diagramm in der WP erscheinen und wie groß soll es im Original sein? Die Linien in einem Diagramm sollten so dick sein, dass bei der verkleinerten Einbindung eine Breite von mindestens einem Pixel gegeben ist. Andernfalls kann es vorkommen, dass Linien "verschwinden".
3. augenfreundliche Kontraste wählen, also nicht unbedingt "Rot auf Rosa" etc.
4. möglichst nur websichere Farben verwenden:
Tabelle der 216 websicheren Farben[1]
#000 #003 #006 #009 #00C #00F
#030 #033 #036 #039 #03C #03F
#060 #063 #066 #069 #06C #06F
#090 #093 #096 #099 #09C #09F
#0C0 #0C3 #0C6 #0C9 #0CC #0CF
#0F0 #0F3 #0F6 #0F9 #0FC #0FF
#300 #303 #306 #309 #30C #30F
#330 #333 #336 #339 #33C #33F
#360 #363 #366 #369 #36C #36F
#390 #393 #396 #399 #39C #39F
#3C0 #3C3 #3C6 #3C9 #3CC #3CF
#3F0 #3F3 #3F6 #3F9 #3FC #3FF
#600 #603 #606 #609 #60C #60F
#630 #633 #636 #639 #63C #63F
#660 #663 #666 #669 #66C #66F
#690 #693 #696 #699 #69C #69F
#6C0 #6C3 #6C6 #6C9 #6CC #6CF
#6F0 #6F3 #6F6 #6F9 #6FC #6FF
#900 #903 #906 #909 #90C #90F
#930 #933 #936 #939 #93C #93F
#960 #963 #966 #969 #96C #96F
#990 #993 #996 #999 #99C #99F
#9C0 #9C3 #9C6 #9C9 #9CC #9CF
#9F0 #9F3 #9F6 #9F9 #9FC #9FF
#C00 #C03 #C06 #C09 #C0C #C0F
#C30 #C33 #C36 #C39 #C3C #C3F
#C60 #C63 #C66 #C69 #C6C #C6F
#C90 #C93 #C96 #C99 #C9C #C9F
#CC0 #CC3 #CC6 #CC9 #CCC #CCF
#CF0 #CF3 #CF6 #CF9 #CFC #CFF
#F00 #F03 #F06 #F09 #F0C #F0F
#F30 #F33 #F36 #F39 #F3C #F3F
#F60 #F63 #F66 #F69 #F6C #F6F
#F90 #F93 #F96 #F99 #F9C #F9F
#FC0 #FC3 #FC6 #FC9 #FCC #FCF
#FF0 #FF3 #FF6 #FF9 #FFC #FFF

Excel und Photoshop/Illustrator[Quelltext bearbeiten]

Microsoft Excel ist ein kommerzielles Tabellenkalkulationsprogramm. Seine Funktionen zur Erzeugung von Diagrammen orientieren sich an kaufmännischen Darstellungsformen. Für diese Beispiele wurde die Excel-Ausgabe mit Photoshop/Illustrator nachbearbeitet.

Obwohl Adobe Photoshop aufgrund seiner bloß teilweisen vektororientierten Arbeitsweise für Grafiken eigentlich ungeeignet ist, kann man damit dennoch gute Grafiken und Diagramme erstellen. Wer bereits Photoshop besitzt, muss für solche Anwendungen nicht unbedingt in ein zusätzliches Vektorgrafikprogramm investieren. Besser für diesen Anwendungsbereich geeignet ist jedoch ein Vektorgrafikprogramm wie Adobe Illustrator, mit dem sämtliche Möglichkeiten der nachträglichen Veränderung und der Export in ein Vektor-Format erhalten bleiben.

Beispiel: Bundestagswahlergebnisse (Diagramm nachgezeichnet)[Quelltext bearbeiten]

Wahlergebnis Bundestagswahl
  • Basis: Liniendiagramm in Excel
  • Export des Diagramms zu einem Rasterbild (hier durch ein Screenshot)
  • Dieses Rasterbild wurde im Photoshop/Illustrator als eigene Ebene importiert. Auf anderen Ebenen wurde das Bild nachgezeichnet und entsprechend mit Effekten versehen.
  • Schließlich wurde die Ebene mit dem Screenshot ausgeblendet, so dass nur noch das nachgezeichnete Diagramm übrig bleibt.


Beispiel: Bevölkerungsdaten von Zwickau (Diagramm im Vektorformat exportiert und nachbearbeitet)[Quelltext bearbeiten]

Bevölkerungsentwicklung von Zwickau
  • Aus einer Tabelle mit den Bevölkerungsdaten von Zwickau wurde mit Excel ein x-y-Diagramm erzeugt. (Excel-Datei)
  • In Excel wurde dem Diagramm ein ansprechendes Layout verpasst: Die Diagrammfläche und der Hintergrund der Achsen sind lineare Farbverläufe (zwischen Hellgrau und Dunkelgrau), die rechtwinklig zueinander ausgerichtet sind.
  • Anschließend wurde das Diagramm als Postscript-Datei exportiert (in diesem Fall per Postscript-Druckertreiber), um nicht durch Rasterung eine zu geringe Auflösung zu erhalten.
  • Mit Photoshop wurde die Postscript-Datei importiert und in eine 2000 Pixel breite Bitmap-Datei konvertiert, wobei Antialiasing für eine Kantenglättung sorgt.
  • In Photoshop wurde die Fläche unter der Kurve mit 20% deckendem Schwarz gefüllt, das Bild noch einmal auf die Hälfte der Größe herunterskaliert und im PNG-Format mit 256 Graustufen abgespeichert.


Excel-Diagramme in die Zwischenablage kopieren[Quelltext bearbeiten]

Excel-Diagramme lassen sich auch wahlweise als Pixel- (BMP) oder Vektorgrafik (WMF) in die Zwischenablage kopieren. Bei Excel-Versionen bis einschließlich Office2003 dazu so vorgehen:

  • Bei gedrückter Shift-Taste den Menüpunkt „Bearbeiten“ aufrufen und „Bild kopieren“ anwählen
  • In dem folgenden Dialog kann gewählt werden, ob das Diagramm als Vektorgrafik („Bild“) oder als Pixelgrafik („Bitmap“) in die Zwischenablage kopiert werden soll.
  • Das Diagramm kann jetzt in ein geeignetes Grafikprogramm eingefügt und dort bearbeitet werden.

In Office 2007 (und 2010):

Schnellzugriff hinzufügen um in Excel 2010 Diagramme als Vektorgrafiken exportieren zu können
  • Oben auf den kleinen Pfeil rechts neben der "Schnellzugriffsleiste" klicken. Das ist die Symbolleiste, die sich in der Titelleiste neben dem Office-Button befindet.
  • "Weitere Befehle..." wählen
  • In der Dropdown-Box links oben "Alle Befehle" statt "Häufig verwendete Befehle" einstellen.
  • "Als Grafik kopieren" (Office 2010: "Als Bild kopieren") zur Symbolleiste hinzufügen, OK klicken.
  • In der Symbolleiste befindet sich nun ein Icon mit einem etwas unglücklich gewählten Symbol, das die erwähnte Funktion aufruft.

OpenOffice und Photoshop/Paint[Quelltext bearbeiten]

OpenOffice enthält ein freies Tabellenkalkulationsprogramm Calc, mit dem man Liniendiagramme wie mit Excel erstellen kann. Alternativ kann man Excel-Dateien (*.xls) öffnen und bearbeiten.

  • OpenOffice kann Tabelle und Liniendiagramme als PDF-Datei exportieren
  • Diese mit dem frei erhältlichen Acrobat Reader öffnen, das Diagramm zeigt keine Pixelstruktur.
  • Das Schnappschuss-Werkzeug aktivieren
  • Das gewünschte Diagramm markieren, es wird automatisch in die Zwischenablage kopiert.
  • Den Inhalt der Zwischenablage wahlweise in Photoshop oder Paint einfügen (Strg+V), bei Bedarf nachbearbeiten und als *.PNG speichern.

Gnumeric[Quelltext bearbeiten]

Freies Tabellenkalkulationsprogramm. Über den Kontextmenü-Eintrag "Als Bild speichern" können Diagramme direkt als SVG oder PNG gespeichert werden.

GNU R (GPL)[Quelltext bearbeiten]

Geometrische Brownsche Bewegung

GNU R ist ein Open-Source-Mathematikprogramm mit Schwerpunkt Statistik. Eigentlich ist es eine Programmiersprache, hat aber auch ein GUI und kann auf der Kommandozeile ausgeführt werden.

Der Quellcode für das nebenstehende Diagramm findet sich auf dessen Beschreibungsseite. Um die Grafik selbst zu reproduzieren und evtl. zu verbessern, ist lediglich der Quelltext einmal auszuführen – auf der Kommandozeile abtippen oder einfügen oder ein R-Script mit dem Quelltext ausführen.

Weitere (teilweise einfachere) Beispiele von GNU-R-Grafiken mit Quelltext sind auf dieser Webseite zu finden.

Als Ausgabeformat sollte SVG, aber auch png (Abbildung in Wikipedia nicht immer exakt gleich) gewählt werden.


Mathematica[Quelltext bearbeiten]

Kleinsche Flasche

Mathematica ist ein kommerzielles Computeralgebrasystem, mit dem mathematische Ausdrücke analytisch gelöst werden können. Mit den enthaltenen Visualisierungsfunktionen können sie graphisch dargestellt werden.

Zuerst wurde die Parameterisierung der Kleinschen Flasche angegeben und diese dann mit dem Befehl ParametricPlot3D gezeichnet. Quellcode (aus der Bildbeschreibung kopiert):

KleinBottle[r_:1] =
 Function[{u, v},
   UnitStep[Sin[u]]
   {
       6 Cos[u](1 + Sin[u]) + 4r(1 - Cos[u]/2) Cos[u]Cos[v],
       16 Sin[u] + 4r(1 - Cos[u]/2) Sin[u]Cos[v],
       4r(1 - Cos[u]/2) Sin[v]
   }
   + (1 - UnitStep[Sin[u]])
   {
       6 Cos[u](1 + Sin[u]) - 4r(1 - Cos[u]/2) Cos[v],
       16 Sin[u],
       4r(1 - Cos[u]/2) Sin[v]
   }
 ]

 ParametricPlot3D[Evaluate[KleinBottle[][u, v]], {u, 0, 2Pi}, {v, 0, 2Pi},
   PlotPoints -> {50, 19}, Boxed -> False, Axes -> False,
   ViewPoint -> {0.454, -2.439, -2.301}]

Qtiplot (GPL)[Quelltext bearbeiten]

QtiPlot ist an Origin angelehnt und kann auch Daten als 2D- und 3D-Diagramme plotten. Die Ausgabe kann auch als SVG exportiert werden.

Gnuplot (kostenlos)[Quelltext bearbeiten]

eine mit Gnuplot erstellte Grafik einer Kleinschen Flasche

Ein weiteres mögliches Werkzeug für die Kommandozeile um SVG-Grafiken (und andere) zu erstellen ist Gnuplot.

Matplotlib (kostenlos)[Quelltext bearbeiten]

Mit Python und Matplotlib erstellte Balkengrafik (SVG-Datei auf Commons). Der Programmcode steht als Kommentar in der SVG-Datei.

Matplotlib ist eine Programmbibliothek für die Programmiersprache Python. Die Grafiken können in einer Vielzahl von Formaten erstellt werden, z. B.: SVG, PNG, etc. Der Programmcode ist kurz und übersichtlich. In SVG-Grafiken kann man als Kommentar das Python-Programm hinterlegen, so dass zukünftige Benutzer das Diagramm erweitern oder verändern können.

Xmgrace (GPL)[Quelltext bearbeiten]

Mollier-h-s-Diagramm für Wasserdampf, erstellt mit Xmgrace. Jede Linie im Diagramm ist ein einzelner Graph, der für sich bearbeitet werden kann.

Xmgrace ist ein Open-Source-Datenauswertungsprogramm. Seine Stärke liegt in der Verarbeitung von Messwerten und der Erzeugung von Diagrammen, allerdings sind auch mathematische Funktionen zur Nachbearbeitung der Daten bis hin zu einer Fourier-Transformation und einer Spline-Interpolation enthalten. Die Vorgehensweise bei der Erstellung eines Diagrammes mit xmgrace ähnelt derjenigen zur Erstellung einer Technischen Zeichnung mit einem CAD-Programm; allerdings gibt es keine Undo-Funktion. Die erzeugten Diagramme bestehen aus einzelnen Graphen, die mit einer Zoomfunktion beliebig skaliert werden können. Das gleiche gilt auch für die Achsen des Diagrammes. Die einzelnen Diagramme können innerhalb eines Ausgabeplots beliebig angeordnet werden.

An Diagrammtypen stehen zur Verfügung:

Weiterhin stehen zur Verfügung:

  • Grafische Elemente wie Linien, Pfeile, Rechtecke und Ellipsen
  • Diverse Schriftarten
  • Legenden
  • Füllfunktionen

jeweils in diversen Farben,

  • Verschiedene Ausgabeformate wie Postscript, PNG, EPS oder SVG (für die Wikipedia sollte SVG gewählt werden)

Der Fehlerbereich eines Meßwertes kann ebenfalls ins Diagramm aufgenommen werden, ebenso können Formeln zur Erzeugung eines Graphen eingegeben werden. Zur manuellen Bearbeitung der Werte steht ein komfortabeler Editor zur Verfügung. Der Quellcode kann ebenfalls mit einem ganz normalen Texteditor manipuliert werden, das Programm eignet sich daher sehr gut für die Nutzung in der Wikipedia. Als Beispiel für diese Funktionalität kann die Commons-Diskussion des obigen Diagrammes dienen, die den vollständigen Quellcode enthält.

Siehe auch die xmgrace-Galerie.


Handarbeit mit Vektorgrafikprogrammen[Quelltext bearbeiten]

Fleischkonsum

Dieses Diagramm wurde mit dem Vektorgrafikprogramm Freehand gezeichnet. Da man die Dimensionen der Rechtecke als Zahlen eingeben kann, ist es kein Problem, ein Balkendiagramm zu erzeugen, bei dem die Höhen der Balken proportional zu den Werten sind. Falls das Grafikprogramm die Angabe eines Maßstabs unterstützt, entfällt sogar das nachträgliche Skalieren der Grafik oder das Umrechnen der Werte bei der Eingabe.

Eine frei verfügbare Alternative zu Freehand ist beispielsweise Inkscape.

Handarbeit mit Cinema 4D[Quelltext bearbeiten]

Wahlergebnis Bundestagswahl 2005

Dieses Diagramm wurde mit der 3D-Grafik-Software Cinema 4D erstellt. Ähnlich wie bei einem 2D-Vektorgrafikprogramm zeichnet man das Diagramm aus geometrischen Grundformen, anschließend wird von der Software eine 3D-Ansicht gerendert.


  1. In der Tabelle ist jeder aufgeführten Farbcode der RGB-Hex-Wert in seiner CSS-Kurzform; so entspricht zum Beispiel #609 = rgb(102, 0, 153) oder hex. #660099. Siehe auch CSS: Use Shorthand Hex Colors (engl.) und en:Web colors #Shorthand hexadecimal form (engl.)