@opendata-ai/openchart-vanilla 3.0.0 → 6.1.0

package/dist/simulation-worker.js

@@ -1,42 +1,4 @@
 (() => {
-  var __create = Object.create;
-  var __getProtoOf = Object.getPrototypeOf;
-  var __defProp = Object.defineProperty;
-  var __getOwnPropNames = Object.getOwnPropertyNames;
-  var __hasOwnProp = Object.prototype.hasOwnProperty;
-  function __accessProp(key) {
-    return this[key];
-  }
-  var __toESMCache_node;
-  var __toESMCache_esm;
-  var __toESM = (mod, isNodeMode, target) => {
-    var canCache = mod != null && typeof mod === "object";
-    if (canCache) {
-      var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-      var cached = cache.get(mod);
-      if (cached)
-        return cached;
-    }
-    target = mod != null ? __create(__getProtoOf(mod)) : {};
-    const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-    for (let key of __getOwnPropNames(mod))
-      if (!__hasOwnProp.call(to, key))
-        __defProp(to, key, {
-          get: __accessProp.bind(mod, key),
-          enumerable: true
-        });
-    if (canCache)
-      cache.set(mod, to);
-    return to;
-  };
-  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-  }) : x)(function(x) {
-    if (typeof require !== "undefined")
-      return require.apply(this, arguments);
-    throw Error('Dynamic require of "' + x + '" is not supported');
-  });
-
   // ../../node_modules/.bun/d3-force@3.0.0/node_modules/d3-force/src/center.js
   function center_default(x, y) {
     var nodes, strength = 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "3.0.0",
+  "version": "6.1.0",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@opendata-ai/openchart-core": "3.0.0",
-    "@opendata-ai/openchart-engine": "3.0.0",
+    "@opendata-ai/openchart-core": "workspace:*",
+    "@opendata-ai/openchart-engine": "workspace:*",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/__test-fixtures__/specs.ts

@@ -12,7 +12,7 @@ import type { ChartSpec, GraphSpec, TableSpec } from '@opendata-ai/openchart-eng
 // ---------------------------------------------------------------------------
 
 export const lineSpec: ChartSpec = {
-  type: 'line',
+  mark: 'line',
   data: [
     { date: '2020-01-01', value: 10, country: 'US' },
     { date: '2021-01-01', value: 40, country: 'US' },
@@ -32,7 +32,7 @@ export const lineSpec: ChartSpec = {
 };
 
 export const singleSeriesLineSpec: ChartSpec = {
-  type: 'line',
+  mark: 'line',
   data: [
     { date: '2020-01-01', value: 10 },
     { date: '2021-01-01', value: 40 },
@@ -49,7 +49,7 @@ export const singleSeriesLineSpec: ChartSpec = {
 // ---------------------------------------------------------------------------
 
 export const barSpec: ChartSpec = {
-  type: 'bar',
+  mark: 'bar',
   data: [
     { name: 'A', value: 10 },
     { name: 'B', value: 30 },
@@ -69,7 +69,7 @@ export const barSpec: ChartSpec = {
 // ---------------------------------------------------------------------------
 
 export const columnSpec: ChartSpec = {
-  type: 'column',
+  mark: 'bar',
   data: [
     { category: 'Q1', revenue: 100 },
     { category: 'Q2', revenue: 200 },
@@ -89,7 +89,7 @@ export const columnSpec: ChartSpec = {
 // ---------------------------------------------------------------------------
 
 export const scatterSpec: ChartSpec = {
-  type: 'scatter',
+  mark: 'point',
   data: [
     { x: 10, y: 20, group: 'A' },
     { x: 30, y: 40, group: 'A' },
@@ -111,7 +111,7 @@ export const scatterSpec: ChartSpec = {
 // ---------------------------------------------------------------------------
 
 export const pieSpec: ChartSpec = {
-  type: 'pie',
+  mark: 'arc',
   data: [
     { category: 'Red', value: 30 },
     { category: 'Blue', value: 50 },
@@ -131,7 +131,7 @@ export const pieSpec: ChartSpec = {
 // ---------------------------------------------------------------------------
 
 export const multiSeriesBarSpec: ChartSpec = {
-  type: 'bar',
+  mark: 'bar',
   data: [
     { name: 'A', value: 10, group: 'X' },
     { name: 'B', value: 30, group: 'X' },

package/src/__tests__/svg-renderer.test.ts

@@ -356,7 +356,7 @@ describe('chart chrome rendering', () => {
 
   it('wraps long title text into tspan elements at narrow widths', () => {
     const longTitleSpec: ChartSpec = {
-      type: 'bar',
+      mark: 'bar',
       data: [
         { name: 'A', value: 10 },
         { name: 'B', value: 20 },
@@ -396,7 +396,7 @@ describe('chart chrome rendering', () => {
 
   it('chart with no chrome specified renders no chrome text elements', () => {
     const noChrome: ChartSpec = {
-      type: 'bar',
+      mark: 'bar',
       data: [{ name: 'A', value: 10 }],
       encoding: {
         x: { field: 'value', type: 'quantitative' },

package/src/mount.ts

@@ -18,6 +18,7 @@ import type {
   DarkMode,
   ElementEdit,
   GraphSpec,
+  LayerSpec,
   MeasureTextFn,
   RangeAnnotation,
   RefLineAnnotation,
@@ -25,7 +26,8 @@ import type {
   ThemeConfig,
   TooltipContent,
 } from '@opendata-ai/openchart-core';
-import { compileChart } from '@opendata-ai/openchart-engine';
+import { isLayerSpec } from '@opendata-ai/openchart-core';
+import { compileChart, compileLayer } from '@opendata-ai/openchart-engine';
 import {
   exportCSV,
   exportJPG,
@@ -60,7 +62,7 @@ export interface ExportOptions extends JPGExportOptions {
 
 export interface ChartInstance {
   /** Re-compile and re-render with a new spec. */
-  update(spec: ChartSpec | GraphSpec): void;
+  update(spec: ChartSpec | LayerSpec | GraphSpec): void;
   /** Re-compile at current container dimensions. */
   resize(): void;
   /** Export the chart. */
@@ -203,6 +205,140 @@ function wireTooltipEvents(
   };
 }
 
+// ---------------------------------------------------------------------------
+// Voronoi overlay tooltip wiring (nearest-point lookup for line/area charts)
+// ---------------------------------------------------------------------------
+
+/** A single data point with pixel coordinates, datum, and pre-computed tooltip. */
+interface VoronoiPoint {
+  x: number;
+  y: number;
+  datum: Record<string, unknown>;
+  tooltip?: TooltipContent;
+  color: string;
+}
+
+/**
+ * Collect all dataPoints from line and area marks for nearest-point lookup.
+ */
+function collectVoronoiPoints(layout: ChartLayout): VoronoiPoint[] {
+  const points: VoronoiPoint[] = [];
+  for (const mark of layout.marks) {
+    if ((mark.type === 'line' || mark.type === 'area') && mark.dataPoints) {
+      const color = mark.type === 'line' ? mark.stroke : mark.fill;
+      for (const dp of mark.dataPoints) {
+        points.push({ ...dp, color });
+      }
+    }
+  }
+  return points;
+}
+
+/**
+ * Find the nearest VoronoiPoint to a given (x, y) position using linear scan.
+ * Returns null if no points exist.
+ */
+function findNearestPoint(points: VoronoiPoint[], x: number, y: number): VoronoiPoint | null {
+  if (points.length === 0) return null;
+
+  let nearest = points[0];
+  let minDist = (points[0].x - x) ** 2 + (points[0].y - y) ** 2;
+
+  for (let i = 1; i < points.length; i++) {
+    const dist = (points[i].x - x) ** 2 + (points[i].y - y) ** 2;
+    if (dist < minDist) {
+      minDist = dist;
+      nearest = points[i];
+    }
+  }
+
+  return nearest;
+}
+
+/**
+ * Wire voronoi overlay tooltip events for line/area charts.
+ * Uses a transparent overlay rect with nearest-point lookup instead of
+ * per-point event listeners, eliminating DOM bloat.
+ * Returns a cleanup function.
+ */
+function wireVoronoiTooltipEvents(
+  svg: SVGElement,
+  layout: ChartLayout,
+  tooltipManager: TooltipManager,
+): () => void {
+  const overlay = svg.querySelector('[data-voronoi-overlay]');
+  if (!overlay) return () => {};
+
+  const voronoiPoints = collectVoronoiPoints(layout);
+  if (voronoiPoints.length === 0) return () => {};
+
+  const cleanups: Array<() => void> = [];
+
+  const handleMouseMove = (e: Event) => {
+    const mouseEvent = e as MouseEvent;
+    const svgEl = svg as unknown as SVGSVGElement;
+    const svgRect = svgEl.getBoundingClientRect();
+    const viewBox = svgEl.viewBox?.baseVal;
+
+    // Convert client coordinates to SVG viewBox coordinates
+    const scaleX = viewBox?.width && svgRect.width ? viewBox.width / svgRect.width : 1;
+    const scaleY = viewBox?.height && svgRect.height ? viewBox.height / svgRect.height : 1;
+    const svgX = (mouseEvent.clientX - svgRect.left) * scaleX;
+    const svgY = (mouseEvent.clientY - svgRect.top) * scaleY;
+
+    const nearest = findNearestPoint(voronoiPoints, svgX, svgY);
+    if (!nearest?.tooltip) return;
+
+    // Show tooltip at the mouse position (relative to container, not SVG viewBox)
+    const containerX = mouseEvent.clientX - svgRect.left;
+    const containerY = mouseEvent.clientY - svgRect.top;
+    tooltipManager.show(nearest.tooltip, containerX, containerY);
+  };
+
+  const handleMouseLeave = () => {
+    tooltipManager.hide();
+  };
+
+  // Touch support
+  const handleTouchStart = (e: Event) => {
+    const touchEvent = e as TouchEvent;
+    if (touchEvent.touches.length > 0) {
+      const touch = touchEvent.touches[0];
+      const svgEl = svg as unknown as SVGSVGElement;
+      const svgRect = svgEl.getBoundingClientRect();
+      const viewBox = svgEl.viewBox?.baseVal;
+
+      const scaleX = viewBox?.width && svgRect.width ? viewBox.width / svgRect.width : 1;
+      const scaleY = viewBox?.height && svgRect.height ? viewBox.height / svgRect.height : 1;
+      const svgX = (touch.clientX - svgRect.left) * scaleX;
+      const svgY = (touch.clientY - svgRect.top) * scaleY;
+
+      const nearest = findNearestPoint(voronoiPoints, svgX, svgY);
+      if (!nearest?.tooltip) return;
+
+      const containerX = touch.clientX - svgRect.left;
+      const containerY = touch.clientY - svgRect.top;
+      tooltipManager.show(nearest.tooltip, containerX, containerY);
+    }
+  };
+
+  overlay.addEventListener('mousemove', handleMouseMove);
+  overlay.addEventListener('mouseleave', handleMouseLeave);
+  overlay.addEventListener('touchstart', handleTouchStart);
+
+  cleanups.push(() => {
+    overlay.removeEventListener('mousemove', handleMouseMove);
+    overlay.removeEventListener('mouseleave', handleMouseLeave);
+    overlay.removeEventListener('touchstart', handleTouchStart);
+  });
+
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Chart event wiring (click, hover, leave on marks; legend toggle; annotation click)
 // ---------------------------------------------------------------------------
@@ -692,10 +828,10 @@ function wireConnectorEndpointDrag(
     // Determine connector endpoint positions from the connector element
     let fromX: number, fromY: number, toX: number, toY: number;
     if (connectorLine) {
-      fromX = Number(connectorLine.getAttribute('x1'));
-      fromY = Number(connectorLine.getAttribute('y1'));
-      toX = Number(connectorLine.getAttribute('x2'));
-      toY = Number(connectorLine.getAttribute('y2'));
+      fromX = Number(connectorLine.getAttribute('x1')) || 0;
+      fromY = Number(connectorLine.getAttribute('y1')) || 0;
+      toX = Number(connectorLine.getAttribute('x2')) || 0;
+      toY = Number(connectorLine.getAttribute('y2')) || 0;
     } else {
       // For curved connectors, get positions from the path data
       // The path starts at M x y, so parse the first coordinates
@@ -708,8 +844,8 @@ function wireConnectorEndpointDrag(
       const points = arrowhead?.getAttribute('points') ?? '';
       const firstPoint = points.split(' ')[0] ?? '0,0';
       const [px, py] = firstPoint.split(',');
-      toX = Number(px);
-      toY = Number(py);
+      toX = Number(px) || 0;
+      toY = Number(py) || 0;
     }
 
     // Create handles dynamically
@@ -721,6 +857,9 @@ function wireConnectorEndpointDrag(
     const createdHandles: SVGCircleElement[] = [];
 
     for (const ep of endpoints) {
+      // Skip endpoints with invalid coordinates to prevent NaN in SVG attributes
+      if (!Number.isFinite(ep.cx) || !Number.isFinite(ep.cy)) continue;
+
       const handleEl = document.createElementNS(SVG_NS, 'circle') as SVGCircleElement;
       handleEl.setAttribute('class', 'viz-connector-handle');
       handleEl.setAttribute('data-endpoint', ep.name);
@@ -1372,15 +1511,16 @@ function createScreenReaderTable(
  */
 export function createChart(
   container: HTMLElement,
-  spec: ChartSpec | GraphSpec,
+  spec: ChartSpec | LayerSpec | GraphSpec,
   options?: MountOptions,
 ): ChartInstance {
-  let currentSpec: ChartSpec | GraphSpec = spec;
+  let currentSpec: ChartSpec | LayerSpec | GraphSpec = spec;
   let currentLayout: ChartLayout;
   let svgElement: SVGElement | null = null;
   let tooltipManager: TooltipManager | null = null;
   let disconnectResize: (() => void) | null = null;
   let cleanupTooltipEvents: (() => void) | null = null;
+  let cleanupVoronoiEvents: (() => void) | null = null;
   let cleanupKeyboardNav: (() => void) | null = null;
   let cleanupLegend: (() => void) | null = null;
   let cleanupChartEvents: (() => void) | null = null;
@@ -1406,7 +1546,10 @@ export function createChart(
       measureText,
     };
 
-    return compileChart(currentSpec, compileOpts);
+    if (isLayerSpec(currentSpec)) {
+      return compileLayer(currentSpec as LayerSpec, compileOpts);
+    }
+    return compileChart(currentSpec as ChartSpec | GraphSpec, compileOpts);
   }
 
   function getContainerDimensions(): { width: number; height: number } {
@@ -1429,6 +1572,10 @@ export function createChart(
       cleanupTooltipEvents();
       cleanupTooltipEvents = null;
     }
+    if (cleanupVoronoiEvents) {
+      cleanupVoronoiEvents();
+      cleanupVoronoiEvents = null;
+    }
     if (cleanupKeyboardNav) {
       cleanupKeyboardNav();
       cleanupKeyboardNav = null;
@@ -1471,6 +1618,9 @@ export function createChart(
       tooltipManager,
     );
 
+    // Wire voronoi overlay tooltip events for line/area charts
+    cleanupVoronoiEvents = wireVoronoiTooltipEvents(svgElement, currentLayout, tooltipManager);
+
     // Wire keyboard navigation
     cleanupKeyboardNav = wireKeyboardNav(
       svgElement,
@@ -1543,13 +1693,14 @@ export function createChart(
       );
 
       // Chrome text drag
-      editCleanups.push(wireChromeDrag(svgElement, currentSpec, options.onEdit, setDragging));
+      const editSpec = currentSpec as ChartSpec | GraphSpec;
+      editCleanups.push(wireChromeDrag(svgElement, editSpec, options.onEdit, setDragging));
 
       // Legend drag
-      editCleanups.push(wireLegendDrag(svgElement, currentSpec, options.onEdit, setDragging));
+      editCleanups.push(wireLegendDrag(svgElement, editSpec, options.onEdit, setDragging));
 
       // Series label drag
-      editCleanups.push(wireSeriesLabelDrag(svgElement, currentSpec, options.onEdit, setDragging));
+      editCleanups.push(wireSeriesLabelDrag(svgElement, editSpec, options.onEdit, setDragging));
 
       cleanupEditDrags = () => {
         for (const cleanup of editCleanups) {
@@ -1625,6 +1776,10 @@ export function createChart(
       cleanupTooltipEvents();
       cleanupTooltipEvents = null;
     }
+    if (cleanupVoronoiEvents) {
+      cleanupVoronoiEvents();
+      cleanupVoronoiEvents = null;
+    }
     if (cleanupKeyboardNav) {
       cleanupKeyboardNav();
       cleanupKeyboardNav = null;

package/src/svg-renderer.ts

@@ -22,7 +22,10 @@ import type {
   RectMark,
   ResolvedAnnotation,
   ResolvedChromeElement,
+  RuleMarkLayout,
+  TextMarkLayout,
   TextStyle,
+  TickMarkLayout,
 } from '@opendata-ai/openchart-core';
 import { estimateTextWidth } from '@opendata-ai/openchart-core';
 
@@ -306,7 +309,7 @@ function renderAxis(
         y2: gridline.position,
         stroke: layout.theme.colors.gridline,
         'stroke-width': 1,
-        'stroke-opacity': 0.35,
+        'stroke-opacity': 0.6,
       });
     } else {
       setAttrs(gl, {
@@ -316,7 +319,7 @@ function renderAxis(
         y2: area.y + area.height,
         stroke: layout.theme.colors.gridline,
         'stroke-width': 1,
-        'stroke-opacity': 0.35,
+        'stroke-opacity': 0.6,
       });
     }
     g.appendChild(gl);
@@ -573,12 +576,93 @@ function renderPointMark(mark: PointMark, index: number): SVGElement {
   return circle;
 }
 
+function renderTextMark(mark: TextMarkLayout, index: number): SVGElement {
+  const text = createSVGElement('text');
+  text.setAttribute('data-mark-id', `textMark-${index}`);
+  text.setAttribute('class', 'viz-mark viz-mark-text');
+  setAttrs(text, {
+    x: mark.x,
+    y: mark.y,
+    'font-size': mark.fontSize,
+    'text-anchor': mark.textAnchor,
+  });
+  (text as SVGElement & ElementCSSInlineStyle).style.setProperty('fill', mark.fill);
+  if (mark.fontWeight) {
+    text.setAttribute('font-weight', String(mark.fontWeight));
+  }
+  if (mark.fontFamily) {
+    text.setAttribute('font-family', mark.fontFamily);
+  }
+  if (mark.angle) {
+    text.setAttribute('transform', `rotate(${mark.angle}, ${mark.x}, ${mark.y})`);
+  }
+  text.textContent = mark.text;
+  return text;
+}
+
+function renderRuleMark(mark: RuleMarkLayout, index: number): SVGElement {
+  const line = createSVGElement('line');
+  line.setAttribute('data-mark-id', `rule-${index}`);
+  line.setAttribute('class', 'viz-mark viz-mark-rule');
+  setAttrs(line, {
+    x1: mark.x1,
+    y1: mark.y1,
+    x2: mark.x2,
+    y2: mark.y2,
+    stroke: mark.stroke,
+    'stroke-width': mark.strokeWidth,
+  });
+  if (mark.strokeDasharray) {
+    line.setAttribute('stroke-dasharray', mark.strokeDasharray);
+  }
+  if (mark.opacity != null) {
+    line.setAttribute('opacity', String(mark.opacity));
+  }
+  return line;
+}
+
+function renderTickMark(mark: TickMarkLayout, index: number): SVGElement {
+  const line = createSVGElement('line');
+  line.setAttribute('data-mark-id', `tick-${index}`);
+  line.setAttribute('class', 'viz-mark viz-mark-tick');
+
+  // Tick is a short line segment centered at (x, y)
+  const half = mark.length / 2;
+  if (mark.orient === 'vertical') {
+    setAttrs(line, {
+      x1: mark.x,
+      y1: mark.y - half,
+      x2: mark.x,
+      y2: mark.y + half,
+      stroke: mark.stroke,
+      'stroke-width': mark.strokeWidth,
+    });
+  } else {
+    setAttrs(line, {
+      x1: mark.x - half,
+      y1: mark.y,
+      x2: mark.x + half,
+      y2: mark.y,
+      stroke: mark.stroke,
+      'stroke-width': mark.strokeWidth,
+    });
+  }
+
+  if (mark.opacity != null) {
+    line.setAttribute('opacity', String(mark.opacity));
+  }
+  return line;
+}
+
 // Register built-in renderers
 registerMarkRenderer('line', renderLineMark as MarkRenderer<Mark>);
 registerMarkRenderer('area', renderAreaMark as MarkRenderer<Mark>);
 registerMarkRenderer('rect', renderRectMark as MarkRenderer<Mark>);
 registerMarkRenderer('arc', renderArcMark as MarkRenderer<Mark>);
 registerMarkRenderer('point', renderPointMark as MarkRenderer<Mark>);
+registerMarkRenderer('textMark', renderTextMark as MarkRenderer<Mark>);
+registerMarkRenderer('rule', renderRuleMark as MarkRenderer<Mark>);
+registerMarkRenderer('tick', renderTickMark as MarkRenderer<Mark>);
 
 /** Extract series name from a mark for legend toggle matching. */
 function getMarkSeries(mark: Mark): string | undefined {
@@ -1023,10 +1107,10 @@ function renderBrand(parent: SVGElement, layout: ChartLayout): void {
   setAttrs(text, {
     x: rightEdge,
     y: chromeY,
+    'dominant-baseline': 'hanging',
     'font-family': layout.theme.fonts.family,
     'font-size': BRAND_FONT_SIZE,
     'text-anchor': 'end',
-    'dominant-baseline': 'hanging',
     'fill-opacity': 0.55,
   });
   (text as SVGElement & ElementCSSInlineStyle).style.setProperty('fill', fill);
@@ -1063,6 +1147,12 @@ export function renderChartSVG(layout: ChartLayout, container: HTMLElement): SVG
   setAttrs(svg, {
     viewBox: `0 0 ${width} ${height}`,
     xmlns: SVG_NS,
+    // WebKit/iOS Safari getBBox() bug: text with dominant-baseline:hanging
+    // reports bounding boxes extending above y=0. The SVG spec default
+    // overflow is "hidden", which clips this phantom extent. Setting
+    // overflow:visible prevents the clipping. Chart marks are already
+    // constrained by a clipPath, so nothing bleeds out.
+    overflow: 'visible',
   });
   // Set explicit pixel height via inline style. iOS Safari misresolves CSS
   // height:100% when the ancestor chain uses minHeight instead of height,
@@ -1109,6 +1199,28 @@ export function renderChartSVG(layout: ChartLayout, container: HTMLElement): SVG
   const clippedGroup = createSVGElement('g');
   clippedGroup.setAttribute('clip-path', `url(#${clipId})`);
   renderMarks(clippedGroup, layout);
+
+  // Add transparent overlay rect for line/area charts to enable voronoi tooltip lookup.
+  // Only added when there are line or area marks with dataPoints, and no explicit
+  // PointMark objects (which use per-element event handling instead).
+  const hasLineOrAreaWithDataPoints = layout.marks.some(
+    (m) => (m.type === 'line' || m.type === 'area') && m.dataPoints && m.dataPoints.length > 0,
+  );
+  const hasPointMarks = layout.marks.some((m) => m.type === 'point');
+  if (hasLineOrAreaWithDataPoints && !hasPointMarks) {
+    const overlay = createSVGElement('rect');
+    setAttrs(overlay, {
+      x: layout.area.x,
+      y: layout.area.y,
+      width: layout.area.width,
+      height: layout.area.height,
+      fill: 'transparent',
+    });
+    overlay.setAttribute('class', 'viz-voronoi-overlay');
+    overlay.setAttribute('data-voronoi-overlay', 'true');
+    clippedGroup.appendChild(overlay);
+  }
+
   svg.appendChild(clippedGroup);
 
   renderAnnotations(svg, layout);