Software developer and power user
import {checkbox, radio, select, slider} from "@jashkenas/inputs"
// import {icons} from "@nikita-sharov/observable-icons" // taken down by Observable
icons = {
const icons = {};
const optionsBackup = await FileAttachment("options.json").json();
for (const options of optionsBackup) {
icons[options.name] = new Icon(options);
}
return icons;
}
class Icon {
constructor(options) {
this.name = options.name;
this.descriptors = options.descriptors;
this.attributes = { ...DEFAULT_ATTRIBUTES, ...options.attributes };
this.innerHTML = options.innerHTML;
}
toSVG(attributes = {}) {
const mergedAttributes = { ...this.attributes, ...attributes };
return `<svg ${toString(mergedAttributes)}>${this.innerHTML}</svg>`
}
}
DEFAULT_ATTRIBUTES = ({
viewBox: "0 0 16 16",
width: 16,
height: 16,
fill: "none"
})
toString = (attributes) =>
Object.keys(attributes)
.map(key => `${key}="${attributes[key]}"`)
.join(" ");
toString(DEFAULT_ATTRIBUTES)
grid = (colCount, rowCount, cellLength) => {
const width = colCount * cellLength;
const height = rowCount * cellLength;
const magicOffset = 0.5; // see: https://stackoverflow.com/a/61013292
const className = (tick, sideLength) => {
if ((tick === magicOffset) || (tick === (sideLength + magicOffset))) {
return "outer-grid-line";
} else {
return "inner-grid-line";
}
}
const verticalLine = (x) =>
`<line class="${className(x, width)}" x1="${x}" y1="${magicOffset}" x2="${x}" y2="${height + magicOffset}" />`;
const horizontalLine = (y) =>
`<line class="${className(y, height)}" x1="${magicOffset}" y1="${y}" x2="${width + magicOffset}" y2="${y}" />`;
let grid = "";
for (let row = 0; row <= rowCount; row++) {
const tick = (row * cellLength) + magicOffset;
grid += horizontalLine(tick);
}
for (let col = 0; col <= colCount; col++) {
const tick = (col * cellLength) + magicOffset;
grid += verticalLine(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.
