3D Scatter Plots in JavaScript

How to make 3D scatter plots in javascript.


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

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv', function(err, rows){
function unpack(rows, key) {
	return rows.map(function(row)
	{ return row[key]; });}

var trace1 = {
	x:unpack(rows, 'x1'), y: unpack(rows, 'y1'), z: unpack(rows, 'z1'),
	mode: 'markers',
	marker: {
		size: 12,
		line: {
		color: 'rgba(217, 217, 217, 0.14)',
		width: 0.5},
		opacity: 0.8},
	type: 'scatter3d'
};

var trace2 = {
	x:unpack(rows, 'x2'), y: unpack(rows, 'y2'), z: unpack(rows, 'z2'),
	mode: 'markers',
	marker: {
		color: 'rgb(127, 127, 127)',
		size: 12,
		symbol: 'circle',
		line: {
		color: 'rgb(204, 204, 204)',
		width: 1},
		opacity: 0.8},
	type: 'scatter3d'};

var data = [trace1, trace2];
var layout = {margin: {
	l: 0,
	r: 0,
	b: 0,
	t: 0
  }};
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":"d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv', function(err, rows){\nfunction unpack(rows, key) {\n\treturn rows.map(function(row)\n\t{ return row[key]; });}\n\nvar trace1 = {\n\tx:unpack(rows, 'x1'), y: unpack(rows, 'y1'), z: unpack(rows, 'z1'),\n\tmode: 'markers',\n\tmarker: {\n\t\tsize: 12,\n\t\tline: {\n\t\tcolor: 'rgba(217, 217, 217, 0.14)',\n\t\twidth: 0.5},\n\t\topacity: 0.8},\n\ttype: 'scatter3d'\n};\n\nvar trace2 = {\n\tx:unpack(rows, 'x2'), y: unpack(rows, 'y2'), z: unpack(rows, 'z2'),\n\tmode: 'markers',\n\tmarker: {\n\t\tcolor: 'rgb(127, 127, 127)',\n\t\tsize: 12,\n\t\tsymbol: 'circle',\n\t\tline: {\n\t\tcolor: 'rgb(204, 204, 204)',\n\t\twidth: 1},\n\t\topacity: 0.8},\n\ttype: 'scatter3d'};\n\nvar data = [trace1, trace2];\nvar layout = {margin: {\n\tl: 0,\n\tr: 0,\n\tb: 0,\n\tt: 0\n }};\nPlotly.newPlot('myDiv', data, layout);\n});\n"}">