Wise Fool.
Visioneer.
Public
Edited
Feb 27, 2024
Importers
Also listed in…
Visual Design
pad =
(primer) =>
(lightness) =>
{
const µ = (n = 1) => 40 * n;
const wide = 16;
const tall = 9;
const width = µ(wide);
const height = width / wide * tall;
const xmid = width / 2;
const ymid = height / 2;
const w = width;
const h = w / 2;
const q = w / 4;
const r = w / 6;
const pad = sheet(width, height, primer);
pad
.append("text")
.text(primer)
.attr("fill", contrast(primer))
.attr("x", h)
.attr("y", h / 5)
;
const dot = ((pad) => (x, light) => {
const fill = lighten(primer)(light);
pad
.append("circle")
.attr("fill", fill)
.attr("r", r)
.attr("cx", x)
.attr("cy", ymid)
;
pad
.append("text")
.text(fill.formatHex())
.attr("fill", contrast(fill))
.attr("alignment-baseline", "middle")
.attr("x", x)
.attr("y", ymid)
;
})(pad)
dot(1 * q, -lightness);
dot(3 * q, +lightness);
// pad.append("path").attr("d", `M0 ${ymid}H${width}`).attr("stroke", "grey"); // guide
return pad.node();
}
lined =
(primer) =>
(lightness) =>
{
const µ = (n = 1) => 40 * n;
const wide = 16;
const tall = 9;
const width = µ(wide);
const height = width / wide * tall;
const xmid = width / 2;
const ymid = height / 2;
const w = width;
const h = w / 2;
const pad = sheet(width, height, primer);
pad
.append("path")
.attr("d", d3.range(height / µ()).map(l => `M0 ${µ(l)}H${width}`))
.attr("stroke", lighten(primer)(lightness))
;
return pad.node();
}
sheet = (w, h, primer) => d3
.create("svg")
.style("background-color", primer)
.attr("width", w)
.attr("height", h)
.attr("text-anchor", "middle")
.style("font-family", "monospace")
// .style("font-size", "smaller")
;
lighten = (
primer =>
light =>
R.pipe(
d3.lch,
({h, c, l}) => d3.lch(l + light, c, h)
)
(primer)
)
lighten(primer)(lightness)
contrast = R.pipe(
luminance,
blackOrWhite
)
luminance = R.pipe(
d3.rgb,
rgb_lrgb,
lrgb_luminance,
)
luminance(primer)
blackOrWhite = (luminance) => luminance >= 1/2 ? "black" : "white"
R.pipe(
luminance,
blackOrWhite,
)
(primer)
R = require("ramda")
import {lrgb_luminance, rgb_lrgb} from "@mbostock/wcag-contrast-ratio"
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.
