The avatar for @bchoatejr
bchoatejr
Published
Edited
Oct 24, 2019
Importers
UI
TablesRange StylesForm with Safe Local StorageChart with AxisGrids
horizontal section breaks
SVG SpritesheetsForms
Also listed in…
graphics
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`<svg viewBox="0 0 ${width} 40">${geo_markers(20, 4, "#faf", "#000", 1)}</svg>`
Insert cell
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");
}
Insert cell
Insert cell

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