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.
MathJax.tex2svg(String.raw`\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}`)
{
let s = 400;
let d = 5;
let svg = d3
.create('svg')
.attr('width', s)
.attr('height', s);
let circle_group = svg
.append('g')
.attr('transform', `translate(${d + s / 4} ${d + s / 4})`);
circle_group
.append('circle')
.attr('r', s / 4)
.attr('fill', 'none')
.attr('stroke', 'black')
.attr('stroke-width', 3);
circle_group
.append('g')
.attr('transform', 'scale(3) translate(-10,-10)')
.append(() => MathJax.tex2svg(String.raw`\pi r^2`).querySelector("svg"));
let silly_integral = MathJax.tex2svg(
String.raw`\int_{-1}^1 \sqrt{1-x^2} \, dx = \frac{1}{2}\pi`
);
svg
.append('g')
.attr('transform', `translate(${s / 3} ${(3 * s) / 4}) scale(1.5)`)
.append(() => silly_integral.querySelector("svg"));
return svg.node();
}
{
let s = 400;
let d = 5;
let div = d3
.create('div')
.style('width', `${s}px`)
.style('height', `${s}px`);
let svg = div
.append('svg')
.attr('width', s)
.attr('height', s);
let circle_group = svg
.append('g')
.attr('transform', `translate(${d + s / 4} ${d + s / 4})`);
circle_group
.append('circle')
.attr('r', s / 4)
.attr('fill', 'none')
.attr('stroke', 'black')
.attr('stroke-width', 3);
circle_group
.append('g')
.attr('transform', 'scale(3) translate(-10,-10)')
.append(() => MathJax.tex2svg(String.raw`\pi r^2`).querySelector("svg"));
let silly_integral = MathJax.tex2svg(
String.raw`\int_{-1}^1 \sqrt{1-x^2} \, dx = \frac{1}{2}\pi`
);
svg
.append('g')
.attr('transform', `translate(${s / 3} ${(3 * s) / 4}) scale(1.5)`)
.append(() => silly_integral.querySelector("svg"));
return div.node();
}
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.
