3D Streamtube Plots in JavaScript
How to make 3D streamtube plots in javascript.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
In streamtube plots, attributes inlcude x
, y
, and z
, which set the coorindates of the vector field, and u
, v
, and w
, which sets the x, y, and z components of the vector field. Additionally, you can use starts
to determine the streamtube's starting position. Lastly, maxdisplayed
determines the maximum segments displayed in a streamtube.
d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/streamtube-basic.csv', function(err, rows){
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var data = [{
type: "streamtube",
x: unpack(rows, 'x'),
y: unpack(rows, 'y'),
z: unpack(rows, 'z'),
u: unpack(rows, 'u'),
v: unpack(rows, 'v'),
w: unpack(rows, 'w'),
sizeref: 0.5,
cmin: 0,
cmax: 3
}]
var layout = {
scene: {
camera: {
eye: {
x: -0.7243612458865182,
y: 1.9269804254717962,
z: 0.6704828299861716
}
}
}
}
Plotly.newPlot('myDiv', data, layout)
});
d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/streamtube-wind.csv', function(err, rows){
function unpack(rows, key) {
return rows.map(function(row) { return +row[key]; });
}
var data = [{
type: 'streamtube',
x: unpack(rows, 'x'),
y: unpack(rows, 'y'),
z: unpack(rows, 'z'),
u: unpack(rows, 'u'),
v: unpack(rows, 'v'),
w: unpack(rows, 'w'),
starts: {
x: Array(16).fill(80),
y: [20,30,40,50,20,30,40,50,20,30,40,50,20,30,40,50],
z: [0,0,0,0,5,5,5,5,10,10,10,10,15,15,15,15]
},
sizeref: 0.3,
colorscale: "Portland",
showscale: false,
maxdisplayed: 3000
}]
var layout = {
scene: {
aspectratio: {
x: 2,
y: 1,
z: 0.3
}
},
margin: {
t: 20,
b: 20,
l: 20,
r: 20
},
width: 600,
height: 400
}
Plotly.newPlot('myDiv', data, layout);
});
