{
// given my svg path
const path = svg`<path id='max-path' d="${maxspath}">`
// gonna shove that in group with the path inside
// might be overkill - whatever
let group = svg`<g stroke=#000a fill=#fffa>`;
let view = svg`<svg viewBox="-20 -20 400 200" width=600>
<g stroke=#0af4 stroke-width=20 fill=none>${path}</g>
<g stroke=#000a fill=#fffa>`;
// we can use this function to get a single point on the length of our path
const point = path.getPointAtLength(700);
// and this function is how you get the length of the entire path
const length = path.getTotalLength();
// okay game plan!
// instead of get ONE point, lets loop through our path to get like 1000 points
// and store all of their x-y coords
// then we can make a polygon out of them!!
// number of points we want to sample
const sampleCount = 1000;
// make a polygon and append it to our svg
let polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
view.appendChild(polygon)
// and now we can fill it with points using our path length
// and the number of samples
let points = [];
for (let i=0; i < sampleCount; i++) {
let pts = path.getPointAtLength(i * length / (sampleCount-1));
// points.push([pts.x, pts.y]);
polygon.points.appendItem(pts);
points.push()
}
console.log("points = ", points);
return view;
}
polygonSampledFromPath = (path,samples) => {
path = svg`<path d="${path}">`
var poly = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
var points = [];
var len = path.getTotalLength();
var step = step=len/samples;
for (var i=0;i<=len;i+=step){
var p = path.getPointAtLength(i);
points.push([p.x, p.y]);
}
return points
}
example = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
// create our polygon from the path
const polygon = polygonSampledFromPath(maxspath, 1000)
svg
.append('path')
// using our polygon as data
.data([polygon])
.attr('stroke', 'black')
.attr('fill', 'none')
// I think this is going to make a path out of our polygon
// taking us 360!
.attr('d', d => d3.line()(d));
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.
