3d Scatter Plot + Plan + Marker Colors

plotly.js
1

Hi,

I have a problem, can you help me please ?
I draw a 3d Scatter Plot + Plan + Marker Colors in python and I want to draw the same in javascript
Hereunder my data and the result of the plot in python, can tou please give me the code to do the same in javascript ?

x:[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5]

y:[0.19, 0.21, 0.22, 0.22, 0.23, 0.23, 0.24, 0.24, 0.24, 0.25, 0.27, 0.28, 0.28, 0.29, 0.31, 0.61, 0.24, 0.19, 0.21, 0.22, 0.22, 0.23, 0.23, 0.24, 0.24, 0.24, 0.25, 0.27, 0.28, 0.28, 0.29, 0.31, 0.61, 0.29, 0.19, 0.21, 0.22, 0.22, 0.23, 0.23, 0.24, 0.24, 0.24, 0.25, 0.27, 0.28, 0.28, 0.29, 0.31, 0.61, 0.78, 0.19, 0.21, 0.22, 0.22, 0.23, 0.23, 0.24, 0.24, 0.24, 0.25, 0.27, 0.28, 0.28, 0.29, 0.31, 0.61, 0.24, 0.19, 0.21, 0.22, 0.22, 0.23, 0.23, 0.24, 0.24, 0.24, 0.25, 0.27, 0.28, 0.28, 0.29, 0.31, 0.61, 0.24]

z:[-1.92, -1.16, -0.78, -0.78, -0.41, -0.41, -0.04, -0.04, -0.04, 0.33, 1.04, 1.33, 1.33, 1.54, 1.83, 2.18, -0.06, -3.18, -2.51, -2.18, -2.18, -1.86, -1.86, -1.54, -1.54, -1.54, -1.22, -0.59, -0.28, -0.28, 0.03, 0.63, 2.18, -0.06, -6.29, -5.9, -5.7, -5.7, -5.51, -5.51, -5.31, -5.31, -5.31, -5.12, -4.74, -4.55, -4.55, -4.36, -3.98, 0.99, 1.75, -1.9, -1.13, -0.76, -0.76, -0.38, -0.38, -0.01, -0.01, -0.01, 0.35, 1.06, 1.32, 1.32, 1.51, 1.73, 1.91, -0.04, -1.92, -1.16, -0.78, -0.78, -0.41, -0.41, -0.04, -0.04, -0.04, 0.33, 1.04, 1.33, 1.33, 1.54, 1.83, 2.18, -0.06]

color:[axa, naoassur, cardifle, afi, suravenir_digital, metlife, selectemprunteur2, premium, first-emprunteur, iriade, generali7305D, alptis, generali7270ci, acceo7319D, utwin, metlife-enova, accenture, axa, naoassur, cardifle, afi, suravenir_digital, metlife, selectemprunteur2, premium, first-emprunteur, iriade, generali7305D, alptis, generali7270ci, acceo7319D, utwin, metlife-enova, accenture, axa, naoassur, cardifle, afi, suravenir_digital, metlife, selectemprunteur2, premium, first-emprunteur, iriade, generali7305D, alptis, generali7270ci, acceo7319D, utwin, metlife-enova, accenture, axa, naoassur, cardifle, afi, suravenir_digital, metlife, selectemprunteur2, premium, first-emprunteur, iriade, generali7305D, alptis, generali7270ci, acceo7319D, utwin, metlife-enova, accenture, axa, naoassur, cardifle, afi, suravenir_digital, metlife, selectemprunteur2, premium, first-emprunteur, iriade, generali7305D, alptis, generali7270ci, acceo7319D, utwin, metlife-enova, accenture]

x=‘SCENARIO’,
y=‘PRIX’,
z=‘RATIO_CSM_SCR’,
color=‘ASSUREUR’

The plan is at z = 0

image

Thanks you all for your help

2

image
image938×489 55.4 KB

3

var data= ;
var x=[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5];

var y= [0.19, 0.21, 0.22, 0.22, 0.23, 0.23, 0.24, 0.24, 0.24, 0.25, 0.27, 0.28, 0.28, 0.29, 0.31, 0.61, 0.24, 0.19, 0.21, 0.22, 0.22, 0.23, 0.23, 0.24, 0.24, 0.24, 0.25, 0.27, 0.28, 0.28, 0.29, 0.31, 0.61, 0.29, 0.19, 0.21, 0.22, 0.22, 0.23, 0.23, 0.24, 0.24, 0.24, 0.25, 0.27, 0.28, 0.28, 0.29, 0.31, 0.61, 0.78, 0.19, 0.21, 0.22, 0.22, 0.23, 0.23, 0.24, 0.24, 0.24, 0.25, 0.27, 0.28, 0.28, 0.29, 0.31, 0.61, 0.24, 0.19, 0.21, 0.22, 0.22, 0.23, 0.23, 0.24, 0.24, 0.24, 0.25, 0.27, 0.28, 0.28, 0.29, 0.31, 0.61, 0.24];

var z= [-1.92, -1.16, -0.78, -0.78, -0.41, -0.41, -0.04, -0.04, -0.04, 0.33, 1.04, 1.33, 1.33, 1.54, 1.83, 2.18, -0.06, -3.18, -2.51, -2.18, -2.18, -1.86, -1.86, -1.54, -1.54, -1.54, -1.22, -0.59, -0.28, -0.28, 0.03, 0.63, 2.18, -0.06, -6.29, -5.9, -5.7, -5.7, -5.51, -5.51, -5.31, -5.31, -5.31, -5.12, -4.74, -4.55, -4.55, -4.36, -3.98, 0.99, 1.75, -1.9, -1.13, -0.76, -0.76, -0.38, -0.38, -0.01, -0.01, -0.01, 0.35, 1.06, 1.32, 1.32, 1.51, 1.73, 1.91, -0.04, -1.92, -1.16, -0.78, -0.78, -0.41, -0.41, -0.04, -0.04, -0.04, 0.33, 1.04, 1.33, 1.33, 1.54, 1.83, 2.18, -0.06];

var color =[“axa”, “naoassur”, “cardifle”, “afi”, “suravenir_digital”," metlife", “selectemprunteur2”, “premium”, “first-emprunteur”, “iriade”, “generali7305D”, “alptis”, “generali7270ci”, “acceo7319D”, “utwin”, “metlife-enova”, “accenture”, “axa”, “naoassur”, “cardifle”, “afi”, “suravenir_digital”, “metlife”, “selectemprunteur2”, “premium”, “first-emprunteur”, “iriade”, “generali7305D”, “alptis”, “generali7270ci”, “acceo7319D”, “utwin”, “metlife-enova”, “accenture”, “axa”, “naoassur”, “cardifle”, “afi”, “suravenir_digital”, “metlife”, “selectemprunteur2”, “premium”, “first-emprunteur”, “iriade”, “generali7305D”, “alptis”, “generali7270ci”, “acceo7319D”, “utwin”, “metlife-enova”, “accenture”, “axa”, “naoassur”, “cardifle”, “afi”, “suravenir_digital”, “metlife”, “selectemprunteur2”, “premium”, “first-emprunteur”, “iriade”, “generali7305D”, “alptis”, “generali7270ci”, “acceo7319D”, “utwin”, “metlife-enova”, “accenture”, “axa”, “naoassur”, “cardifle”, “afi”, “suravenir_digital”, “metlife”, “selectemprunteur2”, “premium”, “first-emprunteur”, “iriade”, “generali7305D”, “alptis”, “generali7270ci”, “acceo7319D”, “utwin”, “metlife-enova”, “accenture”];

function getAllIndexes(arr, val) {
var indexes = , i = -1;
while ((i = arr.indexOf(val, i+1)) != -1){
indexes.push(i);
}
return indexes;
}
const unique = (value, index, self) => {
return self.indexOf(value) === index
}

var uniques = color.filter(unique);

for (let i=0; i<uniques.length; i++){
var index= getAllIndexes(color,uniques[i]);
var tempx=;
var tempy=;
var tempz=;
for (let i=0; i<index.length; i++){
tempx.push(x[index[i]]);
tempy.push(y[index[i]]);
tempz.push(z[index[i]]);

}

data.push({
x:tempx, y:tempy, z:tempz,

    mode: 'markers',
    name: uniques[i],
    marker: {
    size: 12,
    line: {
    color: 'rgba(217, 217, 217, 0.14)',
    width: 0.5},
    opacity: 0.8},
    type: 'scatter3d'
   });

}
var z_data=;
for(i=0;i<10;i++){
z_data.push(0);
}
data.push({
z:[z_data,z_data],

    colorscale:"YlOrRd",
    opacity:0.25,

    showscale: false,
   
    type: 'surface'
   });

var layout = {

scene: {
xaxis:{title: ‘SCENARIO’,backgroundcolor: “rgb(242, 242, 242))”,
gridcolor: “rgb(255, 255, 255)”,
showbackground: true,
zerolinecolor: “rgb(255, 255, 255)”,
crosshair: {
enabled: true,
label: “SCENARIO”,
}},
yaxis:{title: ‘PRIX’,backgroundcolor: “rgb(242, 242, 242))”,
gridcolor: “rgb(255, 255, 255)”,
showbackground: true,
zerolinecolor: “rgb(255, 255, 255)”,},
zaxis:{title: ‘RATIO_CSM_SCR’,backgroundcolor: “rgb(242, 242, 242))”,
gridcolor: “rgb(255, 255, 255)”,
showbackground: true,
zerolinecolor: “rgb(255, 255, 255)”,},
},

margin: {
l: 0,
r: 0,
b: 0,
t: 0
}};
Plotly.newPlot(‘myDiv’, data, layout);

4

import plotly.express as px
import pandas as pd
import plotly.graph_objects as go
import numpy as np

fig = px.scatter_3d(df, x=‘SCENARIO’, y=‘PRIX’, z=‘RATIO_CSM_SCR’, color=‘ASSUREUR’)

bright_pink = [[0, ‘#FF007F’], [1, ‘#FF007F’]]

zero_pt = pd.Series([0])
z = zero_pt.append(df[‘RATIO_CSM_SCR’], ignore_index = True).reset_index(drop = True)
y = zero_pt.append(df[‘PRIX’], ignore_index = True).reset_index(drop = True)
x = zero_pt.append(df[‘SCENARIO’], ignore_index = True).reset_index(drop = True)

length_data = len(z)
z_plane_pos = 0*np.ones((length_data,length_data))

fig.add_trace(go.Surface(x=x, y=y, z=z_plane_pos, colorscale=bright_pink, showscale=False,opacity=0.25)) #light_yellow