plotly.scatter4.App.js

import Plot from 'react-plotly.js';

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

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',
      },
    },
  },
];

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

export default App;