Interactive Playground

Try DataGlass configurations live in your browser.

How It Works

Edit the YAML on the left, see the chart update on the right. No installation needed.

Embedded Playground

For the static site version, we embed an interactive editor:

Quick Experiments

Try Different Chart Types

Change type: to any of these:

• bar - Bar chart
• line - Line chart
• scatter - Scatter plot
• area - Area chart
• pie - Pie chart
• donut - Donut chart

Add Color Grouping

Add a color field to your data and reference it:

data:
  source: '[
    {"cat": "A", "val": 10, "group": "X"},
    {"cat": "B", "val": 25, "group": "Y"}
  ]'
color: group

Stack Bars

type: bar
stack: true

Change Dimensions

width: 600
height: 400

Playground Features

• Live Preview - See changes instantly
• Error Highlighting - YAML errors shown inline
• Copy Button - Copy working config to clipboard
• Reset - Return to default example
• Share - Generate shareable URL (static site only)

Local Development

To run the playground locally for testing:

cd docs/wiki/playground
npx serve .

Then open http://localhost:3000 in your browser.

Technical Notes

The playground uses:

• Observable Plot for rendering
• CodeMirror for YAML editing
• js-yaml for parsing

Source code: docs/wiki/playground/playground.js