Datenvisualisierung/Liniendiagramm
Ein Koordinatensystem dient zur eindeutigen Bezeichnung der Position von Punkten und Objekten in einem geometrischen Raum. Gerade mathematische Gleichungen können so durch eine Darstellung aller geordneten Paare in einem Kurvenverlauf oder Funktionsgraph anschaulich sichtbar gemacht werden.
Inhaltsverzeichnis
Koordinatensystem mit Raster
Ein kartesisches Koordinatensystem ist ein orthogonales (rechtwinkliges) Koordinatensystem. Im zwei- und dreidimensionalen Raum handelt es sich um das am häufigsten verwendete Koordinatensystem, da sich viele geometrische Sachverhalte in diesem anschaulich und übersichtlich beschreiben lassen.
<defs>
<pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M0,0 v10 h10" stroke="#57c4ff" fill="none" />
</pattern>
</defs>
<rect x="0" y="0" width="700" height="400" fill="url(#grid)"></rect>
In diesem Beispiel wird der Hintergrund mit einem Muster versehen, das das Rechteck mit einem Raster versieht, sodass das darüber gezeichnete Koordinatensystem wie auf Millimeterpapier gezeichnet aussieht und leichter abzulesen ist.
Achsen
.axis {
stroke: #999;
marker-end: url(#markerArrow);
}
<defs>
<pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M0,0 v10 h10" stroke="#57c4ff" fill="none" />
</pattern>
<marker id="markerArrow" markerWidth="130" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M0,2 l8,4 l-8,4" fill="none" stroke="#999" stroke-width="1"/>
</marker>
</defs>
<rect x="0" y="0" width="700" height="400" fill="url(#grid)"></rect>
<path class="axis" d="M200,400 v-395"/>
<path class="axis" d="M0,200 h695"/>
Im Definitionsabschnitt wird nun eine Markierung markerArrow festgelegt. Sie besteht aus einem Pfad, der die Form eines Winkels oder Pfeils einnimmt.
Durch den Ursprung des Koordinatensystems werden nun die zwei Achsen mit der Klasse axis in Form eines Pfads gezogen. Über die CSS-Festlegung
marker-end: url(#markerArrow); wird diese Markierung an das Ende jeder Achse angefügt.
Über die Eigenschaft orient="auto" wird die Richtung des Pfeils an den Verlauf der Achse angepasst.
Funktionsgraphen
Funktionsgraph für lineare Gleichungen
Eine lineare Gleichung ist eine mathematische Bestimmungsgleichung, in der ausschließlich Linearkombinationen der Unbekannten vorkommen. Die entsprechenden Wertepaare werden ins Koordinatensystem gezeichnet.
<svg viewbox="0 0 700 400">
<defs>
<pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M0,0 v10 h10" stroke="#57c4ff" fill="none" />
</pattern>
</defs>
<!-- Karo-Muster -->
<rect x="0" y="0" width="700" height="400" fill="url(#grid)"></rect>
<!-- X-Achse -->
<path class="axis" d="M350,0 v400" />
<!-- Y-Achse -->
<path class="axis" d="M0,200 h700" />
<!-- Ursprungspunkt -->
<circle cx="350" cy="200" r="4" fill="#c32e04"></circle>
<!-- Beschriftung des Ursprungspunktes -->
<text x="360" y="220" fill="darkslategray">(0,0)</text>
<!-- Linie des Funktionsgraphen -->
<path id="functionGraph" d="M140,400 L540,0" stroke="#0f0" />
</svg>
f(x) = x + 1 entspricht. Damit sie später mit JavaScript bequem adressiert werden kann, erhält sie die ID functionGraph.<form>
<fieldset>
<legend>Formel</legend>
<p>
y =
<label>
Faktor a
<input name="a" step="0.01" type="number" value="1">
</label>
* x +
<label>
Konstante c
<input name="c" type="number" value="1">
</label>
</p>
</fieldset>
</form>
number, wovon das erste für den Faktor a Werte mit Hunderstel-Stellen (step="0.01"), das zweite für die Konstante c nur Ganzzahlen (Voreinstellung für step, daher nicht notiert) annimmt.document.addEventListener("DOMContentLoaded", function () {
var graph = document.getElementById("functionGraph"),
form = document.forms[0],
a = document.querySelector('input[name="a"]'),
c = document.querySelector('input[name="c"]');
function redraw () {
var xa, ya, xz, yz;
// die eigentliche lineare Funktion
function f (x) {
return Math.floor(
parseFloat(a.value) * x
// Karo-Maß ist in 10er-Schritten
+ 10 * parseInt(c.value)
);
}
// -350 <= x <= 350
// -200 <= y <= 200
// Startpunkt des Graphen
xa = -351;
ya = -201;
while (xa <= 350 && (ya <= -200 || ya >= 200)) {
xa++;
ya = f(xa);
}
// Endpunkt des Graphen
xz = 351;
yz = 201;
while (xz >= -350 && (yz <= -200 || yz >= 200)) {
xz--;
yz = f(xz);
}
graph.setAttribute(
"d",
// Startpunkt absolut (origin 350|200)
"M" + (350 + xa) + "," + (200 - ya) // Y-Koordinate spiegeln!
// Endpunkt absolut (origin 350|200)
+ " L" + (350 + xz) + "," + (200 - yz) // Y-Koordinate spiegeln!
);
}
a.addEventListener("change", redraw);
c.addEventListener("change", redraw);
form.addEventListener("submit", function (event) {
redraw();
/* Standardaktionen des Formulars unterdrücken
(wir versenden ja nichts) */
event.preventDefault();
event.stopPropagation();
return false;
});
});
Die Funktion redraw ist dafür verantwortlich, dass die Koordinaten für den Anfangspunkt und den Endpunkt der grünen Linie neu definiert werden können. In ihr wird eine Funktion f definiert, die die tatsächliche Berechnung der linearen Gleichung vornimmt. Die berechneten Koordinatenwerte sollen später Pixel in der Grafik werden, daher werden mit Math.floor() garantiert Ganzzahlen zurückgegeben.
Im weiteren Verlauf findet die Funktion redraw heraus, wo der darstellbare Bereich des Graphen beginnt, und wo er aufhört, um passende Start- und Endpunkte bestimmen zu können.
Mit der setAttribute-Methode wird dem path-Element der Wert seines d-Attributes neu beschrieben, was zu einer veränderten Darstellung in der Grafik führt.
Da anders als im Koordinatensystem der Ursprungspunkt im Bild die linke obere Ecke ist, müssen die y-Werte der Koordinaten invertiert, also das System sprichwörtlich auf den Kopf gestellt werden. Daher wird bei Start- und Endpunkt die Y-Koordinate subtrahiert, anstatt - wie die X-Koordinate - addiert. Für beide Koordinatenwerte muss noch der Versatz für die Bildmitte hinzu addiert werden, damit die Bildmitte zum Ursprungspunkt wird.
Mit den Event-Listenern werden Änderungen an den Werten der Zahlen sofort sichtbar gemacht.
Streudiagramm
Ein Streudiagramm (engl. scatter plot) ist die grafische Darstellung von beobachteten Wertepaaren zweier statistischer Merkmale. Diese Wertepaare werden in ein kartesisches Koordinatensystem eingetragen, wodurch sich eine Punktwolke ergibt. Die Darstellung der Punkte kann durch verschiedene kleine Symbole erfolgen, die evtl. mit Tooltips beim Hovern erweitert werden könnten.
Das Muster der Punkte lässt oft Informationen über die Abhängigkeitsstruktur der beiden Merkmale erkennen. Häufig auftretende Korrelationen sind Ballungen (cluster) und lineare Strukturen.
ToDo (weitere ToDos)
Liniendiagramm aus CSV-Datei/ Array
- Datenpaare als points einer line (keine Umrechnung nötig)
- Spiegelung der Zeichenfläche, bzw. X-Koordinaten mit negativem Vorzeichen.
- Diagramme Speichern (robertbienert.de)
Weblinks
- css-tricks: How to Make Charts with SVG
Streudiagramme:
- alignedleft.com: Making a scatterplot
- matthewgladney.com: No Nonsense Guide To Getting Started with Scatter Plots, d3.js and d3.csv
- OReilly: Making a scatterplot with D3.js
- developers.google.com: Visualization: Scatter Chart
axiserhalten eine graue Randlinie und eine Markierung am Ende.