Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Published
Edited
Aug 31, 2020
1 fork
Importers
11 stars
// Compute corners of a quad
function getCorners(len, dist) {
const getOffset = d => (Math.random() - 1) * d;
let c1 = { x: getOffset(dist), y: getOffset(dist) };
let c2 = { x: c1.x + len + getOffset(dist), y: c1.y + getOffset(dist) };
let c3 = { x: c2.x + getOffset(dist), y: c2.y + len + getOffset(dist) };
let c4 = { x: c3.x - len - getOffset(dist), y: c3.y + getOffset(dist) };
return [c1, c2, c3, c4];
}
// Render a single shape
function renderQuad(
corners = [
{ x: 0, y: 0 },
{ x: 100, y: 0 },
{ x: 100, y: 100 },
{ x: 0, y: 100 }
]
) {
const [c1, c2, c3, c4] = corners;
return svg`<path style="fill:none; stroke: black; strokeWidth: 1px;"
d="${`M ${c1.x} ${c1.y}
L ${c2.x} ${c2.y}
L ${c3.x} ${c3.y}
L ${c4.x} ${c4.y}
Z`}"
/>`;
}
// Render all of the quads in a "cell" (a single position in the grid)
function renderQuadGroup(
pos = { x: 100, y: 100 }, // Position within the svg
quads = 5, // Number of (overlapping) shapes to render
dist = 3, // The random distortion to apply to the length of each shape
len = 30 // The length of each side
) {
return svg`<g transform="translate(${pos.x}, ${pos.y})">
${_.range(quads + 1).map(d => {
return renderQuad(getCorners(len, dist));
})}`;
}
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.
