Software developer and power user
Also listed in…
Interactivity
feather = require("feather-icons")
icon = (sideLength) => {
const options = {
"width": sideLength,
"height": sideLength,
"stroke": "black",
"stroke-width": strokeWidth,
"stroke-opacity": strokeOpacity,
"stroke-linecap": strokeLinecap,
"stroke-linejoin": strokeLinejoin
};
return feather.icons[iconSelect].toSvg(options);
}
grid = (sideLength, cellLength) => {
const magicOffset = 0.5; // see: https://stackoverflow.com/a/61013292
const className = (tick) => {
if ((tick === magicOffset) || (tick === (sideLength + magicOffset))) {
return "outer-grid-line";
} else {
return "inner-grid-line";
}
}
const verticalLine = (x) =>
`<line class="${className(x)}" x1="${x}" y1="${magicOffset}" x2="${x}" y2="${sideLength + magicOffset}" />`;
const horizontalLine = (y) =>
`<line class="${className(y)}" x1="${magicOffset}" y1="${y}" x2="${sideLength + magicOffset}" y2="${y}" />`;
let grid = "";
for (let tick = magicOffset; tick <= (sideLength + magicOffset); tick += cellLength) {
grid += verticalLine(tick);
grid += horizontalLine(tick);
}
return grid;
}
html`<style>
.outer-grid-line {
stroke: #767676;
}
.inspector:hover .outer-grid-line {
stroke: #4f4f4f;
}
.inner-grid-line {
stroke: #e8e8e9;
}
</style>`
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.
