VSPlot — Data preview & charts inside VS Code

Turn CSV, JSON, TSV, DAT, and scientific flat files into filterable tables and interactive Chart.js dashboards without leaving the editor.

Why VSPlot?

Instant insight: Preview large tabular files in a dedicated webview with search, sorting, pagination, stats, and row selection tailored for data exploration.
Chart.js built-in: Launch the chart builder directly from the preview, apply aggregations, dual axes, zooming, and style presets — all powered by Chart.js v4.
Smart parsing: Auto-detects delimiters, skips comment lines, and gracefully handles inconsistent columns so you keep working instead of cleaning data first.
Stays in sync: Webviews remember layout preferences, compact cards, icon toggles, and chart configuration per file to keep your workspace focused.
Fits your workflow: Works from Explorer, text editor context menus, or command palette, and ships with sample datasets for rapid demos.

Quickstart: preview → chart in under a minute

Install VSPlot from the Marketplace or search "VSPlot" inside VS Code.
Open or right-click a data file (.csv, .json, .tsv, .dat, .tab, .out, .data, .txt) and choose Preview Data.
Filter, search, and sort within the preview webview; then press Create Chart to open the Chart view beside it.
Pick an X axis, up to two Y axes, adjust aggregation/zoom presets, and export the chart as a PNG when you are ready.

💡 Need sample datasets? Run bash scripts/setup-test-data.sh (or use the downloaded archives) and open anything under sample-data/ to explore the UI immediately.

Preview data in seconds

Column-aware filtering: Search across columns, toggle sort order, and paginate large files without waiting.
Row-level insight: Select specific rows to recompute statistics (count, min, max, mean, median, stddev) on the fly.
Delimiter overrides: Switch delimiters from the toolbar (Auto, ,, |, ;, :, \t, space) and the view reparses instantly.
Export what you see: Download filtered results to CSV for sharing or downstream analysis.

Data Preview screenshot

Build interactive charts with Chart.js

Multiple chart types: Line, bar, scatter, pie, doughnut, and radar with presets for color palettes and number formatting.
Dual-axis & aggregation: Plot metrics on primary and secondary Y axes, aggregate categorical data (sum, count, avg, min, max), and switch between linear/time scales.
Zoom & navigate: Scroll-wheel zoom, drag zoom (with fallback for trackpads), and quick reset controls are always visible.
Stateful experience: VSPlot remembers the last configuration per file and exposes hidden vsplot:test:* commands for automated workflows.
Export ready: Save charts as high-resolution PNGs directly from the webview.

Chart View screenshot

Works with the formats you already have

Extension	Default delimiter	Notes
`.csv`	Comma (auto-detect fallback)	Respects quoted fields and comment filtering.
`.json`	—	Parses arrays of objects or key/value maps.
`.tsv` / `.tab`	Tab	Defaults to tab delimiter, can override.
`.txt`, `.dat`, `.out`, `.data`	Auto-detected	Evaluates comma, pipe, semicolon, colon, tab, space.

Comment markers: #, %, and // are ignored by default. Provide custom markers or disable filtering through the API.

Smart parsing extras

Consistency scoring picks the delimiter with the richest, most stable column layout (see Delimiter Detection).
Mixed whitespace, BOM headers, and uneven rows are handled gracefully; malformed lines trigger friendly error toasts.
API consumers can override delimiter and comment options via parseDataFile(uri, { delimiter, commentMarkers }).

Fine-tune the experience

Setting	Default	Description
`vsplot.rowsPerPage`	`150`	Rows to display per page in the preview view.
`vsplot.defaultChartType`	`line`	Initial chart type in the Chart view.
`vsplot.defaultStylePreset`	`clean`	Color palette for new charts (`clean`, `soft`, `vibrant`).
`vsplot.defaultDecimals`	`2`	Numeric precision for axes and tooltips (0, 1, 2).
`vsplot.useThousands`	`false`	Toggle thousands separator by default.
`vsplot.compactStatsCards`	`false`	Use tighter spacing in statistics cards.
`vsplot.showStatsIcons`	`true`	Show icons/badges in stats and dataset cards.

Commands at a glance

Command	Palette ID	What it does
Preview Data	`vsplot.previewData`	Opens the data preview webview for the selected file.
Plot Data	`vsplot.plotData`	Skips straight to Chart view with parsed data.
Open Data Viewer	`vsplot.openDataViewer`	Presents a quick pick of supported files across the workspace.

Access commands via the Explorer context menu, the editor title bar, or the Command Palette (⇧⌘P / Ctrl+Shift+P).

Try it with bundled sample data

sample-data/ includes CSV, JSON, DAT, TSV, and time-series examples generated by scripts/setup-test-data.sh.
test-data/ holds fixtures for delimiter detection and comment handling — perfect for validating parser changes or demos showing resilience.

Docs & resources

Webview architecture — how providers load HTML templates and inject nonces.
Delimiter detection — scoring algorithm and override flow.
Comment handling — default markers and API hooks.
Testing coverage — suites for parsing, edge cases, and extension automation.

Need help or have a request? Open an issue or start a discussion in the repository.

Release notes & contributing

Track releases in CHANGELOG.md.
Contributions are welcome! Please read CONTRIBUTING.md for setup, coding standards, and release flow.

Privacy

VSPlot does not collect telemetry. All parsing and visualization runs locally within your VS Code session.

Developers

Clone the repo, install dependencies, and compile the extension:

npm install
npm run compile

Run the extension in the VS Code Extension Development Host (press F5), or execute the automated test suite:

npm test

Before packaging, refresh Chart.js bundles with npm run copy-vendor to ensure the webviews ship the latest vendor files.

VSPlot - Data Visualization Extension

Anselm Hahn