Published
Edited
Oct 2, 2019
Insert cell
Insert cell
sourceHtmlText = "x<sub>0</sub><sup>2</sup> + y<sub>0</sub><sup>2</sup> = 1";
Insert cell
tspanObject = htmlTextToTspanObject(sourceHtmlText)
Insert cell
svgObject = tspanObjectToSvgObject(tspanObject)
Insert cell
Insert cell
htmlTextToTspanObject = (source) => {
return tspan.parse(source);
}
Insert cell
tspanObjectToSvgObject = (source, width = 400, height = 100, x = 20, y = 20, fontSize = 16) => {
var clone = Array.from(source);
clone.unshift('text', {'x': x, 'y': y, 'font-size': fontSize});
var target = ['svg', {
'viewBox': `0 0 ${width} ${height}`,
'width': width, 'height': height,
'xmlns': 'http://www.w3.org/2000/svg'
}, clone];
return target;
}
Insert cell
Insert cell
tspan = require('tspan@0.3.6/build/tspan.js')
Insert cell
onml = require('onml@1.1.0/build/onml.js')
Insert cell

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.
Learn more