Published
Edited
Oct 24, 2019
Importers
html`<svg viewBox="0 0 ${width} 40">${geo_markers(20, 4, "#faf", "#000", 1)}</svg>`
geo_markers = function(w, pad, fill, stroke, lw){
let arr = [];
let dxy = w-pad;
let n = width/w | 0;
for (let i=0; i<n-1; i++) {
let pth = `<path fill="${fill}" stroke="${stroke}" lineWidth=${lw} d="M${(i+1)*w-w/2},${w/2+lw} a${dxy/2} ${dxy/2} 0 0 1 ${dxy} 0
l-${dxy/3} ${dxy/1.5} a${dxy/2-dxy/3} ${dxy/2-dxy/3} 0 0 1 -${2*(dxy/2-dxy/3)} 0
z" />`;
arr.push(pth);
arr.push(`<circle fill="${stroke}" stroke="${fill}" lineWidth=${lw} cx="${(i+1)*w-w/2+dxy/2}" cy="${w/2}" r="${dxy/4}"/>`);
}
return arr.join("\n");
}
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.
