Web developer and autodidact with an interest in creative coding.
Public
Edited
Mar 16
Paused
1 star
Plot.plot({axis: false, height: 200, padding: 0, margin: 1, marks: [
// Highlight each column on hover
Plot.barY("ABCD", Plot.pointerX({x: d => d, fill: "orange", maxRadius: Infinity})),
Plot.frame(),
Plot.dotX("ABCD", {r: 50, fill: d => d, href: d => `#${d}`, target: "_top"}),
Plot.text("ABCD", {x: d => d, fill: "white", fontSize: 50, pointerEvents: "none"})
]})
Plot.plot({axis: false, height: 200, padding: 0, margin: 1, marks: [
// Highlight each column on hover
Plot.barY("ABCD", Plot.pointerX({x: d => d, fill: "orange", maxRadius: Infinity})),
Plot.frame(),
groupMarks([
Plot.dotX("ABCD", {r: 50, fill: d => d, href: d => `#${d}`, target: "_top"}),
Plot.text("ABCD", {x: d => d, fill: "white", fontSize: 50, pointerEvents: "none"}),
], {
// Prevent clicks on linked elements from pinning the pointerX selection above.
onpointerdown: e => e.stopPropagation(),
// Some additional attributes for show
stroke: "black",
"stroke-width": "6px",
"stroke-dasharray": "7, 7",
"stroke-linecap": "round",
"paint-order": "stroke",
})
]})
function groupMarks(marks, props = {}) {
const createElement = ({document: d, ownerSVGElement: o}, localName) => d.createElementNS(o.namespaceURI, localName);
// See https://github.com/observablehq/plot/blob/v0.6.17/src/plot.js#L383-L394
const markify = m => m.render ? m : Object.assign(new Plot.Mark(), {render: m});
const setProps = (el, props) => {
for(const [k, v] of Object.entries(props)) typeof v === "function" ? el[k] = v : el.setAttribute(k, v);
return el;
};
let g;
const renderGroup = (i, s, v, d, c) => g = setProps(createElement(c, "g"), props);
const patch = m => {
const render = m.render;
return Object.assign(m, {render(...args) { g.append(render.apply(this, args)) }});
};
return [renderGroup, ...marks.flat().map(markify).map(patch)];
}
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.
