Public
Edited
Jan 27, 2023
2 forks
4 stars
Also listed in…
PlotX3D
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
helix_anim = {
let d = 1 / 128;
let pts = d3
.range(0, 1 + d, d)
.map((t) => [cos(8 * pi * t), sin(8 * pi * t), 10 * t - 5]);
let anim = show_x3d(
[
create_indexedLineSet([pts]),
create_sphere([1, 0, 0], 0.08, { id: "point" })
],
{
width: w,
height: h,
extent: [
[-1.3, 1.3],
[-1.3, 1.3],
[-4, 4]
]
}
);

return anim;
}
Insert cell
linear_anim = {
let d = 1 / 32;
let anim = show_x3d([create_sphere([0, 0, 0], 0.08, { id: "point" })], {
width: w,
height: h,
extent: [
[-1.3, 1.3],
[-1.3, 1.3],
[-4, 4]
]
});

return anim;
}
Insert cell
circular_anim = {
let d = 1 / 32;
let pts = d3
.range(0, 1 + d, d)
.map((t) => [cos(2 * pi * t), sin(2 * pi * t), 0]);
let anim = show_x3d(
[
create_indexedLineSet([pts]),
create_sphere([1, 0, 0], 0.08, { id: "point" })
],
{
width: w,
height: h,
extent: [
[-1.3, 1.3],
[-1.3, 1.3],
[-4, 4]
]
}
);

return anim;
}
Insert cell
Insert cell
run = {
let t = (now % 2000) / 2000;
d3.select(circular_anim)
.select("transform#point")
.select("transform")
.attr("translation", `${cos(8 * pi * t)},${sin(8 * pi * t)},0`);
d3.select(linear_anim)
.select("transform#point")
.select("transform")
.attr("translation", `0,0,${10 * t - 5}`);
d3.select(helix_anim)
.select("transform#point")
.select("transform")
.attr("translation", `${cos(8 * pi * t)},${sin(8 * pi * t)},${10 * t - 5}`);
}
Insert cell
w = d3.min([200, 0.32 * width])
Insert cell
h = 4 * w
Insert cell
Insert cell
pi = Math.PI
Insert cell
sin = Math.sin
Insert cell
cos = Math.cos
Insert cell
import {
show_x3d,
create_indexedLineSet,
create_sphere
} from "@mcmcclur/plotx3d"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more