I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
Public
Edited
Apr 6, 2023
2 forks
1 star
PlotX3DExamples of parametric surfacesDisks for a solid of revolutionShells for a solid of revolutionIntersecting cylindersNon-orientability of a Mobius stripNon-orientability of the Klein bottleThe xxx^xxx-spindlePlotX3D HyperboloidX3Dom primitivesParametric surfacesSpace curves and tubesHollow cylinderPlotX3D InteractionsUnderstanding X3D viewpointsX3Dom UtilitiesPartial derivativesA PlotX3D animationPolar CoordinatesDouble and iterated integralsLevel surfacesExamples of level surfacesA strange discontinuityTangent plane to a level surfaceUnfolding polyhedraFunctions of two variablesTracing a path on a sphereCooling of a sphereTurntable for PlotX3D (improved)BMWalker via PlotX3DThe Canted HelixAnimated HelixRauzy FractalsThe eleven unfoldings of the cube
Wavy spheres
Also listed in…
Forum responses
animation = {
let xy_pts = d3
.range(0, 7, 0.5)
.map((x) => d3.range(0, 7, 0.5).map((y) => [x, y]))
.flat();
let xy_grid = create_indexedLineSet(
d3
.range(0, 7, 0.5)
.map((x) => [
[x, 0, 0],
[x, 6.5, 0]
])
.concat(
d3.range(0, 7, 0.5).map((y) => [
[0, y, 0],
[6.5, y, 0]
])
)
);
let z_grid = create_indexedLineSet(
xy_pts.map(([x, y]) => [
[x, y, 0],
[x, y, 1]
]),
{ id: "z_grid", transparency: 0.5 }
);
let marks3d = [xy_grid, z_grid];
xy_pts.forEach(function ([x, y], i) {
marks3d.push(
create_sphere([x, y, 0], 0.1, {
class: `sphere`,
color: "steelblue"
})
);
});
return show_x3d(marks3d, {
width: 700,
height: 700,
extent: [
[-1, 6],
[-1, 6],
[-1, 6]
],
viewpoint: {
position: "11.628657817904852 13.980269669572518 11.404474735618637",
orientation:
"0.15661698617025535 0.4914328750222597 0.856717484933219,2.511923636033063"
}
});
}
transition = {
let f = (x, y) =>
2 * Math.sin(0.5 * x + now * 0.001) * Math.cos(0.5 * y + now * 0.001) + 4;
let transforms = d3
.select(animation)
.selectAll(".sphere")
.select("transform");
transforms.each(function () {
let [x, y, z] = this.getAttribute("translation").split(" ");
this.setAttribute("translation", `${x} ${y} ${f(x, y)}`);
});
let coord = d3.select(animation).select("#z_grid").select("coordinate");
let pt_string = coord.attr("point");
coord.attr(
"point",
pt_string
.split(",")
.map(function (s) {
let [x, y, z] = s.trim().split(" ").map(parseFloat);
let zz;
if (z < 0.1) {
zz = 0;
} else {
zz = f(x, y);
}
return [x, y, zz].join(" ");
})
.join(", ")
);
}
style_it = style
import {
show_x3d,
create_indexedLineSet,
create_sphere,
style
} from "@mcmcclur/plotx3d"
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.
