HTML5 und Javascript: Daten visualisieren mit Plotly.JS

Mit Plotly lassen sich relativ unkompliziert Daten in allen möglichen Darstellungsarten visualisieren.

 

z.B. Klangdaten einzelner Musikinstrumente:
Glasflöte, Glastrompete, Glasplattenklavier, Glasharmonika (Pedal), Glasharmonika (Motor), Verrophon

Timbre Features: Formanten, Spectral Centroids, dynamische Klangfarbenfelder

Registergrenzen: Flöte, Oboe, Klarinette, Fagott

Messwerte an Inkubatoren: Innerhalb und außerhalb des Inkubators, Pegel in dB(A), Pegel in dB(SPL)

u.v.a.m.: Raumakustische Daten , Glockenklänge , Taubengurren, HipHop: Produzenten vs, Interpreten , Klangfarbe-Farbe-Synästhesie

Im Vergleich zu anderen Daten-Visualisierungs-Libraries ist Plotly die mit Abstand vielseitigste Library mit einer großen Community.

Sobald man sich die aktuelle Plotly-Library unter
https://cdn.plot.ly/plotly-latest.min.js
heruntergeladen hat, kann man direkt loslegen:

Zunächst legt man die heruntergeladene Datei (plotly-latest.min.js) in einen Ordner (z.B. mit dem Namen "header"), in dem sich auch die Datei mit den darzustellenden Daten befinden sollte. Hier wäre dies z.B. die Datei lukeme_array.js , die aus Signalanalysen der Lukeme-Klänge in Excel hervorgegangen ist (lukeme.xls).

 

 

 

Vorbereitung

Um Daten aus einer Excel-Datei in Javascript-Arrays umzuwandeln, die dann in Plotly angezeigt werden sollen, bieten sich ein bzw. zwei Schritte an:

  • 1. (optional): z-Transformation: Wenn in den Daten verschiedene Zahlen-Skalen gleichzeitig verwendet werden (z.B. 0-120 dB und 0-22000 Hz), bietet sich die z-Transformation an, um die Daten als Kurven vergleichen zu können. die z-transformierten Zahlen geben unabhängig von ihrer ursprünglichen Einheit/Skalierung an, wie viele Standardabweichungen ein Wert vom Mittelwert abweicht. Hierdurch werden sie vergleichbar.
    Um die Werte in einer Excel-Datei zu z-Transformieren bietet sich der SInES z-Transformer an: Laden Sie hier Ihre Excel- oder CSV-Datei hoch und nach dem Klick auf "Download *.xlsx File" können Sie das z-transformierte Excel-File herunterladen.

  • 2. Umwandlung in Javascript Arrays: egal ob z-transformiert oder normal: Laden Sie Ihre Excel- oder CSV-Datei in den Excel/CSV to JS Array Converter hoch und klicken Sie auf "Download *.js File" um das konvertierte Javascript mit den zu Plotly passenden Listen (Arrays) herunterzuladen.

 

 

 

Grundlegender Aufbau von Plotly-Visualisierungen

Sobald die Daten in dieser Art vorbereitet sind, kann man beide Dateien über das Script-Tag in eine html-Datei einbinden. Der typische Aufbau einer html-Datei mit der eingebundenen Plotly-Library und den eingebundenen vorbereiteten Daten-Arrays sähe dann folgendermaßen aus:

<html>

<head>
<script src="header/plotly-latest.min.js"></script>
<script src="header/lukeme_array.js"></script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<!--(hier kommt dann der im Browser sichtbare Inhalt hin) -->
</body>

</html>

 

Zwischen die beiden Body-Tags ( <body bgcolor="#FFFFFF" text="#000000"> und </body> ) kommen dann 5 Abschnitte, die je nach Darstellungsart teilweise anders gefüllt werden:

 

1. Ein durch DIV-Tags festgelegter Bereich mit einem Namen (hier "AnzeigeDiv") mit den Pixelmaßen für die Weite und Höhe der Darstellung (hier style="width:800,height:800"), in dem die Visualisierung angezeigt werden soll.

<div id="AnzeigeDiv" style="width:800,height:800"></div>


2. Ab hier beginnt ein Script-Teil (zwischen <script> und </script>), in dem alles Weitere geregelt wird. Zunächst werden die Daten und die Art der Darstellung in einzelnen "Traces" zusammengestellt, z.B.

var trace1 = {
x: pitch_array, // X-Achse: Array mit Tonhöhen der Lukeme aus lukeme_array.js
y: attackTime_array, //Y-Achse: Array mit Einschiwingzeiten der Lukeme aus lukeme_array.js
type: 'bar', // Darstellung in Balkengrafiken
name: 'Einschwingzeit', // Bezeichnung der Balken
text: pitch_array, // Namen der Werte: Array mit den Tonhöhennamen aus lukeme_array.js
};

var trace2 = {
x: pitch_array, // X-Achse: Array mit Tonhöhen der Lukeme aus lukeme_array.js
y: releaseTime_array, // Y-Achse: Array mit Ausklingzeiten der Lukeme aus lukeme_array.js
type: 'bar', // Darstellung in Balkengrafiken
name: 'Ausklingzeit', // Bezeichnung der Balken
text: pitch_array, // Namen der Werte: Array mit den Tonhöhennamen aus lukeme_array.js
};

Es können hier beliebig viele Traces angelegt werden, die auch beliebig gestaltet werden können (Farben, Transparenz, Punkte, Linien, Schriftarten etc.)


3. Alle Traces werden dann in einem Array namens "data" zusammengefasst:

var data = [ trace1, trace2];


4. Danach wird das Layout bestimmt, z.B.:

var layout = {
showlegend: true, // Legende für die einzelnen Kurven/Punkte an rechter Seite anzeigen
barmode: 'stack', //Balken werden übereinandergestapelt angezeigt
xaxis: {
title: 'Grundtonhöhen', // Titel der X-Achse
},
yaxis: {
title: 'Dauern [sec]', // Titel der Y-Achse
},
legend: { // Gestaltung der Legende
font: { family: 'Verdana, sans-serif', size: 10, color: 'black', }
},
title: 'Einschwing- und Ausklingzeiten der Lukeme', // Gesamttitel
};


5. Schließlich werden mit Plotly.newPlot(); alle Traces (data) und das Layout (layout) zusammengeführt und im oben definierten Bereich (AnzeigeDiv, s.o. unter 1.) zur Darstellung gebracht:

Plotly.newPlot('AnzeigeDiv', data, layout);

Nach diesem Schema laufen so ziemlich alle Darstellungsarten innerhalb von Plotly ab.

 

Für Daten aus der (systematischen) Musikwissenschaft sind folgende Darstellungsarten besonders spannend:

Zweidimensionale Darstellungen:

Drei- und mehrdimensionale Darstellungen: