CSV Graph Explorer
CSV Graph Explorer is a local-first VS Code extension for inspecting CSV data as interactive line or scatter plots. Opening a *.csv file uses the graph editor by default; use the Open CSV Source editor-title action whenever the source needs editing.
Features
- Open up to four plot panes for the same CSV file.
- Switch the active CSV tab between the graph and editable source views from the editor-title actions.
- Start with an automatically selected shared X (time preferred, otherwise the first numeric column) and no Y curves; the empty chart keeps its axes and grid ready for drops.
- Split any plot to an available left, right, top, or bottom position; the new pane inherits the workspace X/zoom but starts with no Y curves, and directions that cannot fit two usable plots are hidden.
- Use one shared X and navigation window for every plot in the CSV. Changing X, zooming, panning, or resetting the view updates all panes.
- Click or focus a pane to make it active. Plot mode, Y buttons, and matched-column batch actions affect that pane; the X button and Reset View are workspace-wide.
- Give every pane its own Y selection, line or scatter mode, and legend visibility.
- Read every hovered Y value in a compact multi-column tooltip; dense tooltips remain scrollable inside the plot.
- Drag nested plot dividers to resize panes, or focus a divider and use the arrow keys.
- Maximize and restore a pane inside the plot area; closing a pane collapses the remaining layout without leaving an empty slot.
- Drag a numeric column from Columns directly into a plot body to add it as Y. Repeated drops are harmless; the smaller Y target and buttons remain available.
- Drag a numeric or time column onto any X target, or click its X button, to change the shared X for every plot.
- Filter column names with case-insensitive AND terms and add or remove all matched numeric columns from the active pane's Y selection.
- Zoom with the mouse wheel, drag to pan, hover for crosshair values, and click legend items to hide series.
- Inspect source-order rows in a virtualized table.
- Drag the outer panel dividers to resize the column list, plot area, and shared table.
- Parse comma, semicolon, and tab-delimited UTF-8 files in a Web Worker.
- Detect numeric and ISO-like time columns automatically.
Multi-Plot Workflow
- The shared X is selected automatically. To replace it, click another column's X button or drag that column onto any X target; the current X cannot be cleared.
- Use a plot's arrow buttons to create a pane with no curves, then drag numeric columns directly into its plot body.
- Select a pane before changing its Y fields, plot mode, or matched-column batches. The active plot is identified in the top bar and by its highlighted border; zoom, pan, crosshair, and Reset View stay synchronized globally.
The split layout, shared X/zoom, active and maximized pane, and each pane's Y/mode/legend state are restored from the Webview state. Existing single-plot state is migrated automatically when first opened by version 0.2.0.
Editing CSV Source
Use the Open CSV Source file-code action in the graph editor title bar to reopen the current tab as an editable text file. After editing, use Open as CSV Graph in the same location to return to the graph. The switch stays in the active editor group instead of creating a permanent side-by-side copy, and the graph's panes, selections, modes, zoom, and legend state are restored for that CSV during the current VS Code session.
Run Locally
npm install
npm run check
npm test
npm run build
Press F5 in VS Code to launch an Extension Development Host, then open a CSV file.
To produce an installable package:
npm run package
code --install-extension csv-graph-explorer-0.2.2.vsix --force
CSV Rules
- The first record is the header.
- Duplicate headers are displayed with suffixes such as
value (2).
- Type inference samples up to 1,000 non-empty values and requires a 95% match.
- At least one numeric or ISO-like time column is required for X; text-only data shows an unavailable-X message.
- Invalid X values are omitted from the chart. Invalid Y values become gaps.
- Chart points are stably sorted by X; the table always preserves source order.
Current Limits
- The graph view is read-only; use its editor-title source action to edit the CSV as text.
- A CSV can have at most four plot panes.
- Headerless and non-UTF-8 CSV files are not supported.
- Plot layout and pane state are session-only; they are not durable per-file profiles across VS Code restarts.
- X and navigation are intentionally shared and cannot differ between panes of the same CSV.
- The whole document is transferred to the parser worker, so very large files require additional memory while parsing.
| |
