SVG/Anwendung und Praxis/Diagramme mit Koordinatensystem

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

[Bearbeiten] 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.

Beispiel ansehen …
  <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.

[Bearbeiten] Achsen

Beispiel ansehen …
.axis {
  stroke: #999;
  marker-end: url(#markerArrow);
}
Elemente mit der Klasse axis erhalten eine graue Randlinie und eine Markierung am Ende.
<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 Urspung 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.

[Bearbeiten] Funktionsgraphen

[Bearbeiten] 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.

Beispiel ansehen …
<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>
Auch in diesem Beispiel wird der Hintergrund mit einem Muster versehen, das das Rechteck mit einem Raster versieht. Zusätzlich wird eine grüne Linie definiert, die einem Funktionsgraphen für die lineare Gleichung 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>
Das Formular enthält im Wesentlichen zwei Eingabefelder mit dem Typ 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.

[Bearbeiten] Streudiagramm

Ein Streudiagramm (engl. scatter plot) ist die graphische 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.


[Bearbeiten] Weblinks

Streudiagramme:

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML