I'm trying to render a scatter point from Iris dataset with Plotly.js the same way Plotly does.
Consider this very straightforward code :
import plotly.express as px
df = px.data.iris()
features = ["sepal_width", "sepal_length", "petal_width", "petal_length"]
fig = px.scatter_matrix(
df,
dimensions=features,
color="species"
)
fig.update_traces(diagonal_visible=False)
fig.show()
How to render that cleanly in JavaScript ?
Here is what I tried :
... do stuff before ...
const data: Data[] = []
const labels: string[] = getLabelsFromSomewhere()
// --- hacky method using a color mapping
const labelsUnique = _.uniq(labels)
const colors = ['red', 'blue', 'yellow', 'green'] // should be longer than `labelsUnique` but not checked
const colorsMap = labels.map((label) => {
return colors[labelsUnique.indexOf(label)]
})
data.push({
type: 'scattergl',
mode: 'markers',
x: getDataFromSomewhere()[0],
y: getDataFromSomewhere()[0],
marker: {
color: colorsMap,
},
})
... do stuff after ...