Tooltips!

src/channel.d.ts

@@ -61,7 +61,7 @@ export type ChannelName =
  * An object literal of channel definitions. This is also used to represent
  * materialized channel states after mark initialization.
  */
-export type Channels = {[key in ChannelName]?: Channel};
+export type Channels = Record<string, Channel>;
 
 /**
  * A channel definition. This is also used to represent the materialized channel

src/channel.js

@@ -5,8 +5,8 @@ import {registry} from "./scales/index.js";
 import {isSymbol, maybeSymbol} from "./symbol.js";
 import {maybeReduce} from "./transforms/group.js";
 
-// TODO Type coercion?
 export function createChannel(data, {scale, type, value, filter, hint}, name) {
+  if (hint === undefined && typeof value?.transform === "function") hint = value.hint;
   return inferChannelScale(name, {
     scale,
     type,

src/context.d.ts

@@ -8,6 +8,9 @@ export interface Context {
    */
   document: Document;
 
+  /** The current owner SVG element. */
+  ownerSVGElement: SVGSVGElement;
+
   /** The Plot’s (typically generated) class name, for custom styles. */
   className: string;
 

src/context.js

@@ -3,7 +3,12 @@ import {createProjection} from "./projection.js";
 
 export function createContext(options = {}, dimensions, className) {
   const {document = typeof window !== "undefined" ? window.document : undefined} = options;
-  return {document, className, projection: createProjection(options, dimensions)};
+  return {
+    document,
+    ownerSVGElement: creator("svg").call(document.documentElement),
+    className,
+    projection: createProjection(options, dimensions)
+  };
 }
 
 export function create(name, {document}) {

src/index.d.ts

@@ -31,6 +31,7 @@ export * from "./marks/rect.js";
 export * from "./marks/rule.js";
 export * from "./marks/text.js";
 export * from "./marks/tick.js";
+export * from "./marks/tooltip.js";
 export * from "./marks/tree.js";
 export * from "./marks/vector.js";
 export * from "./options.js";

src/index.js

@@ -24,6 +24,7 @@ export {Rect, rect, rectX, rectY} from "./marks/rect.js";
 export {RuleX, RuleY, ruleX, ruleY} from "./marks/rule.js";
 export {Text, text, textX, textY} from "./marks/text.js";
 export {TickX, TickY, tickX, tickY} from "./marks/tick.js";
+export {Tooltip, tooltip} from "./marks/tooltip.js";
 export {tree, cluster} from "./marks/tree.js";
 export {Vector, vector, vectorX, vectorY, spike} from "./marks/vector.js";
 export {valueof, column, identity, indexOf} from "./options.js";

src/marks/axis.js

@@ -576,7 +576,7 @@ function inferTextChannel(scale, ticks, tickFormat) {
 // D3’s ordinal scales simply use toString by default, but if the ordinal scale
 // domain (or ticks) are numbers or dates (say because we’re applying a time
 // interval to the ordinal scale), we want Plot’s default formatter.
-function inferTickFormat(scale, ticks, tickFormat) {
+export function inferTickFormat(scale, ticks, tickFormat) {
   return scale.tickFormat
     ? scale.tickFormat(isIterable(ticks) ? null : ticks, tickFormat)
     : tickFormat === undefined
@@ -635,6 +635,8 @@ function inferScaleOrder(scale) {
 // inferred from an associated channel, adds an orientation-appropriate arrow.
 function inferAxisLabel(key, scale, labelAnchor) {
   const label = scale.label;
+  // Ignore the implicit label for temporal scales if it’s simply “date”.
+  if (label?.inferred && isTemporalScale(scale) && /^(date|time|year)$/i.test(label)) return;
   if (scale.bandwidth || !label?.inferred) return label;
   const order = inferScaleOrder(scale);
   return order

src/marks/dot.js

@@ -69,7 +69,7 @@ export class Dot extends Mark {
     const {x: X, y: Y, r: R, rotate: A, symbol: S} = channels;
     const {r, rotate, symbol} = this;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
-    const circle = this.symbol === symbolCircle;
+    const circle = symbol === symbolCircle;
     const size = R ? undefined : r * r * Math.PI;
     if (negative(r)) index = [];
     return create("svg:g", context)

src/marks/text.js

@@ -177,7 +177,7 @@ export function textY(data, options = {}) {
   return new Text(data, maybeIntervalMidX({...remainingOptions, y}));
 }
 
-function applyIndirectTextStyles(selection, mark, T) {
+export function applyIndirectTextStyles(selection, mark, T) {
   applyAttr(selection, "text-anchor", mark.textAnchor);
   applyAttr(selection, "font-family", mark.fontFamily);
   applyAttr(selection, "font-size", mark.fontSize);
@@ -187,7 +187,7 @@ function applyIndirectTextStyles(selection, mark, T) {
 }
 
 function inferFontVariant(T) {
-  return isNumeric(T) || isTemporal(T) ? "tabular-nums" : undefined;
+  return T && (isNumeric(T) || isTemporal(T)) ? "tabular-nums" : undefined;
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
@@ -444,7 +444,7 @@ function clipper({monospace, lineWidth, textOverflow}) {
 // given width, returns [-1, 0]. If the text needs cutting, the given inset
 // specifies how much space (in the same units as width and widthof) to reserve
 // for a possible ellipsis character.
-function cut(text, width, widthof, inset) {
+export function cut(text, width, widthof, inset) {
   const I = []; // indexes of read character boundaries
   let w = 0; // current line width
   for (let i = 0, j = 0, n = text.length; i < n; i = j) {

src/marks/tooltip.d.ts

@@ -0,0 +1,57 @@
+import type {ChannelValueSpec} from "../channel.js";
+import type {Data, FrameAnchor, MarkOptions, RenderableMark} from "../mark.js";
+import type {TextOptions} from "./text.js";
+
+/** Options for styling text. TODO Move to TextOptions? */
+type TextStyles = Pick<TextOptions, "lineHeight" | "lineWidth" | "monospace" | "fontFamily" | "fontSize" | "fontStyle" | "fontVariant" | "fontWeight">; // prettier-ignore
+
+/** Options for the tooltip mark. */
+export interface TooltipOptions extends MarkOptions, TextStyles {
+  /**
+   * The horizontal position channel specifying the tooltip’s anchor, typically
+   * bound to the *x* scale.
+   */
+  x?: ChannelValueSpec;
+
+  /**
+   * The vertical position channel specifying the tooltip’s anchor, typically
+   * bound to the *y* scale.
+   */
+  y?: ChannelValueSpec;
+
+  /**
+   * The frame anchor specifies defaults for **x** and **y** based on the plot’s
+   * frame; it may be one of the four sides (*top*, *right*, *bottom*, *left*),
+   * one of the four corners (*top-left*, *top-right*, *bottom-right*,
+   * *bottom-left*), or the *middle* of the frame. For example, for tooltips
+   * distributed horizontally at the top of the frame:
+   *
+   * ```js
+   * Plot.tooltip(data, {x: "date", frameAnchor: "top"})
+   * ```
+   */
+  frameAnchor?: FrameAnchor;
+
+  /** TODO */
+  maxRadius?: number;
+
+  /** TODO */
+  axis?: "x" | "y" | "xy";
+
+  /** TODO */
+  anchor?: "top-left" | "top-right" | "bottom-right" | "bottom-left";
+}
+
+/**
+ * Returns a new tooltip mark for the given *data* and *options*.
+ *
+ * If either **x** or **y** is not specified, the default is determined by the
+ * **frameAnchor** option. If none of **x**, **y**, and **frameAnchor** are
+ * specified, *data* is assumed to be an array of pairs [[*x₀*, *y₀*], [*x₁*,
+ * *y₁*], [*x₂*, *y₂*], …] such that **x** = [*x₀*, *x₁*, *x₂*, …] and **y** =
+ * [*y₀*, *y₁*, *y₂*, …].
+ */
+export function tooltip(data?: Data, options?: TooltipOptions): Tooltip;
+
+/** The tooltip mark. */
+export class Tooltip extends RenderableMark {}