Public
Edited
Jun 17, 2023
{
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
const tip = {x:30+width/2, y:height/11};
const central = `M${width/2},${height-10}Q${-width/12+width/2} ${height-height/4},${tip.x} ${tip.y}`;
const centralProperties = new svgPathProperties.svgPathProperties(central);
const leafBase = centralProperties.getPointAtLength(centralProperties.getTotalLength()/10);
svg.append("path").attr("d", central).attr("fill","none").attr("stroke","black");
const left = `M${leafBase.x},${leafBase.y}C${leafBase.x - width/4} ${leafBase.y + 100} ${tip.x - 350} ${tip.y + 250} ${tip.x} ${tip.y} C${tip.x + 350} ${tip.y + 250} ${leafBase.x + width/4} ${leafBase.y + 100} ${leafBase.x} ${leafBase.y}`;
svg.append("path").attr("d", left).attr("fill","none").attr("stroke","black");
const leftProperties = new svgPathProperties.svgPathProperties(left);
const frac = 2/10;
const centralPoint = centralProperties.getPointAtLength(frac * centralProperties.getTotalLength());
const leftPoint = leftProperties.getPointAtLength(frac * leftProperties.getTotalLength());
svg.append("path").attr("d", `M${centralPoint.x},${centralPoint.y}L${leftPoint.x},${leftPoint.y}`).attr("fill","none").attr("stroke","red");
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.
