Published
Edited
Jan 28, 2020
3 forks
2 stars
{
const svg = document.querySelectorAll('#input-svg')
return html`<div id="output-svg">
${svg[0].value}
</div>`
}
{
const paths = document.querySelectorAll('#output-svg svg path')
// const paths = svg.children
const polylines = []
console.log(paths)
for (let i=0; i<paths.length; i++) {
const totalLength = paths[i].getTotalLength();
const samples = 100
polylines[i] = []
for (let j=1; j<samples; j++) {
polylines[i].push(
{
x: paths[i].getPointAtLength(totalLength/j).x,
y: paths[i].getPointAtLength(totalLength/j).y
}
)
}
}
return html`
<h2>Run this to get your polyline</h2>
<p>Increase samples to get more definition</p>
<textarea name="paragraph_text" cols="50" rows="50">${JSON.stringify(polylines, null, 2)}</textarea>`
}
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.
