Data Visualization

4 min read

Create data-driven charts on the PinePaper canvas. Upload CSV or JSON data, choose a chart type, and get animated visualizations that integrate with the rest of your scene.

Chart Types

Bar Chart

app.createBarChart([
  { category: 'A', value: 10 },
  { category: 'B', value: 25 },
  { category: 'C', value: 15 },
], {
  xField: 'category',
  yField: 'value',
  title: 'Sales by Region',
  colors: ['#f59e0b', '#3b82f6', '#a855f7'],
});

Line Chart

app.createLineChart([
  { x: 0, y: 0.2 }, { x: 1, y: 0.8 },
  { x: 2, y: 0.5 }, { x: 3, y: 0.9 },
], {
  xField: 'x',
  yField: 'y',
  title: 'Growth Over Time',
  lineColor: '#3b82f6',
  animation: { type: 'progressive', speed: 0.5 },
});

Scatter Plot

app.createScatterPlot([
  { x: 0.1, y: 0.9, size: 8 },
  { x: 0.5, y: 0.3, size: 12 },
  { x: 0.8, y: 0.7, size: 6 },
], {
  xField: 'x',
  yField: 'y',
  dotRadius: 6,
  animation: { type: 'entrance', speed: 1 },
});

Area Chart

app.createAreaChart(data, {
  xField: 'date',
  yField: 'revenue',
  fillColor: '#3b82f620',
  lineColor: '#3b82f6',
});

Data Formats

Charts accept multiple input formats:

Format Example
Array of objects [{x: 1, y: 2}, {x: 3, y: 4}]
CSV string "x,y\n1,2\n3,4"
Float64Array Signal buffer from SignalProcessor

Animation

Per-frame Expression (FFT / Signal)

Bar heights computed per frame from trigonometric expressions:

app.createBarChart(fftData, {
  animation: {
    type: 'expression',
    // Each bar: height = amplitude * |sin(speed * 2π * t + phase)|
  }
});

Progressive Draw (Line/Area)

Line draws progressively from left to right:

{ animation: { type: 'progressive', speed: 0.5 } }

Wave Oscillation (Line/Area)

Data points oscillate vertically:

{ animation: { type: 'wave', speed: 1, phase: 0.3 } }

Entrance Stagger (Scatter)

Points appear one by one with staggered timing:

{ animation: { type: 'entrance', speed: 1 } }

Options Reference

Option Type Default Description
x number center Canvas X position
y number center Canvas Y position
width number 400 Chart width in pixels
height number 300 Chart height in pixels
xField string ‘x’ Data column for X axis
yField string ‘y’ Data column for Y axis
title string Chart title text
colors string[] Color palette for bars/series
lineColor string ‘#3b82f6’ Line/area stroke color
lineWidth number 2 Stroke width
fillColor string Area fill color
dotRadius number 5 Scatter dot radius
barWidth number auto Individual bar width
barGap number 4 Gap between bars
xLabel string X axis label
yLabel string Y axis label
animation object null Animation configuration

Data Tab (Editor UI)

The Data tab in the right panel provides a visual interface:

  1. Upload — Drag-and-drop CSV, JSON, GeoJSON, or TopoJSON files
  2. Auto-detect — The system identifies the data type:
    • GeoJSON/TopoJSON → routed to Map System
    • CSV/JSON with tabular data → routed to Chart System
  3. Preview — First 5 rows shown in a table
  4. Column mapping — Select which columns map to X and Y axes
  5. Chart type — Choose bar, line, scatter, or area
  6. Create — One click to place the chart on the canvas

Widget Export

Charts export to PineWidget for blog embeds and standalone HTML files. The widget renders charts using Canvas 2D with per-frame animation — no external dependencies at runtime.