VCAG — View Coordinates As Graph

A VS Code extension that extracts coordinate data from selected text and visualizes it as an interactive 2D/3D graph using Plotly.js, with optional map display via Leaflet.js + OpenStreetMap.

Just select any text containing numbers — no formatting needed. Works with messy, mixed-format data: debug output, log files, SVG paths, code snippets, whatever. VCAG greedily picks up coordinates from 8+ format patterns so you don't have to clean up your data first.

2D — Rose Curve	3D — Spherical Spiral

Usage

From selection (editor)

1. Select text containing coordinate data in the editor
2. Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and run Coord Graph: Plot Coordinates from Selection
3. A graph appears in a Webview panel

From clipboard (terminal, debug console, etc.)

The editor selection API is not available when focus is on the terminal or debug console. Use the clipboard instead:

1. Select and copy (Cmd+C / Ctrl+C) the coordinate data (e.g. from terminal output, debug console, or any other view)
2. Run Coord Graph: Plot Coordinates from Clipboard from the Command Palette
3. A graph appears in a Webview panel

Supported Formats

# Labeled (x:1.0, y:2.0 / lat: 35.68, longitude: 139.76, etc.)
x: 1.0, y: 2.0
lat: 35.68, lng: 139.76

# JSON arrays
[[1, 2], [3, 4], [5, 6]]

# Parentheses (Point3::new(1,2,3) / with units: 100mm, 200mm, etc.)
(35.68, 139.76), (35.69, 139.77)
(100.0mm, 200.0mm)

# Braces (C/C++ initializer list)
{1.0, 2.0, 3.0}

# Semicolon (MATLAB, etc.)
1.0; 2.0; 3.0

# Comma-separated (tight / spaced)
1,2  1,2,3
10.0, 20.0
12.5, 22.3

# SVG path d attribute (M/L/H/V/C/Q/A/Z — curves are interpolated)
d="M 10 80 C 40 10 65 10 95 80"
M 0 0 L 100 0 L 100 100 Z

# Space/tab (point clouds, OBJ, PLY, WKT, etc.)
1.0 2.0 3.0

# Scientific notation
1.5e2, 3.0e-1

Both 2D and 3D coordinates are automatically detected. Formats can be mixed — VCAG picks up whatever it can find. Bezier curves (C/Q) and arcs (A) in SVG paths are smoothly interpolated rather than reduced to endpoints.

Features

• 2D / 3D toggle — Switch between XY 2D and 3D views for 3D data
• Connect lines — Draw lines between points in order to trace the path
• Close loop — Connect the last point back to the first to form a closed shape
• Swap XY — Swap X and Y values (useful for lat/lng reordering)
• Flip Y — Reverse Y-axis (useful for screen coordinates)
• Map mode — Display coordinates on an OpenStreetMap tile layer using Leaflet.js (toggle with the Map checkbox)
• Index Label — Show 1-based point indices on the graph and map (toggle with the Index Label checkbox). Nearby map labels are spread so they stay readable.

Installation

From Open VSX (VS Code, Cursor, VSCodium):

1. Open Extensions view
2. Search for "VCAG" or "Coord Graph"
3. Install

From VSIX file:

code --install-extension vcag-0.3.1.vsix

Or in VS Code: Extensions view → ... → Install from VSIX... and select the .vsix file.

Development

npm install
npm run compile   # Type check + build
npm run watch     # Watch mode (esbuild + tsc)
npm test          # Run tests
npm run build     # Package as .vsix

License

MIT