| 3D
Mesh 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:800"></div>
3. Script-Teil
starten, in dem die Traces mit den Datenwerten zusammengestellt werden
<script>
var trace1 = {
x: spectralCentroid_array,
y: attackTime_array,
z: roughness_array,
mode: 'markers',
type: 'scatter3d',
marker: {symbol: 'circle', size: 5, color: 'rgb(188, 48, 47)', opacity:
0.8,
line: {color: 'rgb(0, 0, 0)', width: 1}},
text: pitch_array,
};
var trace2 = {
x: spectralCentroid_array,
y: attackTime_array,
z: roughness_array,
type: 'mesh3d',
alphahull: -3,
opacity:0.3,
color:'rgb(188, 48, 47)',
text: pitch_array,
};
4. Alle Traces
im Array data zusammenführen:
var data = [ trace1,
trace2];
5. Layout
bestimmen:
var layout = {
height: 800,
showlegend: false,
scene: {
xaxis: {
type: 'linear',
zeroline: true,
title: 'Spectral Centroid [Hz]',
reversescale: true,
},
yaxis: {
type: 'linear',
zeroline: true,
title: 'Einschwingzeit [ms]',
reversescale: true,
range: [ 0, 0.03 ],
},
zaxis: {
type: 'log',
zeroline: true,
title: 'Rauhigkeit',
reversescale: true,
},
},
title: 'Spectral Centroid, Einschwingvorgang und Rauhigkeit der Lukeme',
};
6. Daten
und Layout zusammenführen, im oben definierten Bereich ausplotten
und Script-Teil beenden:
Plotly.newPlot('AnzeigeDiv',
data, layout);
</script>
|