plotto 0.0.0-stage → 0.3.0

package/src/theme.js

@@ -0,0 +1,93 @@
+// Theme: a style (colors, font) and a format (size, text size, line width) from theme.json, plus overrides.
+// Every style is merged over "pastel" (the default style), so a style lists only what it changes.
+import * as d3 from "d3";
+import THEMES from "../theme.json" with { type: "json" };
+
+export const STYLES = Object.keys(THEMES.styles);
+export const FORMATS = Object.keys(THEMES.formats);
+export const PALETTES = Object.keys(THEMES.palettes);
+export const SCHEMES = Object.keys(THEMES.schemes);
+const ROLES = ["ink", "muted", "grid", "tick", "strip", "accent", "background"];
+
+export function resolveTheme({ style = "pastel", format = "screen", legend = "right", ...overrides } = {}) {
+  if (!THEMES.styles[style]) throw new Error(`theme(): unknown style "${style}". Valid: ${STYLES.join(", ")}`);
+  if (!THEMES.formats[format]) throw new Error(`theme(): unknown format "${format}". Valid: ${FORMATS.join(", ")}`);
+  const base = THEMES.styles.pastel;
+  const s = THEMES.styles[style];
+  const f = THEMES.formats[format];
+  const fixed = overrides.width != null;
+  for (const k of Object.keys(overrides)) if (overrides[k] == null) delete overrides[k];
+  const theme = { ...base, ...s, colors: { ...base.colors, ...s.colors }, ...f, legend, ...overrides, style, format };
+  theme.reflow = f.reflow && !fixed;
+  // weight: the style's line and point scale (pastel colors need slightly thicker lines).
+  theme.line = f.line * (s.weight ?? base.weight ?? 1);
+  theme.point = f.point * Math.sqrt(s.weight ?? base.weight ?? 1);
+  // A set width fixes the size; the height follows the format aspect ratio unless it is set too.
+  // A set height alone keeps the reflow of the width and fixes the height.
+  if (overrides.width != null && overrides.height == null) theme.height = Math.round((overrides.width * f.height) / f.width);
+  theme.fixedHeight = overrides.height != null;
+  theme.palette = palette(theme, theme.palette);
+  return theme;
+}
+
+// The colors of a named palette (or of a list of colors), resolved against the theme tokens.
+export function palette(theme, name) {
+  const list = Array.isArray(name) ? name : THEMES.palettes[name];
+  if (!list) throw new Error(`color(): unknown palette "${name}". Valid: ${PALETTES.join(", ")}`);
+  return list.map((c) => colorOf(theme, c) ?? c);
+}
+
+// An interpolator t ∈ [0, 1] → color: a plotto scheme (theme.json), a d3 scheme name, or a list of colors.
+export function interpolator(theme, scheme) {
+  const resolve = (list) => d3.piecewise(d3.interpolateLab, list.map((c) => colorOf(theme, c) ?? c));
+  if (Array.isArray(scheme)) return resolve(scheme);
+  if (THEMES.schemes[scheme]) return resolve(THEMES.schemes[scheme]);
+  const fn = typeof scheme === "string" && d3[`interpolate${scheme[0].toUpperCase()}${scheme.slice(1)}`];
+  if (!fn) throw new Error(`color(): unknown scheme "${scheme}". plotto schemes: ${SCHEMES.join(", ")}; or a d3 scheme such as viridis, magma, blues`);
+  return fn;
+}
+
+// A color is a theme token ("blue", "muted", ...) or any CSS color. Returns undefined for anything else.
+export function colorOf(theme, value) {
+  if (typeof value !== "string") return undefined;
+  if (theme.colors[value]) return theme.colors[value];
+  if (ROLES.includes(value)) return theme[value];
+  return d3.color(value) ? value : undefined;
+}
+
+export function colorTokens(theme) {
+  return [...Object.keys(theme.colors), ...ROLES];
+}
+
+// Header colors of a hover box: the series color as background, with readable text.
+// Light colors get dark text; other colors get white text, on a background darkened until the contrast is at least 4.
+export function headerColors(color) {
+  const lum = (c) => {
+    const ch = [c.r, c.g, c.b].map((v) => {
+      v /= 255;
+      return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * ch[0] + 0.7152 * ch[1] + 0.0722 * ch[2];
+  };
+  const rgb = d3.rgb(color);
+  if (lum(rgb) > 0.42) return { bg: rgb.formatHex(), fg: "#1F2328" };
+  let c = d3.hcl(rgb);
+  for (let i = 0; i < 20 && 1.05 / (lum(d3.rgb(c)) + 0.05) < 4; i++) c = d3.hcl(c.h, c.c, c.l - 4);
+  return { bg: d3.rgb(c).formatHex(), fg: "#FFFFFF" };
+}
+
+// Black or white text, whichever reads better on the given background color.
+export function textOn(background) {
+  return headerColors(background).fg;
+}
+
+// Font sizes in px, all derived from the theme base size.
+export function fontSizes(theme) {
+  const s = theme.size;
+  return { base: s, tick: s - 1, title: Math.round(s * 1.35), subtitle: s, strip: s - 1, legend: s - 1, axisTitle: s, hover: Math.max(11, s - 1) };
+}
+
+// The first family of a CSS font stack, without quotes.
+export function firstFamily(font) {
+  return font.split(",")[0].trim().replace(/^['"]|['"]$/g, "");
+}

package/src/toolbar.js

@@ -0,0 +1,126 @@
+import { textOn } from "./theme.js";
+
+// Toolbar and page styles: a floating pill of icon buttons at the top right of the figure.
+// The button size follows the figure width. The styles go into the document once, as one <style> element.
+
+const ICONS = {
+  zoom: '<path d="M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5"/><rect x="9" y="9" width="6" height="6"/>',
+  pan: '<path d="M12 3v18M3 12h18M12 3l-2.5 2.5M12 3l2.5 2.5M12 21l-2.5-2.5M12 21l2.5-2.5M3 12l2.5-2.5M3 12l2.5 2.5M21 12l-2.5-2.5M21 12l-2.5 2.5"/>',
+  zoomIn: '<path d="M12 5v14M5 12h14"/>',
+  zoomOut: '<path d="M5 12h14"/>',
+  home: '<path d="M4 11l8-7 8 7M6 9.5V20h12V9.5"/>',
+  copy: '<rect x="8.5" y="8.5" width="11" height="11"/><path d="M15.5 8.5V4.5h-11v11h4"/>',
+  download: '<path d="M12 4v11M7.5 10.5L12 15l4.5-4.5M5 19.5h14"/>',
+  check: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
+};
+
+const CSS = `
+.pt-root{position:relative;--pt-size:24px}
+.pt-root svg{display:block;user-select:none;-webkit-user-select:none}
+.pt-root .pt-key{cursor:pointer}
+.pt-root:focus{outline:none}
+.pt-bar{position:absolute;top:6px;right:6px;display:flex;align-items:stretch;z-index:3;background:var(--pt-bg);
+  border:1px solid var(--pt-line);opacity:0;transition:opacity .12s ease}
+.pt-root:hover .pt-bar,.pt-root:focus-within .pt-bar,.pt-bar.pt-open{opacity:1}
+@media (hover:none){.pt-bar{opacity:1}}
+.pt-btn{all:unset;box-sizing:border-box;display:grid;place-items:center;width:var(--pt-size);height:var(--pt-size);
+  color:var(--pt-muted);cursor:pointer}
+.pt-btn svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:square;stroke-linejoin:miter}
+.pt-btn:hover{color:var(--pt-ink);background:var(--pt-soft)}
+.pt-btn:focus-visible{outline:2px solid var(--pt-accent);outline-offset:-2px}
+.pt-btn.pt-on{color:var(--pt-on-accent);background:var(--pt-accent)}
+.pt-sep{width:1px;background:var(--pt-line)}
+.pt-menu{position:absolute;top:100%;right:-1px;display:none;flex-direction:column;min-width:72px;margin-top:-1px;
+  background:var(--pt-bg);border:1px solid var(--pt-line)}
+.pt-menu.pt-open{display:flex}
+.pt-menu button{all:unset;padding:5px 12px;font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.04em;color:var(--pt-ink);cursor:pointer}
+.pt-menu button:hover{color:var(--pt-on-accent);background:var(--pt-accent)}
+.pt-tip{position:absolute;display:none;pointer-events:none;z-index:4;min-width:110px;max-width:280px;background:var(--pt-bg);
+  color:var(--pt-ink);border:1px solid var(--pt-c);line-height:1.3;font-variant-numeric:tabular-nums}
+.pt-tip.pt-pinned{border-width:2px;box-shadow:3px 3px 0 color-mix(in srgb,var(--pt-c) 35%,transparent)}
+.pt-tip .pt-head{padding:3px 7px;background:var(--pt-c);color:var(--pt-on-c);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.pt-tip .pt-rows{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:7px;row-gap:0;padding:4px 7px 5px}
+.pt-tip .pt-sw{width:8px;height:8px;align-self:center}
+.pt-tip .pt-k{color:var(--pt-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.pt-tip .pt-v{text-align:right;white-space:nowrap}
+.pt-tip .pt-b{color:var(--pt-ink);font-weight:700}
+.pt-tip .pt-t{border-top:1px solid var(--pt-line);padding-top:2px;margin-top:1px}
+.pt-tip .pt-more{grid-column:1/-1;color:var(--pt-muted);font-size:.9em}
+.pt-error{padding:8px 10px;border-left:3px solid #d93025;background:#fdecea;color:#5f2120;font:12px/1.4 ui-monospace,monospace;white-space:pre-wrap}
+`;
+
+export function installStyles(doc) {
+  if (doc.getElementById("plotto-style")) return;
+  const style = doc.createElement("style");
+  style.id = "plotto-style";
+  style.textContent = CSS;
+  doc.head.append(style);
+}
+
+// The theme colors as CSS variables of the root element.
+export function themeVars(root, theme) {
+  const vars = { bg: theme.background, ink: theme.ink, muted: theme.muted, line: theme.grid, soft: theme.strip, accent: theme.accent, "on-accent": textOn(theme.accent) };
+  for (const [k, v] of Object.entries(vars)) root.style.setProperty(`--pt-${k}`, v);
+}
+
+// groups: [[{ name, title, action, menu? }]]. Returns { el, button(name), setSize(width), flash(name) }.
+export function toolbar(doc, groups) {
+  const el = doc.createElement("div");
+  el.className = "pt-bar";
+  const buttons = {};
+  let menu = null;
+  groups.forEach((group, g) => {
+    if (g) el.append(Object.assign(doc.createElement("div"), { className: "pt-sep" }));
+    for (const spec of group) {
+      const b = doc.createElement("button");
+      b.className = "pt-btn";
+      b.type = "button";
+      b.title = spec.title;
+      b.setAttribute("aria-label", spec.title);
+      b.innerHTML = icon(spec.name);
+      b.addEventListener("pointerdown", (e) => e.stopPropagation());
+      b.addEventListener("click", (e) => (e.stopPropagation(), spec.menu ? toggleMenu() : spec.action(b)));
+      el.append(b);
+      buttons[spec.name] = b;
+      if (spec.menu) menu = addMenu(doc, el, spec.menu);
+    }
+  });
+  function toggleMenu() {
+    const open = !menu.classList.contains("pt-open");
+    menu.classList.toggle("pt-open", open);
+    el.classList.toggle("pt-open", open);
+  }
+  if (menu) doc.addEventListener("click", () => menu.classList.contains("pt-open") && toggleMenu());
+  return {
+    el,
+    button: (name) => buttons[name],
+    // Button size: 1/34 of the figure width, from 22 to 30 px.
+    setSize: (width) => el.parentElement?.style.setProperty("--pt-size", `${Math.round(Math.min(30, Math.max(22, width / 34)))}px`),
+    flash(name, title) {
+      const b = buttons[name];
+      const [html, old] = [b.innerHTML, b.title];
+      b.innerHTML = icon("check");
+      b.title = title;
+      b.classList.add("pt-on");
+      setTimeout(() => ((b.innerHTML = html), (b.title = old), b.classList.remove("pt-on")), 1100);
+    },
+  };
+}
+
+function addMenu(doc, bar, items) {
+  const menu = doc.createElement("div");
+  menu.className = "pt-menu";
+  for (const [label, action] of items) {
+    const item = doc.createElement("button");
+    item.type = "button";
+    item.textContent = label;
+    item.addEventListener("click", (e) => (e.stopPropagation(), menu.classList.remove("pt-open"), bar.classList.remove("pt-open"), action()));
+    menu.append(item);
+  }
+  bar.append(menu);
+  return menu;
+}
+
+function icon(name) {
+  return `<svg viewBox="0 0 24 24" aria-hidden="true">${ICONS[name]}</svg>`;
+}

package/src/views.js

@@ -0,0 +1,84 @@
+// Views: the data that one layer draws in one panel, after its statistic (summary, stack, bins, density, smooth).
+// A view has columns named like the channels (x, y, ymin, ...), and the hover anchor and fields of each row.
+import { channelValues } from "./scales.js";
+import { barIntervals, bin, binEdges, density, position, smooth, summarize } from "./stats.js";
+
+// Bin edges of each hist layer, shared by all panels and colors.
+export function layerEdges(ns) {
+  return ns.layers.map((layer) => {
+    if (layer.type !== "hist" || !layer.channels.x.column) return null;
+    return binEdges(ns.tables[layer.table].columns[layer.channels.x.column].values, layer.options.bins ?? 30);
+  });
+}
+
+// The view of one layer for the given source rows. hidden: the color values that the legend switched off.
+export function makeView(ctx, layer, rows, hidden) {
+  const { ns, kind, colorLevels, edges } = ctx;
+  if (hidden.size && layer.channels.color?.column) {
+    const values = ns.tables[layer.table].columns[layer.channels.color.column].values;
+    rows = rows.filter((r) => !hidden.has(values[r]));
+  }
+  const raw = {};
+  for (const ch of Object.keys(layer.channels)) raw[ch] = channelValues(ns, layer, ch, rows);
+  const n = rows.length;
+  const o = layer.options;
+  const stacked = (cols, m, mode) => position(cols, m, mode, colorLevels);
+  const sizeOf = (cols) => cols.x?.length ?? 0;
+  let cols = raw;
+  let source = rows;
+
+  if (o.summary && (layer.type === "line" || layer.type === "point")) cols = summarize(raw, n, o.summary);
+  else if (layer.type === "bar") {
+    cols = stacked(raw, n, o.position ?? "stack");
+    if (kind.x !== "category") cols = barIntervals(cols, n);
+  } else if (layer.type === "area") cols = stacked(raw, n, o.position ?? "stack");
+  else if (layer.type === "hist") {
+    const b = bin(raw, n, edges[ns.layers.indexOf(layer)], o.density);
+    cols = stacked(b, sizeOf(b), o.position ?? "stack");
+  } else if (layer.type === "density") cols = density(raw, n);
+  else if (layer.type === "smooth") cols = smooth(raw, n, o);
+  if (cols !== raw) source = null;
+  const view = { cols, n: cols === raw ? n : sizeOf(cols), rows: source };
+  view.hover = hoverOf(ns, layer, view);
+  return view;
+}
+
+// The hover anchor (hx, hy) and the label fields of a view, or null for layers without hover.
+function hoverOf(ns, layer, { cols, rows }) {
+  // A removed axis title (null) still names the hover row: by the column, or by the channel.
+  const X = ns.labels.x || layer.channels.x?.column || "x";
+  const Y = ns.labels.y || layer.channels.y?.column || "y";
+  const field = (label, axis, values, values2) => ({ label, axis, values, values2 });
+  const xField = field(X, "x", cols.x);
+  const tooltip = layer.channels.tooltip?.column && rows ? [field(layer.channels.tooltip.column, null, cols.tooltip)] : [];
+  switch (layer.type) {
+    case "line":
+    case "path":
+    case "step":
+    case "point":
+      return { hx: cols.x, hy: cols.y, fields: [xField, field(Y, "y", cols.y), ...tooltip] };
+    case "bar":
+    case "area":
+      return { hx: cols.x, hy: cols.ymax, fields: [xField, field(Y, "y", cols.value), ...tooltip] };
+    case "hist":
+      return { hx: cols.x, hy: cols.ymax, fields: [field(X, "x", cols.xmin, cols.xmax), field(layer.options.density ? "density" : "count", null, cols.value)] };
+    case "density":
+      return { hx: cols.x, hy: cols.y, fields: [xField, field("density", null, cols.y)] };
+    case "smooth": {
+      const band = cols.ymin.some((v) => v !== null) ? [field("95% CI", "y", cols.ymin, cols.ymax)] : [];
+      return { hx: cols.x, hy: cols.y, fields: [xField, field(Y, "y", cols.y), ...band] };
+    }
+    case "ribbon":
+      return { hx: cols.x, hy: cols.ymax, fields: [xField, field(Y, "y", cols.ymin, cols.ymax)] };
+    case "errorbar":
+      return { hx: cols.x, hy: cols.ymax, fields: [xField, field(Y, "y", cols.ymin, cols.ymax)] };
+    case "tile": {
+      const value = layer.channels.color?.column ? [field(ns.labels.color ?? "value", null, cols.color)] : [];
+      return { hx: cols.x, hy: cols.y, fields: [xField, field(Y, "y", cols.y), ...value, ...tooltip], tile: true };
+    }
+    case "box":
+      return { hx: cols.x, hy: cols.y, fields: [xField, field(Y, "y", cols.y)] };
+    default:
+      return null;
+  }
+}

package/theme.json

@@ -0,0 +1,150 @@
+{
+  "styles": {
+    "pastel": {
+      "font": "Helvetica, Arial, 'Liberation Sans', sans-serif",
+      "metrics": "arial",
+      "background": "#FFFEFB",
+      "ink": "#3A3631",
+      "muted": "#7A736A",
+      "grid": "#ECE8E1",
+      "gridMinor": "#F6F3EE",
+      "tick": "#D6D0C6",
+      "strip": "#F4F0E9",
+      "accent": "#3E8A99",
+      "palette": "pastel",
+      "scheme": "ai",
+      "colors": {
+        "blue": "#7AA6DA",
+        "orange": "#EF977F",
+        "green": "#7DB89A",
+        "purple": "#A79BD6",
+        "pink": "#E48FAE",
+        "yellow": "#DDB459",
+        "teal": "#63B7C1",
+        "red": "#CF7468",
+        "brown": "#BB9C84",
+        "gray": "#97A1AD"
+      },
+      "weight": 1.25
+    },
+    "wota": {
+      "font": "'M PLUS 1p', sans-serif",
+      "metrics": "mplus",
+      "ink": "#333333",
+      "muted": "#666666",
+      "grid": "#D9D9D9",
+      "gridMinor": "#EFEFEF",
+      "tick": "#BBBBBB",
+      "strip": "#EEF1FA",
+      "accent": "#5C6BC0",
+      "palette": "wota",
+      "scheme": "sakura",
+      "colors": {
+        "pink": "#E4007F",
+        "blue": "#5C6BC0",
+        "teal": "#00A3A3",
+        "orange": "#F5A623",
+        "purple": "#8E44AD",
+        "gray": "#7F7F7F",
+        "green": "#3BA55C",
+        "red": "#D7263D",
+        "yellow": "#F2C14E",
+        "brown": "#8D6E63"
+      },
+      "weight": 1,
+      "background": "#FFFFFF"
+    },
+    "paper": {
+      "ink": "#000000",
+      "muted": "#333333",
+      "grid": "#E6E6E6",
+      "gridMinor": "#F5F5F5",
+      "tick": "#8C8C8C",
+      "strip": "#EBEBEB",
+      "accent": "#0072B2",
+      "palette": ["blue", "orange", "green", "pink", "yellow", "teal", "red", "brown", "purple", "gray"],
+      "scheme": "viridis",
+      "colors": {
+        "blue": "#0072B2",
+        "orange": "#E69F00",
+        "green": "#009E73",
+        "pink": "#CC79A7",
+        "yellow": "#F0E442",
+        "teal": "#56B4E9",
+        "red": "#D55E00",
+        "brown": "#8C6D31",
+        "purple": "#6A3D9A",
+        "gray": "#7F7F7F"
+      },
+      "weight": 1,
+      "background": "#FFFFFF"
+    },
+    "dark": {
+      "background": "#16181D",
+      "ink": "#E8EAED",
+      "muted": "#A6ABB3",
+      "grid": "#2E323A",
+      "gridMinor": "#22252B",
+      "tick": "#4F5560",
+      "strip": "#252933",
+      "accent": "#8AB4F8",
+      "palette": ["blue", "orange", "green", "purple", "pink", "yellow", "teal", "red", "brown", "gray"],
+      "scheme": "yuhi",
+      "colors": {
+        "blue": "#8AB4F8",
+        "orange": "#FBA94C",
+        "green": "#81C995",
+        "purple": "#C58AF9",
+        "pink": "#FF8BCB",
+        "yellow": "#FDD663",
+        "teal": "#78D9D3",
+        "red": "#F28B82",
+        "brown": "#C8A27A",
+        "gray": "#9AA0A6"
+      },
+      "weight": 1.15
+    }
+  },
+  "palettes": {
+    "pastel": ["#7AA6DA", "#EF977F", "#7DB89A", "#A79BD6", "#E48FAE", "#DDB459", "#63B7C1", "#CF7468", "#BB9C84", "#97A1AD"],
+    "wota": ["#E4007F", "#5C6BC0", "#00A3A3", "#F5A623", "#8E44AD", "#7F7F7F", "#3BA55C", "#D7263D", "#F2C14E", "#8D6E63"],
+    "sakura": ["#E16B8C", "#5DAC81", "#8B81C3", "#FFB11B", "#7DB9DE", "#F596AA", "#B9887D", "#91AD70"],
+    "aizome": ["#0F2540", "#51A8DD", "#66BAB7", "#656765", "#0D5661", "#A5DEE4", "#7B90D2"],
+    "momiji": ["#CB4042", "#FFB11B", "#6C6A2D", "#6D2E5B", "#ED784A", "#734338", "#C99833"],
+    "tableau": ["#4E79A7", "#F28E2B", "#E15759", "#76B7B2", "#59A14F", "#EDC948", "#B07AA1", "#FF9DA7", "#9C755F", "#BAB0AC"]
+  },
+  "schemes": {
+    "ai": ["#F4F8F8", "#A5DEE4", "#33A6B8", "#0D5661", "#0F2540"],
+    "sakura": ["#FEF4F4", "#FEDFE1", "#F596AA", "#D05A6E", "#8E354A", "#4A1D30"],
+    "matcha": ["#F8F6E3", "#D7E3B5", "#91AD70", "#5DAC81", "#1B813E", "#0B3B2A"],
+    "yuhi": ["#FFF3D6", "#FFB11B", "#ED784A", "#CB4042", "#6D2E5B", "#26113A"],
+    "sumi": ["#FCFAF2", "#BDC0BA", "#828282", "#434343", "#1C1C1C"],
+    "aiaka": ["#0F2540", "#33A6B8", "#A5DEE4", "#F7F6F0", "#F4A7A0", "#CB4042", "#5C1A1B"]
+  },
+  "formats": {
+    "screen": {
+      "width": 900,
+      "height": 450,
+      "size": 12,
+      "line": 1.5,
+      "point": 2.5,
+      "reflow": true
+    },
+    "report": {
+      "width": 640,
+      "height": 400,
+      "size": 10,
+      "line": 1.2,
+      "point": 2,
+      "reflow": false
+    },
+    "slide": {
+      "width": 1280,
+      "height": 720,
+      "size": 20,
+      "line": 2.5,
+      "point": 4,
+      "reflow": false
+    }
+  }
+}