Normalize SVG elements to paths / Toph Tucker

Public

Edited

Dec 11, 2023

Importers

Plot: Quantitative groups Plot: Coloring lines in wide untidy data Table with links Click a button to add to an array Plot: Stacked bars with totals Plot: Click handler render transform Sending notifications every week, two weeks, month, etc.See full stack trace with queueMicrotask

Normalize SVG elements to paths

Custom table, click to select row Plot: Bar chart with label overlay Cells, streaming, and side effects Notes to self on error handling Masking special names Recursive Plot subtitles Timing-safe and and or Plot: Simple render transform Fetch CSV from private GitHub repo GeoJSON table The two kinds of Plot width Could Plot.auto make the Simpsons cell heatmap? #1672 Plot: Dual axis line chart Import from past version Facet wrap Convert Plot.auto to explicit marks Play button and mutation Interactive Plot legend Rects in a table Average line in faceted plot Horizontal inputs Use Inputs.form with a template Fetch a local file from a notebook Convert JavaScript to Observable JavaScript How to respect version locking in an embedded notebook Update method on DOM node Hello, AG Grid Beware d3.select on Observable Re-run cell when checkbox is clicked How to fix Plot facet labels getting cut off Get JavaScript array from Markdown list Inputs.select: Chaining and defaulting to no filter Table with serif font Setting path length as CSS property variable with D3 Read in CSV, define values as undefined/null Using a mutable cell to log stuff Combining Inputs with internal interactivity in a chart Drag (SVG), with scale Give a user a persistent personal key for a notebook Setting @mootari/range-slider from another input Synchronized slider and dropdown XML to radio button options Filter dates from JSON Surprising colors in Plot Vega-Lite, JSON and JavaScript API Use a different render function depending on width Transition from previous value to new value Don’t use ordinal scales for dates Format years stored as numbers without commas in Plot Differences between htl.html and htl.html.fragment Scrubber await visibility Differences between html and htl.html Wolfram embed demo Re: Get multiple properties from the same object in one array of unique values D3 Tube Map Re: How to access data object from a nested array Synchronized checkboxes Group all rows by school_type, count and create a percentage of the total Debug HTML cells Make an array of Plots How to compose generators

Also listed in…

Utilities

svg = htl.svg`<svg style="background: #eeccee;" fill="none" stroke="black">

</svg>`

normalized = normalize(svg)

normalized.outerHTML.replaceAll("<path", "\n <path").replace("</svg>", "\n</svg>")

normalize = svg => {

const node = svg.cloneNode(); // shallow, just to get top-level attributes

for (const polyline of svg.querySelectorAll("polyline")) {

// really similar; just put an M in front of the points

node.appendChild(htl.svg`<path d="M ${polyline.getAttribute("points")}" />`);

}

for (const polygon of svg.querySelectorAll("polygon")) {

// just put an M before and a Z after!

node.appendChild(htl.svg`<path d="M ${polygon.getAttribute("points")} Z" />`);

}

for (const line of svg.querySelectorAll("line")) {

// just bundle up x1,y1 and x2,y2 into an array! the d attribute doesn’t really care about comma between coordinates

const points = ["x1", "y1", "x2", "y2"].map(attr => line.getAttribute(attr));

node.appendChild(htl.svg`<path d="M ${points}" />`);

}

for (const rect of svg.querySelectorAll("rect")) {

// over, down, across, down, back across, up

const [x, y, width, height] = ["x", "y", "width", "height"].map(attr => rect.getAttribute(attr));

node.appendChild(htl.svg`<path d="M ${x} ${y} h ${width} v ${height} h ${-width} z" />`);

}

for (const circle of svg.querySelectorAll("circle")) {

// tricky because drawing an arc from a point to itself collapses to nothing; we draw half a circle across and half a circle back

const [cx, cy, r] = ["cx", "cy", "r"].map(attr => circle.getAttribute(attr));

const x1 = cx - r, y1 = cy;

node.appendChild(htl.svg`<path d="M ${x1} ${y1} a ${r} ${r} 0 1 1 ${2 * r} 0 ${r} ${r} 0 1 1 ${-2 * r} 0 Z" />`);

}

for (const path of svg.querySelectorAll("path")) {

// almost forgot to pass these through too. note im stripping out all other attributes and styles bc that's my use case rn

node.appendChild(htl.svg`<path d="${path.getAttribute("d")}" />`)

}

return 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.

Learn more