Unlisted
Edited
Dec 7, 2022
{
const svg = d3.create('svg')
.attr('viewBox', `0 0 ${width} 300`)
const somemath = [
{
x: 0.25*width,
math: 'x'
},
{
x: 0.5*width,
math: 'x^3-6x^2+8x-2'
},
{
x: 0.75*width,
math: '\\sum_{i=0}^\\infty \\frac{1}{x_i^4}'
}
]
svg.selectAll('g.math')
.data(somemath)
.enter()
.append('g')
.attr('class', 'math')
.attr('transform', d => `translate(${d.x}, 150)`)
.append(d => MathJax.tex2svg(String.raw`${d.math}`).querySelector('svg'))
svg.selectAll('g.math')
.data(somemath)
.each(function(d,i){
console.log(this.getBBox())
})
return svg.node()
}
{
const svg = d3.create('svg')
.attr('viewBox', `0 0 ${width} 300`)
const somemath = [
{
x: 0.25*width,
math: 'x'
},
{
x: 0.5*width,
math: 'x^3-6x^2+8x-2'
},
{
x: 0.75*width,
math: '\\sum_{i=0}^\\infty \\frac{1}{x_i^4}'
}
]
svg.selectAll('g.math')
.data(somemath)
.enter()
.append('g')
.attr('class', 'math')
.attr('transform', d => `translate(${d.x}, 150)`)
.append(d => MathJax.tex2svg(String.raw`${d.math}`).querySelector('svg'))
svg.selectAll('g.math svg')
.data(somemath)
.each(function(d,i){
console.log(this.getBBox())
})
return svg.node()
}
{
const svg = d3.create('svg')
.attr('viewBox', `0 0 ${width} 300`)
const somemath = [
{
x: 0.25*width,
math: 'x'
},
{
x: 0.5*width,
math: 'x^3-6x^2+8x-2'
},
{
x: 0.75*width,
math: '\\sum_{i=0}^\\infty \\frac{1}{x_i^4}'
}
]
svg.selectAll('g.math')
.data(somemath)
.enter()
.append('g')
.attr('class', 'math')
.attr('transform', d => `translate(${d.x}, 150)`)
.append(d => MathJax.tex2svg(String.raw`${d.math}`).querySelector('svg'))
svg.selectAll('g.math svg g')
.data(somemath)
.each(function(d,i){
console.log(this.getBBox())
})
return svg.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.
