Fast & Interactive

DataGlass renders charts instantly and responds to user interaction. Built on D3.js and Observable Plot, it delivers smooth animations and immediate feedback.

Performance

Charts render in milliseconds. The plugin optimizes large datasets automatically:

Dataset Size	Strategy
Under 1,000 rows	Full render with all features
1,000 - 10,000	Smart aggregation
10,000 - 50,000	Progressive loading
Over 50,000	Automatic sampling

DataGlass caches parsed data and chart configurations. Subsequent renders skip parsing entirely, cutting render time by 40-60%.

Tooltips

Hover over any data point to see its values. Tooltips appear instantly and follow your cursor.

type: scatter
x: price
y: sales
tooltip: true

Customize tooltip content with field names:

tooltip:
  fields: [name, price, quantity]

Crosshair

Track values across axes with crosshair guides. Lines follow your cursor and display coordinates.

type: line
x: date
y: value
crosshair: true

Click Selection

Select data points by clicking. Selected items highlight while others fade.

type: scatter
x: x
y: y
selectable: true

Zoom and Pan

Navigate large datasets by zooming and panning. Scroll to zoom, drag to pan.

type: line
x: date
y: value
zoom: true

Animations

Charts animate smoothly when data changes. Bars grow, lines draw, and points appear with easing.

type: bar
x: category
y: value
animate: true
duration: 500

Control animation timing:

Parameter	Default	Description
animate	true	Enable animations
duration	300	Animation time in ms
easing	'ease'	Easing function

Rendering Engines

Choose the engine that fits your needs:

Observable Plot (Default)

Fast, declarative, batteries-included. Best for standard charts.

engine: plot
type: bar

D3.js

Full control, custom layouts, advanced interactions. Best for specialized visualizations.

engine: d3
type: force

Next Steps

• Chart Gallery - See interactive examples
• D3 Reference - Advanced chart types
• Customization - Style your charts