plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

3D Surface Lighting in plotly.js

How to customize lighting for 3D surface charts.

Plotly.d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

var z_data = [ ];
for(i=0;i<100;i++)
{
  z_data.push(unpack(rows,i));
}

var data = [{
  z: z_data,
  type: 'surface',
  colorscale: 'Viridis',
  lighting: {ambient: 0.9}
  },
   {
  z: z_data,
  type: 'surface',
  scene: 'scene2',
  colorscale:'Viridis',
  lighting: {ambient: 0.2}
  }
];

var layout = {
  title: 'Ambient Lighting',
  grid: {
    rows: 1,
    columns: 2,
    pattern: 'independent',
  },
  	scene:{
		aspectmode:'cube',
		domain:{row:0, column:0}
	},
	scene2:{
		aspectmode:'cube',
		domain:{row:0, column:1}
  }
};
Plotly.newPlot('myDiv', data, layout);
});
  
Plotly.d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

var z_data = [];
for(i=0;i<100;i++)
{
  z_data.push(unpack(rows,i));
}

var data = [{
  z: z_data,
  type: 'surface',
  colorscale:'Viridis',
  lighting: {roughness: 0.9}
        },
   {
  z: z_data,
  type: 'surface',
  scene: 'scene2',
  colorscale:'Viridis',
  lighting: {roughness: 0.2}
  }
];

var layout = {
  title: 'Roughness',
  grid: {
    rows: 1,
    columns: 2,
    pattern: 'independent',
  },
  	scene:{
		aspectmode:'cube',
		domain:{row:0, column:0}
	},
	scene2:{
		aspectmode:'cube',
		domain:{row:0, column:1}
  }
};
Plotly.newPlot('myDiv', data, layout);
});
  
Plotly.d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

var z_data = []
for(i=0;i<100;i++)
{
  z_data.push(unpack(rows,i));
}

var data = [{
  z: z_data,
  type: 'surface',
  colorscale:'Viridis',
  lighting: {diffuse: 0.9}
        },
   {
  z: z_data,
  type: 'surface',
  scene: 'scene2',
  colorscale:'Viridis',
  lighting: {diffuse: 0.1}
  }
];

var layout = {
  title: 'Diffuse Reflection',
  grid: {
    rows: 1,
    columns: 2,
    pattern: 'independent',
  },
  	scene:{
		aspectmode:'cube',
		domain:{row:0, column:0}
	},
	scene2:{
		aspectmode:'cube',
		domain:{row:0, column:1}
  }
};
Plotly.newPlot('myDiv', data, layout);
});
  
Plotly.d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

var z_data = [];
for(i=0;i<100;i++)
{
  z_data.push(unpack(rows,i));
}

var data = [{
  z: z_data,
  type: 'surface',
  colorscale:'Viridis',
  lighting: {specular: 0.1}
        },
   {
  z: z_data,
  type: 'surface',
  scene: 'scene2',
  colorscale:'Viridis',
  lighting: {specular: 2}
  }
];

var layout = {
  title: 'Specular Reflection',
  grid: {
    rows: 1,
    columns: 2,
    pattern: 'independent',
  },
  	scene:{
		aspectmode:'cube',
		domain:{row:0, column:0}
	},
	scene2:{
		aspectmode:'cube',
		domain:{row:0, column:1}
  },
};
Plotly.newPlot('myDiv', data, layout);
});
  
Plotly.d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

var z_data = [];
for(i=0;i<100;i++)
{
  z_data.push(unpack(rows,i));
}

var data = [{
  z: z_data,
  type: 'surface',
  colorscale:'Viridis',
  lighting: {fresnel: 0.1}
        },
   {
  z: z_data,
  type: 'surface',
  scene: 'scene2',
  colorscale:'Viridis',
  lighting: {fresnel: 5}
  }
];

var layout = {
  title: 'Fresnel',
  grid: {
    rows: 1,
    columns: 2,
    pattern: 'independent',
  },
  	scene:{
		aspectmode:'cube',
		domain:{row:0, column:0}
	},
	scene2:{
		aspectmode:'cube',
		domain:{row:0, column:1}
  }
};
Plotly.newPlot('myDiv', data, layout);
});
  

plotly.js runs on all SVG-compatible browsers

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.