Public
Edited
Jan 18, 2024
math_uncentered = {
let svg = d3.create('svg')
.attr('viewBox', `0 0 ${width} 200`)
let 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'
}
]
svg.selectAll('g.pretty-math')
.data(somemath)
.join('g')
.attr('class', 'pretty-math')
.attr('transform', d => `translate(${d.x}, ${d.y})`)
.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')
.nodes()
.map(node => node.getBBox())
.map(bb => ({
x: bb.x,
y: bb.y,
width: bb.width,
height: bb.height
}))
{
let bbox_data = d3.select(math_uncentered)
.selectAll('g.pretty-math')
.nodes()
.map(node => node.getBBox())
.map(bb => ({
x: bb.x,
y: bb.y,
width: bb.width,
height: bb.height
}))
d3.select(math_uncentered)
.selectAll('g.pretty-math')
.data(bbox_data)
.join()
.attr('transform', d => `translate(${d.x-0.5*d.width},${d.y-0.5*d.height})`)
return d3.select(math_uncentered).node().cloneNode(true)
}
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.
