Colorway in JavaScript

How to use colorway to set default trace colors in JavaScript with Plotly.


Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

function linspace(a,b,n) {
  return d3.range(n).map(function(i){return a+i*(b-a)/(n-1);});
}

const parabolaGen = (a, b) =>
  x => x*x*a + b;

var as = linspace(1, 3, 7);
var bs = linspace(2, 14, 7);
var x = linspace(-1, 3, 50);
var data = [];

for (i=0; i< as.length; i++ ){
  data.push({
    type: "scatter",
    mode: "lines",
    x: x,
    y: x.map(parabolaGen(as[i],bs[i]))
  })
}

var layout = {
  colorway : ['#f3cec9', '#e7a4b6', '#cd7eaf', '#a262a9', '#6f4d96', '#3d3b72', '#182844']
};

Plotly.newPlot('myDiv', data, layout);
</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"function linspace(a,b,n) {\n return d3.range(n).map(function(i){return a+i*(b-a)/(n-1);});\n}\n\nconst parabolaGen = (a, b) =>\n x => x*x*a + b;\n\nvar as = linspace(1, 3, 7);\nvar bs = linspace(2, 14, 7);\nvar x = linspace(-1, 3, 50);\nvar data = [];\n\nfor (i=0; i< as.length; i++ ){\n data.push({\n type: \"scatter\",\n mode: \"lines\",\n x: x,\n y: x.map(parabolaGen(as[i],bs[i]))\n })\n}\n\nvar layout = {\n colorway : ['#f3cec9', '#e7a4b6', '#cd7eaf', '#a262a9', '#6f4d96', '#3d3b72', '#182844']\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">