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
Jun 24, 2024
2 forks
63 stars
Overlay KaTeX on top of an SVGD3-Graphviz with MathJaxFractal typesettingSVG and MathJax 3
Plot for mathematicians
Plot.line(
[
[0, 0],
[1, 0],
[1, 1],
[0, 1]
],
{
fill: "#ddd",
stroke: "black",
strokeWidth: 2
}
).plot()
Plot.plot({
x: {
domain: [0, 1.2],
ticks: [0.25, 0.5, 0.75],
tickFormat: ".2s"
},
y: { domain: [0, 1.2], ticks: 5 },
width: 640,
height: 640,
marks: [
Plot.line(
[
[0, 0],
[1, 0],
[1, 1],
[0, 1],
[0, 0]
],
{
fill: "lightgray",
stroke: "black",
strokeWidth: 2
}
),
Plot.text([{ x: 0.5, y: 0.9, text: "An actual square" }], {
x: "x",
y: "y",
text: "text",
fontSize: 18
}),
// Add the axes
Plot.ruleX([0]),
Plot.ruleY([0])
]
})
Plot.plot({
width: 640,
height: 200,
y: { domain: [-0.01, 1.05] },
marks: [
Plot.line(
build_samples((x) => Math.exp(-x * x), -2.8, 2.8),
{
strokeWidth: 3,
stroke: "steelblue"
}
),
Plot.dot(
[
[1 / Math.sqrt(2), Math.exp(-1 / 2)],
[-1 / Math.sqrt(2), Math.exp(-1 / 2)]
],
{ fill: "black", r: 5 }
),
Plot.ruleX([0]),
Plot.ruleY([0]),
Plot.axisY({ x: 0 })
]
})
{
let w = 800;
let h = 0.625 * w;
let samples = build_samples(
(x) => (x == 0 ? 0 : x * Math.cos(1 / x)),
-1,
1,
{
N: 150
}
);
let plot = Plot.plot({
width: w,
height: h,
marks: [
Plot.line(samples, {
strokeWidth: 1,
stroke: "steelblue"
}),
Plot.ruleX([0]),
Plot.ruleY([0]),
Plot.axisX({ y: 0 }),
Plot.axisY({ x: 0 })
]
});
return plot;
}
// This control is named a; anytime we refer to a in our code, we get the value of the slider
viewof a = Inputs.range([-4, 4], { value: 1, step: 0.001, label: tex`a:` })
{
// The function that we are sampling is sin(a * x), where the symbol a
// refers to the valu of the slider below.
let samples = build_samples((x) => Math.sin(a * x), -3, 3, {
N: 5 * Math.ceil(Math.abs(a))
});
let w = 900;
let h = 0.3 * w;
let plot = Plot.plot({
y: { domain: [-1.1, 1.1] },
width: w,
height: h,
marks: [
Plot.line(samples, {
strokeWidth: 3,
stroke: "steelblue"
}),
Plot.ruleX([0]),
Plot.ruleY([0]),
Plot.axisX({ y: 0 }),
Plot.axisY({ x: 0 })
]
});
return plot;
}
Plot.plot({
x: { domain: [-1.1, 1.1] },
y: { domain: [-1.1, 1.1] },
width: 640,
height: 640,
marks: [
Plot.line(
// Use d3.range to generate a list of t values and then map an anonymous
// function over over that list to return the points to plot.
d3
.range(0, 2 * Math.PI + Math.PI / (50 * N), Math.PI / (50 * N))
.map(t => [
Math.sin(N * t) * Math.cos(t),
Math.sin(N * t) * Math.sin(t)
])
),
Plot.ruleX([-1.1]),
Plot.ruleY([-1.1])
]
})
{
let w = 640;
let h = w;
let plot = Plot.plot({
width: w,
height: h,
x: { ticks: false },
y: { ticks: false },
marks: [
Plot.line(
[[0, 0]]
.concat(
d3
.range(0, Math.PI / 2 + Math.PI / 200, Math.PI / 200)
.map((t) => [Math.cos(t), Math.sin(t)])
)
.concat([[0, 0]]),
{ fill: "lightgray", stroke: "black" }
),
() => svg`
<g transform="translate(${w / 3} ${h / 2}) scale(3)">
${MathJax.tex2svg(String.raw`A = \frac{1}{4} \pi \, r^2`).querySelector(
"svg"
)}
</g>`
]
});
return plot;
}
import { build_samples } from '@mcmcclur/adaptive-plotter'
MathJax = require("https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js").catch(
() => window["MathJax"]
)
MathJax.tex2svg(String.raw`A = \frac{1}{4} \pi \, r^2`).querySelector("svg")
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.
