Published
Edited
Sep 30, 2022
3 stars
Also listed in…
Math
Teaching Calculus
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Generate the 2D contour pic
pic = {
let pic = contour_plot(
([x, y]) => G(x, y),
[
[-4, 4],
[-4, 4]
],
d3.range(-2, 1.4, 0.2),
{ w: width / 2, h: width / 2 }
);

// Uncomment to enable the addition of points via a button click
// d3.select(pic).on("click", function (evt) {
// let [x, y] = d3.pointer(evt);
// d3.select(pic).append("circle").attr("cx", x).attr("cy", y).attr("r", 5);
// });
return pic;
}
Insert cell
// Generate the 3D surface pic
pic3d = show_x3d(
[create_surface((x, y) => [x, y, G(x, y)], [-4, 4], [-4, 4])],
{
width: width / 2,
height: width / 2,
viewpoint: {
position: "-2.579465266379039 -9.28945264093612 8.260884817754016",
orientation:
"0.9621638548880421 -0.1636946287319893 -0.21781823815116785,0.8810948099150814"
}
}
)
Insert cell
Insert cell
// The function as a sum of kinda like Gaussians
G = (x, y) => d3.sum(gs.map((g, n) => (-1) ** n * g(x, y)))
Insert cell
// The kinda like Gaussian functions
gs = (reset,
d3
.range(6)
.map(() =>
g(
d3.randomUniform(-2.5, 2.5)(),
d3.randomUniform(-2.5, 2.5)(),
d3.randomUniform(0.5, 1)()
)
))
Insert cell
// The fundamental function, which is kinda like a gaussian
function g(a, b, s) {
return (x, y) => Math.exp(-((x - a) ** 2 + (y - b) ** 2) / s ** 2);
}
Insert cell
Insert cell
import { contour_plot } from "@mcmcclur/contour-plots"
Insert cell
import { show_x3d, create_surface, style } from "@mcmcclur/plotx3d"
Insert cell
style
Insert cell
// This version is clickable. I use it to add some points so I can
// ask my students questions about those points.
{
let pic = contour_plot(
([x, y]) => G(x, y),
[
[-4, 4],
[-4, 4]
],
d3.range(-2.04, 1.4, 0.2),
{ w: width / 2, h: width / 2 }
);

// Uncomment to enable the addition of points via a button click
d3.select(pic).on("click", function (evt) {
let [x, y] = d3.pointer(evt);
d3.select(pic).append("circle").attr("cx", x).attr("cy", y).attr("r", 5);
});
return pic;
}
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