3. Script-Teil starten, in dem die Traces mit den Datenwerten zusammengestellt werden

var trace2 = {
x: zeit_array,
y: hautleitwert_vpn1_array,
mode: 'lines',
type: 'scatter',
name: 'Hautleitwert Vpn1',
text: hautleitwert_vpn1_array,
};

var trace3 = {
x: zeit_array,
y: hautleitwert_vpn2_array,
mode: 'lines',
type: 'scatter',
name: 'Hautleitwert Vpn2',
text: hautleitwert_vpn2_array,
};

var layout = {
showlegend: true,
xaxis: {
title: 'Zeit (Samples)',
},
yaxis: {
title: 'Anteil',
},
legend: {
font: { family: 'Verdana, sans-serif', size: 10, color: 'black', }
},
title: 'Hautleitwert zweier Versuchspersonen',
};

6. Daten und Layout zusammenführen, im oben definierten Bereich ausplotten und Script-Teil beenden:

Synchronisierung der dargestellten Werte mit Werten auf einer anderen Zeitskala

Stammen die Werte aus unterschiedlichen Quellen mit unterschiedlichen Sampleraten bzw. mit unterschiedlicher (z.B. zeitlicher) Auflösung (z.B. vom Nexus10MKII und vom Valence-Arousal-Script), dann muss eine Zeitskala (und die mit dieser zusammenhängenden Werte) an die andere angeglichen werden.

Hierzu errechnet man in einem Script im Header der Seite zunächst einen Faktor (z.B. zeitfaktor), mit dem die Anzahl der Elemente des einen Arrays (zeit_va_array.length) multipliziert werden müssen, um der Anzahl der Elemente des anderen Arrays (zeit_array.length) zu entsprechen,

Dann legt man leere Arrays an, in die dann die zeitlich angepassten Werte jeweils hineingeschrieben werden sollen z.B.:

// Arrays für die zeitlich angepassten Werte anlegen
var Valence_angepasst_vpn1_array =[];
var Valence_angepasst_vpn2_array =[];
var Arousal_angepasst_vpn1_array =[];
var Arousal_angepasst_vpn2_array =[];

Mit einer Schleife ( (i=0; i<zeit_array.length; i++){ ... } ) errechnet man für jedes Element des Arrays, das man als zeitlichen Maßstab verwendet (hier: zeit_array), das in der Position dazu passende Element im neuen, angepassten Array. Die Position wird in Arrays über den Index gezählt (von 0 bis zur maximalen Länge des Arrays zeit_array.length). Der neue Index muss eine ganze Zahl sein, weswegen der für jede Position errechnete Wert (i*zeitfaktor) über Math.round() gerundet wird. Aus den Original-Arrays (z.B. Valence_vpn1_array) wird dann der über den indexzeiger ermittelte Wert ausgelesen und via .push() in das neue Array (z.B: Valence_angepasst_vpn1_array) eingefügt und das Script im Header abgeschlossen:

// zeitliche angepasste Werte in die neuen Arrays schreiben
for (i=0; i<zeit_array.length; i++){
indexzeiger = Math.round(i*zeitfaktor);
Valence_angepasst_vpn1_array.push(Valence_vpn1_array[indexzeiger]);
Valence_angepasst_vpn2_array.push(Valence_vpn2_array[indexzeiger]);
Arousal_angepasst_vpn1_array.push(Arousal_vpn1_array[indexzeiger]);
Arousal_angepasst_vpn2_array.push(Arousal_vpn2_array[indexzeiger]);
}
</script>

Im Plotly-Script fügt man die hinzukommenden Kurven (traces) unter den schon vorhandenen traces mit den entsprechenden Arrays hinzu (und zählt die Nummer der Traces entsprechend weiter) ...

var trace4 = {
x: zeit_array,
y: Valence_angepasst_vpn1_array,
mode: 'lines',
type: 'scatter',
name: 'Valence Vpn1',
text: Valence_angepasst_vpn1_array,
};

var trace5 = {
x: zeit_array,
y: Valence_angepasst_vpn2_array,
mode: 'lines',
type: 'scatter',
name: 'Valence Vpn2',
text: Valence_angepasst_vpn2_array,
};

var trace6 = {
x: zeit_array,
y: Arousal_angepasst_vpn1_array,
mode: 'lines',
type: 'scatter',
name: 'Arousal Vpn1',
text: Arousal_angepasst_vpn1_array,
};

var trace7 = {
x: zeit_array,
y: Arousal_angepasst_vpn2_array,
mode: 'lines',
type: 'scatter',
name: 'Arousal Vpn2',
text: Arousal_angepasst_vpn2_array,
};

und erweitert die Kurvensammlung (data) entsprechend um die neu hinzugekommenen Kurven:

var data = [ trace1, trace2, trace3, trace4, trace5, trace6, trace7 ];

Will man die Werte mit ihren Audiodateien verbinden (z.B. Fara Effect: Fate), so legt man alle Audio-Dateien in einen Ordner (z.B. "klang"), welcher wiederum am gleichen Ort liegt wie die jeweilige html-Datei. In der Datei legt man gleich nach dem <body>-Tag einen unsichtbaren Audioplayer mit der entsprechenden Klangquelle an und gibt ihm einen Namen (z.B. "myaudio"):

Danach legt man in den <head>-Bereich zwei Funktionen an, die das Starten und Stoppen des Audio-Players regeln sollen, und denen man später via (id) die jeweilige Position in der Audiodatei übergibt:

function stopAudio() {
myPlayer = document.getElementById('myaudio');
myPlayer.pause();
}
</script>

Schließlich ermittelt man mit folgender Funktion am Ende des Plotly-Scripts, welcher Positionswert (indexNumber) aus welcher Kurve (indexTrace) bei einem Mouse-Over (plotly_hover) vorliegt und errechnet dann via ...

... Array-Länge (zeit_physio_array.length) durch Dauer des Klangbeispiels (document.getElementById('myaudio').duration) einen Faktor (audiofaktor), durch den der Positionswert (indexNummer) geteilt werden muss, um von der Position im Graphen auf die Position innerhalb der Audiodatei schließen zu können.
Für ein Mouse-Out (plotly_unhover) ruft man danach die Stopfunktion des Players auf:

myPlot = document.getElementById('AnzeigeDiv');
myPlot.on('plotly_hover', function(data){
var infotext = data.points.map(function(d){
indexTrace = d.curveNumber;
indexNummer = d.pointNumber;
});

audiofaktor = zeit_physio_array.length / document.getElementById('myaudio').duration;
audiostart = indexNummer/audiofaktor;
playAudio(audiostart);
})
.on('plotly_unhover', function(data){
stopAudio();
});