Box Plot

1.  Im Header das Plotly-Script (plotly-latest.min.js) und die Array-Definitionen (lukeme_array.js) einbinden:

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

2. Im Body einen Bereich festlegen, in dem die Daten visualisiert werden:

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

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

<script>
var trace1 = {
y: brightness_array,
type: 'box' ,
boxpoints: 'all',
jitter: 0.3,
pointpos: -1.8,
boxmean: 'sd',
name: 'Helligkeit',
};

var trace2 = {
y: inharmonicity_array,
type: 'box' ,
boxpoints: 'all',
jitter: 0.3,
pointpos: -1.8,
boxmean: 'sd',
name: 'Inharmonizität',
};

var trace3 = {
y: partial1RelativeStrength_array,
type: 'box' ,
boxpoints: 'all',
jitter: 0.3,
pointpos: -1.8,
boxmean: 'sd',
name: 'Stärke des ersten Teiltons',
};

var trace4 = {
y: tonalEnergy_array,
type: 'box' ,
boxpoints: 'all',
jitter: 0.3,
pointpos: -1.8,
boxmean: 'sd',
name: 'Klanghaltigkeit',
};

4. Alle Traces im Array data zusammenführen:

var data = [ trace1, trace2, trace3, trace4];

5. Layout bestimmen:

var layout = {
showlegend: true,
xaxis: {
title: 'Klangeigenschaften',
},
yaxis: {
title: 'Anteil',
},
legend: {
font: { family: 'Verdana, sans-serif', size: 10, color: 'black', }
},
title: 'Inharmonizität, Helligkeit, Grundtonstärke und Klanghaltigkeit der Lukeme',
};

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

Plotly.newPlot('AnzeigeDiv', data, layout);
</script>