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
Jan 20, 2024
2 stars
math_uncentered = {
let svg = d3
.create("svg")
.attr("viewBox", `0 0 ${width} 200`)
.attr("overflow", "visible");
let pretty_math = svg
.selectAll("g.pretty-math")
.data(somemath)
.join("g")
.attr("class", "pretty-math")
.attr("transform", (d) => `translate(${d.x}, ${d.y})`);
pretty_math.append((d) =>
MathJax.tex2svg(String.raw`${d.latex}`).querySelector("svg")
);
svg
.selectAll("circle")
.data(somemath)
.join("circle")
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y)
.attr("fill", "black")
.attr("r", "4");
return svg.node();
}
d3
.select(math_uncentered)
.selectAll("g.pretty-math")
.each(function (d) {
let bbox = this.getBBox();
d3.select(this).attr(
"transform",
`translate(${d.x - bbox.width / 2} ${d.y - bbox.height / 2})`
);
})
{
let svg = d3
.create("svg")
.attr("viewBox", `0 0 ${width} 200`)
.attr("overflow", "visible");
let pretty_math = svg
.selectAll("g.pretty-math")
.data(somemath)
.join("g")
.attr("class", "pretty-math")
.attr("transform", (d) => `translate(${d.x}, ${d.y})`);
pretty_math.append((d) =>
MathJax.tex2svg(String.raw`${d.latex}`).querySelector("svg")
);
svg
.selectAll("circle")
.data(somemath)
.join("circle")
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y)
.attr("fill", "black")
.attr("r", "4");
yield svg.node();
pretty_math.each(function (d) {
let bbox = this.getBBox();
d3.select(this).attr(
"transform",
`translate(${d.x - bbox.width / 2} ${d.y - bbox.height / 2})`
);
});
}
somemath = [
{
x: 0.25 * width,
y: 20,
latex: "\\sum_{i=1}^\\infty \\frac{1}{n^2}"
},
{
x: 0.5 * width,
y: 75,
latex:
"\\frac{1}{\\sigma\\sqrt{2\\pi}}\\int_\\mu^{\\mu + 2\\sigma}\\exp\\left( -\\frac{1}{2}\\left[ \\frac{x-\\mu}{\\sigma} \\right]^2 \\right) dx"
},
{
x: 0.75 * width,
y: 175,
latex: "1+1=2"
}
]
MathJax = require("https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js").catch(
() => window["MathJax"]
)
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.
