taralino

Das Plot-Paket

Das Plot-Paket dient zur einfachen Darstellung von Datenpunkten sowie mathematischer Funktionen. Es lassen sich damit beispielsweise Simulationsergebnisse schnell und einfach veranschaulichen.

Plot.init(w, h)

Der Befehl initialisiert die Plot-Zeichenfläche. Dabei definieren die beiden verpflichtenden Argumente w und h die (maximale) Breite sowie die Höhe der Darstellung.

Als Eigenschaften können beispielsweise Achsenbeschriftungen mittels axis sowie die Hintergrundfarbe mittels background spezifiziert werden.

Zur Referenz

Bevor wir genauer auf die Darstellung von Funktionen sowie Datenpunkten eingehen, zeigt das folgende Beispiel bereits das grundlegende Konzept zur Darstellung. Eine vollständige Referenz findest du hier:

Zur Referenz

Ohne darauf weiter einzugehen, sei bemerkt, dass auch hier analog zum Grid-Paket eine Funktion Plot.draw() aufgerufen werden muss, um die Funktionen bzw. Daten schließlich darzustellen.

Beispiel

Initialisierung der Plot-Zeichenfläche und anschließende Darstellung einer Funktion.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

function f(x) {
  return Math.sin(x);
};

Plot.init(640, 300, {axis:["y-Achse","x-Achse"]});
Plot.func(f, 0, 16);
Plot.draw();

</script>
</body>
</html>

Vorschau Download Kopie speichern

Funktionen darstellen

Wie im Beispiel zuvor bereits verwendet, dient folgender Befehl zur Darstellung von Funktionen:

Plot.func(f, a, b)

Der Befehl dient zur Darstellung einer Funktion.

Übergeben werden drei verpflichtende Argumente: Die darzustellende Funktion f sowie die Darstellungsgrenzen a und b jeweils als (rationale) Zahl.

Als Eigenschaften können die Farbe mittels color sowie eine Füllung mittels filling spezifiziert werden.

Zur Referenz

Beispiel

Zur Darstellung mehrere Funktionen samt ihrer Eigenschaften.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

function f(x) {
  return Math.sin(x);
};

function g(x) {
  return Math.cos(x);
};

Plot.init(640, 300, {axis:["y-Achse","x-Achse"]});
Plot.func(f, -10,  5, {color:"orange"});
Plot.func(g,  -5, 10, {color:"lime", filling:"on"});
Plot.draw();

</script>
</body>
</html>

Vorschau Download Kopie speichern

Datenpunkte darstellen

Neben Funktionen lassen sich auch Datenpunkte darstellen:

Plot.list(A)

Der Befehl dient zur Darstellung von Datenpunkten.

Übergeben wird das verpflichtende Argument A, wobei es sich dabei um ein Datenfeld handelt. Genauer kann A ein Datenfeld von Zahlen (Vektor) sein oder aber ein Datenfeld von Zahlenpaaren (Liste von Punkten).

Als Eigenschaften können beispielsweise die Farbe mittels color sowie die Darstellungsart mittels style spezifiziert werden.

Zur Referenz

Beispiel

Zur Darstellung von Datenpunkten samt ihrer Eigenschaften.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

var A = [2,4,3,4,5,3,4,5];
var B = [[2,2], [3,4], [5,2], [7,5], [2,6]];

Plot.init(640, 300, {axis:["y-Achse","x-Achse"]});
Plot.list(A, {style:"joined", filling:"on"});
Plot.list(B, {style:"line"});
Plot.draw();

</script>
</body>
</html>

Vorschau Download Kopie speichern

Abschließend sei bemerkt, dass Funktionen und Datenpunkte auch gemeinsam in einer Plot-Zeichenfläche dargestellt werden können.