Plotly.js equivalent to Plotly automatic color mapping

Viewed 82

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 ...
0 Answers
Related