I am a Computer Scientist and Musician by training. A writer with interests in Philosophy, Economics, Technology, Politics, Business, the Arts and Fiction.
md`# SVG Utils`
d3 = require("d3@5")
import { range } from '@nuuuwan/list-utils'
import { addDefaults } from '@nuuuwan/option-utils'
function drawPathD(svg, d, options) {
options = addDefaults(options, DEFAULT_STYLE);
svg
.append('path')
.attr('d', d)
.attr('fill', options.fill)
.attr('stroke', options.stroke)
.attr('stroke-width', options.strokeWidth);
}
function drawMultiText(svg, [x, y], text, options = {}) {
options = addDefaults(options, DEFAULT_STYLE);
options = addDefaults(options, {
maxCharsPerLine: 30,
lineSpacing: 1
});
const lineList = text.split(' ').reduce(function(lineList, word) {
if (lineList.length === 0) {
lineList = [word];
} else if (
lineList[lineList.length - 1].length + word.length + 1 <=
options.maxCharsPerLine
) {
lineList[lineList.length - 1] += ' ' + word;
} else {
lineList.push([word]);
}
return lineList;
}, []);
const n = lineList.length;
lineList.forEach(function(line, i) {
const y1 = y + options.fontSize * options.lineSpacing * (i - (n - 1) / 2);
drawText(svg, [x, y1], line, options);
});
}
{
const svg = getSVG();
const TEXT =
'The boy stood on the burning deck. Whence all but him had fled; The flame that lit the battle\'s wreck. Shone round him o\'er the dead.';
drawMultiText(svg, [200, 200], TEXT);
drawText(svg, [600, 200], TEXT);
return svg.node();
}
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.
