plotly.scatter5.App.js

import Plot from 'react-plotly.js';

const layoutObj = {
  title: 'Color Dimensions',
  width: 800,
  height: 600,
  legend: {
    orientation: 'h',
  },
  dragmode: 'select',
};

const dataArray = [
  {
    // trace 0
    type: 'scatter',
    y: [6, 6, 6, 6, 6, 6],
    mode: 'markers',
    marker: {
      color: 'red',
      size: 40,
    },
  },
  {
    // trace 1
    type: 'scatter',
    y: [5, 5, 5, 5, 5, 5],
    mode: 'markers',
    marker: {
      colorscale: [
        [0, 'green'],
        [1, 'blue'],
      ],
      color: [1, 11, 21, 31, 41, 51],
      size: 40,
    },
  },
  {
    // trace 2
    type: 'scatter',
    y: [4, 4, 4, 4, 4, 4],
    mode: 'markers',
    marker: {
      color: [1, 11, 21, 31, 41, 51],
      cmin: 1,
      cmax: 100,
      size: 40,
    },
  },
  {
    // trace 3
    type: 'scatter',
    y: [3, 3, 3, 3, 3, 3],
    mode: 'markers',
    marker: {
      color: [1, 11, 21, 31, 41, 51],
      cmid: 20,
      size: 40,
    },
  },
  {
    // trace 4
    type: 'scatter',
    y: [2, 2, 2, 2, 2, 2],
    mode: 'markers',
    marker: {
      color: [1, 11, 21, 31, 41, 51],
      colorscale: 'Greens',
      size: 40,
    },
  },
  {
    // trace 5
    type: 'scatter',
    y: [1, 1, 1, 1, 1, 1],
    mode: 'markers',
    marker: {
      color: [1, 11, 21, 31, 41, 51],
      colorscale: 'YlOrRd',
      size: 40,
    },
  },
  {
    type: 'scatter',
    y: [0, 0, 0, 0, 0, 0],
    mode: 'markers',
    marker: {
      color: [1, 11, 21, 31, 41, 51],
      colorscale: 'Jet',
      size: 40,
      colorbar: {
        title: 'y = 0',
      },
    },
  },
];

const configObj = {
  displayModeBar: true,
  displaylogo: false,
};

const handleSelected = (selected) => {
  console.log(selected);
};

function App() {
  return (
    <Plot layout={layoutObj} data={dataArray} config={configObj} onSelected={handleSelected} />
  );
}

export default App;