viewof svgFile = Inputs.file({
label: "SVG file",
accept: ".svg"
})
src = {
const src = await svgFile.text();
const root = svg`${src}`;
if (svg`${src}`.tagName == "svg") return src;
return root.getElementsByTagName("svg")[0].outerHTML;
}
{
const { group, setAttributes } = SVG;
const root = svg`${src}`;
const attrs = {
fill: "none",
stroke: "#000",
"stroke-linecap": "round",
"stroke-linejoin": "round"
};
setAttributes(root, { ...attrs, width, height: 400 });
yield root; // so that getBBox return actual data
const params = { kerning: -1.7, scale: [0.3, 0.4], weight: 1.8 };
const textNodes = root.getElementsByTagName("text");
for (const node of textNodes) {
const text = node.textContent;
const { x, y } = node.getBBox();
const gr = group([x, y + 8], str2polylines(text, params));
node.replaceWith(gr);
}
//while (true) {
const switchNodes = root.getElementsByTagName("switch");
//if (switchNodes.length == 0) break;
for (const node of switchNodes) {
const parent = node.parentNode;
const rect = parent.previousSibling;
if (rect?.tagName == "rect") {
const text = node.textContent;
const { x, y, width: w, height: h } = rect.getBBox();
const { x: xt, y: yt, width: wt, height: ht } = bounds(text, params);
const offset = [x + w / 2 - xt - wt / 2, y + h / 2 - yt - ht / 2 + 1.5];
const gr = group(offset, str2polylines(text, params));
node.replaceWith(gr);
} else node.remove();
}
//}
return zoomAndPanSvg(root);
}
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.
