semiotic 3.0.0 → 3.1.0

package/ai/cli.js

@@ -54,46 +54,59 @@ if (flag === "--doctor") {
       process.exit(1)
     }
 
-    // Load validateProps from dist
+    // Load diagnoseConfig from dist (falls back to validateProps)
     const distPath = path.join(pkgRoot, "dist", "semiotic-ai.min.js")
-    let validateProps
+    let diagnoseConfig, validateProps
     try {
       const mod = require(distPath)
+      diagnoseConfig = mod.diagnoseConfig
       validateProps = mod.validateProps
     } catch (e) {
       console.error("Could not load semiotic/ai dist. Run 'npm run dist' first.")
       process.exit(1)
     }
 
-    if (!validateProps) {
-      console.error("validateProps not found in semiotic/ai exports.")
+    if (!diagnoseConfig && !validateProps) {
+      console.error("diagnoseConfig/validateProps not found in semiotic/ai exports.")
       process.exit(1)
     }
 
-    const result = validateProps(component, props)
-    if (result.valid) {
-      console.log(`✓ ${component}: props are valid.`)
-      // Additional data shape checks
+    if (diagnoseConfig) {
+      // Use the full anti-pattern detector
+      const result = diagnoseConfig(component, props)
+
+      // Show data shape summary
       if (props.data && Array.isArray(props.data) && props.data.length > 0) {
         const sample = props.data[0]
         console.log(`  Data shape: ${props.data.length} items, keys: [${Object.keys(sample).join(", ")}]`)
-        if (props.xAccessor && typeof props.xAccessor === "string" && !(props.xAccessor in sample)) {
-          console.log(`  ⚠ xAccessor "${props.xAccessor}" not in data keys. Available: ${Object.keys(sample).join(", ")}`)
-        }
-        if (props.yAccessor && typeof props.yAccessor === "string" && !(props.yAccessor in sample)) {
-          console.log(`  ⚠ yAccessor "${props.yAccessor}" not in data keys. Available: ${Object.keys(sample).join(", ")}`)
-        }
-        if (props.categoryAccessor && typeof props.categoryAccessor === "string" && !(props.categoryAccessor in sample)) {
-          console.log(`  ⚠ categoryAccessor "${props.categoryAccessor}" not in data keys. Available: ${Object.keys(sample).join(", ")}`)
+      }
+
+      if (result.ok && result.diagnoses.length === 0) {
+        console.log(`✓ ${component}: configuration looks good.`)
+      } else if (result.ok) {
+        console.log(`✓ ${component}: configuration OK with warnings:`)
+        for (const d of result.diagnoses) {
+          console.log(`  ⚠ [${d.code}] ${d.message}`)
+          if (d.fix) console.log(`    Fix: ${d.fix}`)
         }
-        if (props.valueAccessor && typeof props.valueAccessor === "string" && !(props.valueAccessor in sample)) {
-          console.log(`  ⚠ valueAccessor "${props.valueAccessor}" not in data keys. Available: ${Object.keys(sample).join(", ")}`)
+      } else {
+        console.log(`✗ ${component}: issues detected.`)
+        for (const d of result.diagnoses) {
+          const icon = d.severity === "error" ? "✗" : "⚠"
+          console.log(`  ${icon} [${d.code}] ${d.message}`)
+          if (d.fix) console.log(`    Fix: ${d.fix}`)
         }
       }
     } else {
-      console.log(`✗ ${component}: validation failed.`)
-      for (const err of result.errors) {
-        console.log(`  • ${err}`)
+      // Fallback to validateProps only
+      const result = validateProps(component, props)
+      if (result.valid) {
+        console.log(`✓ ${component}: props are valid.`)
+      } else {
+        console.log(`✗ ${component}: validation failed.`)
+        for (const err of result.errors) {
+          console.log(`  • ${err}`)
+        }
       }
     }
   } catch (err) {

package/ai/dist/componentRegistry.js

@@ -9,6 +9,7 @@ exports.COMPONENT_REGISTRY = {
     Scatterplot: { component: ai_1.Scatterplot, category: "xy" },
     BubbleChart: { component: ai_1.BubbleChart, category: "xy" },
     Heatmap: { component: ai_1.Heatmap, category: "xy" },
+    ConnectedScatterplot: { component: ai_1.ConnectedScatterplot, category: "xy" },
     BarChart: { component: ai_1.BarChart, category: "ordinal" },
     StackedBarChart: { component: ai_1.StackedBarChart, category: "ordinal" },
     GroupedBarChart: { component: ai_1.GroupedBarChart, category: "ordinal" },
@@ -23,4 +24,5 @@ exports.COMPONENT_REGISTRY = {
     TreeDiagram: { component: ai_1.TreeDiagram, category: "network" },
     Treemap: { component: ai_1.Treemap, category: "network" },
     CirclePack: { component: ai_1.CirclePack, category: "network" },
+    OrbitDiagram: { component: ai_1.OrbitDiagram, category: "network" },
 };

package/ai/dist/mcp-server.js

@@ -57,6 +57,7 @@ const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const renderHOCToSVG_1 = require("./renderHOCToSVG");
 const componentRegistry_1 = require("./componentRegistry");
+const ai_1 = require("semiotic/ai");
 // Load schema.json for tool definitions
 const schemaPath = path.resolve(__dirname, "../schema.json");
 const schema = JSON.parse(fs.readFileSync(schemaPath, "utf-8"));
@@ -88,6 +89,59 @@ for (const toolDef of schema.tools) {
         };
     });
 }
+// ── Generic renderChart tool ─────────────────────────────────────────────
+// Accepts { component, props } — closes the agent feedback loop by letting
+// an LLM render any chart type in a single tool call.
+server.tool("renderChart", "Render any Semiotic chart to static SVG. Pass { component: 'LineChart', props: { data: [...], ... } }. Returns SVG string or validation errors.", {}, async (args) => {
+    const component = args.component;
+    const props = (args.props || args);
+    if (!component) {
+        return {
+            content: [{ type: "text", text: "Missing 'component' field. Provide { component: 'LineChart', props: { ... } }." }],
+            isError: true,
+        };
+    }
+    const result = (0, renderHOCToSVG_1.renderHOCToSVG)(component, props);
+    if (result.error) {
+        return {
+            content: [{ type: "text", text: result.error }],
+            isError: true,
+        };
+    }
+    return {
+        content: [{ type: "text", text: result.svg }],
+    };
+});
+// ── diagnoseConfig tool ──────────────────────────────────────────────────
+// Anti-pattern detector: checks for common failure modes and returns
+// actionable fix instructions.
+server.tool("diagnoseConfig", "Diagnose a Semiotic chart configuration for common problems (empty data, bad dimensions, missing accessors, wrong data shape, etc). Pass { component: 'LineChart', props: { ... } }. Returns structured diagnoses with fix instructions.", {}, async (args) => {
+    const component = args.component;
+    const props = (args.props || args);
+    if (!component) {
+        return {
+            content: [{ type: "text", text: "Missing 'component' field. Provide { component: 'LineChart', props: { ... } }." }],
+            isError: true,
+        };
+    }
+    const result = (0, ai_1.diagnoseConfig)(component, props);
+    if (result.ok) {
+        const warnings = result.diagnoses.filter(d => d.severity === "warning");
+        const msg = warnings.length > 0
+            ? `Configuration looks good with ${warnings.length} warning(s):\n${warnings.map(w => `⚠ [${w.code}] ${w.message}\n  Fix: ${w.fix}`).join("\n")}`
+            : `✓ Configuration looks good — no issues detected.`;
+        return { content: [{ type: "text", text: msg }] };
+    }
+    const lines = result.diagnoses.map(d => {
+        const icon = d.severity === "error" ? "✗" : "⚠";
+        const fixLine = d.fix ? `\n  Fix: ${d.fix}` : "";
+        return `${icon} [${d.code}] ${d.message}${fixLine}`;
+    });
+    return {
+        content: [{ type: "text", text: lines.join("\n") }],
+        isError: true,
+    };
+});
 // Start the server
 async function main() {
     const transport = new stdio_js_1.StdioServerTransport();

package/ai/examples.md

@@ -111,6 +111,151 @@ const data = [
 
 Key props: `valueAccessor`, `colorScheme` ("blues"|"reds"|"greens"|"viridis"), `showValues`
 
+### Heatmap with Gradient Legend
+
+```jsx
+import { Heatmap } from "semiotic/ai"
+
+<Heatmap
+  data={data}
+  xAccessor="hour"
+  yAccessor="day"
+  valueAccessor="count"
+  colorScheme="viridis"
+  showLegend
+  legendPosition="right"
+/>
+```
+
+Key props: `showLegend` enables gradient legend, `legendPosition` ("right"|"left"|"top"|"bottom")
+
+### AreaChart
+
+```jsx
+import { AreaChart } from "semiotic/ai"
+
+const data = [
+  { month: 1, revenue: 4200 },
+  { month: 2, revenue: 5800 },
+  { month: 3, revenue: 5200 },
+  { month: 4, revenue: 7100 },
+  { month: 5, revenue: 6800 },
+  { month: 6, revenue: 7500 }
+]
+
+<AreaChart
+  data={data}
+  xAccessor="month"
+  yAccessor="revenue"
+  gradientFill
+  xLabel="Month"
+  yLabel="Revenue ($)"
+/>
+```
+
+Key props: `areaBy` (group into multiple areas), `y0Accessor` (band/ribbon), `gradientFill`, `areaOpacity` (0.7)
+
+### AreaChart — Percentile Band with Main Line
+
+**IMPORTANT**: `showLine` on AreaChart only draws the TOP edge of the area (the `yAccessor` line). To render a separate main line (e.g., p50 median), you must layer two charts.
+
+```jsx
+import { AreaChart, LineChart } from "semiotic/ai"
+
+const data = [
+  { x: 0, p5: 10, p50: 25, p95: 45 },
+  { x: 1, p5: 12, p50: 28, p95: 50 },
+  { x: 2, p5: 11, p50: 30, p95: 52 },
+  { x: 3, p5: 14, p50: 32, p95: 55 },
+  { x: 4, p5: 13, p50: 35, p95: 58 },
+  { x: 5, p5: 15, p50: 37, p95: 62 },
+]
+
+// Band (p5–p95) + main line (p50): two separate charts layered
+<div style={{ position: "relative" }}>
+  <AreaChart
+    data={data}
+    xAccessor="x"
+    yAccessor="p95"
+    y0Accessor="p5"
+    showLine={false}
+    areaOpacity={0.3}
+    gradientFill
+    width={600}
+    height={400}
+  />
+  <div style={{ position: "absolute", top: 0, left: 0 }}>
+    <LineChart
+      data={data}
+      xAccessor="x"
+      yAccessor="p50"
+      lineWidth={2}
+      width={600}
+      height={400}
+    />
+  </div>
+</div>
+```
+
+Key props: `y0Accessor` defines band bottom, `yAccessor` defines band top, `showLine={false}` hides the top edge stroke. Layer a `LineChart` on top for the main metric.
+
+### StackedAreaChart
+
+```jsx
+import { StackedAreaChart } from "semiotic/ai"
+
+// IMPORTANT: Use a flat array with an areaBy field for grouping.
+// Do NOT use lineBy or lineDataAccessor — those are LineChart props.
+const data = [
+  { month: 1, value: 20, category: "Product" },
+  { month: 2, value: 25, category: "Product" },
+  { month: 3, value: 30, category: "Product" },
+  { month: 1, value: 15, category: "Service" },
+  { month: 2, value: 12, category: "Service" },
+  { month: 3, value: 18, category: "Service" },
+  { month: 1, value: 8, category: "Consulting" },
+  { month: 2, value: 10, category: "Consulting" },
+  { month: 3, value: 7, category: "Consulting" }
+]
+
+<StackedAreaChart
+  data={data}
+  xAccessor="month"
+  yAccessor="value"
+  areaBy="category"
+  colorBy="category"
+  showLegend
+/>
+```
+
+Key props: **`areaBy`** (required — groups flat data into stacked areas), `colorBy`, `normalize` (100% stacked). Data must be a flat array, not pre-grouped objects.
+
+### ConnectedScatterplot
+
+```jsx
+import { ConnectedScatterplot } from "semiotic/ai"
+
+const data = [
+  { year: 2018, unemployment: 3.9, inflation: 2.4 },
+  { year: 2019, unemployment: 3.7, inflation: 1.8 },
+  { year: 2020, unemployment: 8.1, inflation: 1.2 },
+  { year: 2021, unemployment: 5.4, inflation: 4.7 },
+  { year: 2022, unemployment: 3.6, inflation: 8.0 },
+  { year: 2023, unemployment: 3.6, inflation: 4.1 }
+]
+
+<ConnectedScatterplot
+  data={data}
+  xAccessor="unemployment"
+  yAccessor="inflation"
+  orderAccessor="year"
+  xLabel="Unemployment Rate (%)"
+  yLabel="Inflation Rate (%)"
+/>
+```
+
+Key props: `orderAccessor` sequences points along the path, Viridis gradient from start→end
+
 ---
 
 ## Flat Array — Ordinal Charts
@@ -369,6 +514,55 @@ Key props: `valueAccessor` controls circle size, nested circles for hierarchy
 
 ---
 
+### OrbitDiagram
+
+```jsx
+import { OrbitDiagram } from "semiotic/ai"
+
+const pipeline = {
+  name: "ML Pipeline",
+  children: [
+    {
+      name: "Data Ingestion",
+      children: [
+        { name: "API Feed" },
+        { name: "CSV Upload" },
+        { name: "DB Connector" }
+      ]
+    },
+    {
+      name: "Processing",
+      children: [
+        { name: "Clean" },
+        { name: "Feature Eng" },
+        { name: "Normalize" }
+      ]
+    },
+    {
+      name: "Model",
+      children: [
+        { name: "Train" },
+        { name: "Evaluate" },
+        { name: "Deploy" }
+      ]
+    }
+  ]
+}
+
+<OrbitDiagram
+  data={pipeline}
+  childrenAccessor="children"
+  nodeIdAccessor="name"
+  orbitMode="solar"
+  showLabels
+  colorByDepth
+/>
+```
+
+Key props: `orbitMode` ("flat"|"solar"|"atomic"|number[]), `speed`, `animated`, `showRings`
+
+---
+
 ## Network Data — Nodes + Edges Arrays
 
 ### ForceDirectedGraph
@@ -377,11 +571,11 @@ Key props: `valueAccessor` controls circle size, nested circles for hierarchy
 import { ForceDirectedGraph } from "semiotic/ai"
 
 const nodes = [
-  { id: "Alice", team: "Engineering" },
-  { id: "Bob", team: "Engineering" },
-  { id: "Carol", team: "Design" },
-  { id: "Dave", team: "Design" },
-  { id: "Eve", team: "Product" }
+  { id: "Alice", team: "Engineering", influence: 10 },
+  { id: "Bob", team: "Engineering", influence: 6 },
+  { id: "Carol", team: "Design", influence: 8 },
+  { id: "Dave", team: "Design", influence: 4 },
+  { id: "Eve", team: "Product", influence: 12 }
 ]
 
 const edges = [
@@ -397,12 +591,51 @@ const edges = [
   nodes={nodes}
   edges={edges}
   colorBy="team"
-  nodeSize={10}
+  nodeSize="influence"
+  nodeSizeRange={[5, 25]}
   showLabels
+  showLegend
+  edgeOpacity={0.4}
+  tooltip={(d) => <div><strong>{d.data.id}</strong><br/>Team: {d.data.team}</div>}
 />
 ```
 
-Key props: **`nodes`** and **`edges`** (both required), `nodeIDAccessor`, `sourceAccessor`, `targetAccessor`
+Key props: **`nodes`** and **`edges`** (both required), `nodeIDAccessor` (default "id"), `sourceAccessor` (default "source"), `targetAccessor` (default "target"), `colorBy`, `nodeSize` (number, string field name, or function), `nodeSizeRange`, `showLabels`, `showLegend`, `tooltip`
+
+**Note**: Always use `ForceDirectedGraph` (not `StreamNetworkFrame`) unless you need sophisticated control it doesn't expose. `StreamNetworkFrame` is a low-level escape hatch whose callbacks receive internal `RealtimeNode` wrappers — access your data via `.data` (e.g., `nodeStyle={(d) => ({ fill: d.data?.color })}`). HOC components like `ForceDirectedGraph` handle this automatically.
+
+### ForceDirectedGraph with custom click/hover
+
+```jsx
+import { useState } from "react"
+import { ForceDirectedGraph } from "semiotic/ai"
+
+const [selected, setSelected] = useState(null)
+
+<ForceDirectedGraph
+  nodes={nodes}
+  edges={edges}
+  colorBy="team"
+  nodeSize="influence"
+  nodeSizeRange={[5, 25]}
+  showLabels
+  width={800}
+  height={600}
+  frameProps={{
+    customClickBehavior: (d) => {
+      // d is { type: "node"|"edge", data: <your raw node/edge>, x, y } or null
+      if (d?.type === "node") setSelected(d.data)
+    },
+    customHoverBehavior: (d) => {
+      // same shape as click — d.data is your original object
+      if (d?.type === "node") console.log("Hovering:", d.data.id)
+    },
+    background: "#1a1a2e",
+  }}
+/>
+```
+
+Key props: `frameProps` passes through to the underlying `StreamNetworkFrame` for advanced control (custom click/hover, background, annotations). Callback `d.data` is always your original node/edge object.
 
 ### SankeyDiagram
 
@@ -456,7 +689,98 @@ Key props: **`edges`** (required), shows bidirectional relationships in a circle
 
 ## Realtime — Push API via Ref
 
-### Streaming Sankey (StreamNetworkFrame)
+### RealtimeLineChart
+
+```jsx
+import { useRef, useEffect } from "react"
+import { RealtimeLineChart } from "semiotic/ai"
+
+const chartRef = useRef()
+
+// Push data — MUST include a time field
+useEffect(() => {
+  const interval = setInterval(() => {
+    chartRef.current?.push({ time: Date.now(), value: Math.random() * 100 })
+  }, 500)
+  return () => clearInterval(interval)
+}, [])
+
+<RealtimeLineChart
+  ref={chartRef}
+  size={[600, 300]}
+  timeAccessor="time"
+  valueAccessor="value"
+  windowSize={120}
+  stroke="#76b7b2"
+/>
+```
+
+Key props: `timeAccessor`, `valueAccessor`, `windowSize`, `stroke`, `strokeWidth`
+
+### RealtimeHistogram
+
+```jsx
+import { useRef, useEffect } from "react"
+import { RealtimeHistogram } from "semiotic/ai"
+
+const chartRef = useRef()
+
+// IMPORTANT: Include time field even though this shows a distribution — it's used for windowing
+useEffect(() => {
+  const interval = setInterval(() => {
+    chartRef.current?.push({
+      time: Date.now(),
+      value: Math.random() * 1000
+    })
+  }, 200)
+  return () => clearInterval(interval)
+}, [])
+
+<RealtimeHistogram
+  ref={chartRef}
+  size={[400, 250]}
+  timeAccessor="time"
+  valueAccessor="value"
+  binSize={100}
+/>
+```
+
+Key props: **`binSize`** (required), `timeAccessor` ("time"), `valueAccessor` ("value"). Without a time field in your data, the chart renders blank.
+
+### RealtimeHeatmap
+
+```jsx
+import { useRef, useEffect } from "react"
+import { RealtimeHeatmap } from "semiotic/ai"
+
+const chartRef = useRef()
+
+// IMPORTANT: Data must have fields matching timeAccessor and valueAccessor (defaults: "time" and "value")
+useEffect(() => {
+  const interval = setInterval(() => {
+    chartRef.current?.push({
+      time: Date.now(),
+      value: Math.random() * 500
+    })
+  }, 100)
+  return () => clearInterval(interval)
+}, [])
+
+<RealtimeHeatmap
+  ref={chartRef}
+  size={[400, 250]}
+  timeAccessor="time"
+  valueAccessor="value"
+  heatmapXBins={30}
+  heatmapYBins={10}
+/>
+```
+
+Key props: `timeAccessor` ("time"), `valueAccessor` ("value"), `heatmapXBins`, `heatmapYBins`. Both accessors must match your data fields or the chart renders blank.
+
+### Streaming Sankey with Particles (StreamNetworkFrame)
+
+Use `StreamNetworkFrame` only when you need low-level control that HOC charts don't expose. For most cases, use `ForceDirectedGraph`, `SankeyDiagram`, or `ChordDiagram` instead.
 
 ```jsx
 import { useRef, useEffect } from "react"
@@ -464,18 +788,18 @@ import { StreamNetworkFrame } from "semiotic"
 
 const chartRef = useRef()
 
-// Push edges at any frequency
 useEffect(() => {
-  const edges = [
-    { source: "Salary", target: "Budget", value: 5000 },
-    { source: "Freelance", target: "Budget", value: 1500 },
+  // Push individual edges — NOT a full snapshot.
+  // Each push adds one edge event to the streaming sankey.
+  chartRef.current.push({ source: "Salary", target: "Budget", value: 5000 })
+  chartRef.current.push({ source: "Freelance", target: "Budget", value: 1500 })
+
+  // Or batch multiple edges at once:
+  chartRef.current.pushMany([
     { source: "Budget", target: "Rent", value: 2000 },
     { source: "Budget", target: "Food", value: 800 },
-    { source: "Budget", target: "Savings", value: 1500 }
-  ]
-  for (const edge of edges) {
-    chartRef.current.push(edge)
-  }
+    { source: "Budget", target: "Savings", value: 1500 },
+  ])
 }, [])
 
 <StreamNetworkFrame
@@ -483,7 +807,98 @@ useEffect(() => {
   chartType="sankey"
   size={[800, 400]}
   edgeOpacity={0.4}
+  showParticles={true}
+  particleStyle={{
+    radius: 2,
+    opacity: 0.8,
+    speedMultiplier: 1.5,
+    maxPerEdge: 4,
+    colorBy: "source"
+  }}
+/>
+```
+
+Key props: `chartType="sankey"`, `showParticles` (boolean — enables animated particles flowing along edges), `particleStyle` (`{ radius, opacity, speedMultiplier, maxPerEdge, colorBy }`), push via ref (`push` for single edge, `pushMany` for batch, `clear` to reset)
+
+### Streaming any chart type via Stream Frames
+
+The Realtime* HOCs are convenience wrappers. For streaming versions of scatter, stacked area, bar, or any other chart, use the corresponding Stream Frame with `runtimeMode="streaming"`:
+
+```jsx
+import { useRef } from "react"
+import { StreamXYFrame } from "semiotic/xy"
+
+const chartRef = useRef()
+
+// Push data via ref — same push API as Realtime* HOCs
+chartRef.current?.push({ time: Date.now(), size: 42, category: "A" })
+
+<StreamXYFrame
+  ref={chartRef}
+  chartType="scatter"
+  runtimeMode="streaming"
+  xAccessor="time"
+  yAccessor="size"
+  colorAccessor="category"
+  size={[600, 300]}
+  margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
 />
 ```
 
-Key props: push via ref (`push`, `pushMany`, `clear`), `chartType="sankey"`, uses `StreamNetworkFrame` from `semiotic`
+Available Stream Frames: `StreamXYFrame` (line, area, stackedArea, scatter), `StreamOrdinalFrame` (bar, grouped bar), `StreamNetworkFrame` (sankey, force, chord)
+
+---
+
+## Server-Side Rendering
+
+### renderToStaticSVG (Node.js)
+
+```ts
+// IMPORTANT: frameType is "xy" | "ordinal" | "network" — NOT a component name like "BarChart"
+import { renderOrdinalToStaticSVG } from "semiotic/server"
+
+const data = [
+  { category: "Q1", value: 120 },
+  { category: "Q2", value: 148 },
+  { category: "Q3", value: 135 },
+  { category: "Q4", value: 162 },
+]
+
+const svg: string = renderOrdinalToStaticSVG({
+  data,
+  categoryAccessor: "category",
+  valueAccessor: "value",
+  width: 600,
+  height: 400,
+})
+
+// Or use the generic function:
+import { renderToStaticSVG } from "semiotic/server"
+const svg2 = renderToStaticSVG("ordinal", { data, categoryAccessor: "category", valueAccessor: "value" })
+```
+
+Key: `renderToStaticSVG(frameType, props)` where frameType is `"xy"` | `"ordinal"` | `"network"`. Type-specific shortcuts: `renderXYToStaticSVG`, `renderOrdinalToStaticSVG`, `renderNetworkToStaticSVG`.
+
+---
+
+## Export
+
+### exportChart (browser)
+
+```jsx
+import { useRef } from "react"
+import { Scatterplot } from "semiotic/ai"
+import { exportChart } from "semiotic"
+
+const containerRef = useRef<HTMLDivElement>(null)
+
+// Pass the WRAPPER DIV, not the SVG element — exportChart finds canvas+SVG internally
+<div ref={containerRef}>
+  <Scatterplot data={data} xAccessor="x" yAccessor="y" width={600} height={400} />
+</div>
+<button onClick={() => exportChart(containerRef.current!, { format: "png" })}>
+  Download PNG
+</button>
+```
+
+Key: `exportChart(wrapperDiv, { format, filename, scale, background })`. It queries the wrapper for canvas and SVG elements internally. Default format: PNG with 2x scale.