A web-based plot digitizer tool for extracting data points from graph images. Developed as part of the Starrydata project for building an open database of materials science data.
- Image Upload: Load graph images (PNG, JPG, etc.) for digitization
- Axis Calibration: Define X and Y axes with linear or logarithmic scales
- Manual Point Extraction: Click on data points to extract coordinates
- Auto Point Detection: Automatically detect data points by color
- Multiple Datasets: Manage multiple datasets with different colors
- Magnifier: Zoom in for precise point placement
- Data Export: Export extracted data as CSV or JSON
- Project Save/Load: Save and restore your work
Visit https://t29mato.github.io/starry-digitizer/ to try the tool.
# Install dependencies
npm install
# Start development server
npm run dev- Load Image: Upload a graph image using the image upload button
- Set Axes: Click "Edit Axes" and define axis points:
- Set X1, X2 points on the X-axis with their values
- Set Y1, Y2 points on the Y-axis with their values
- Choose linear or logarithmic scale for each axis
- Extract Points:
- Manual: Click on data points in the graph
- Auto: Use color-based auto-detection for bulk extraction
- Export: Download your data as CSV or JSON
- Vue 3 with TypeScript
- Vite for build tooling
- Vuetify 3 for UI components
- Jest for unit testing
- Cypress for E2E testing
npm run dev # Start dev server
npm run app-prod-build # Production build
npm run test # Run unit tests
npm run test:coverage # Run tests with coverage
npm run cypress:open # Open Cypress for E2E tests
npm run lint # Lint and type-check- VS Code + Vue - Official extension
StarryDigitizer was developed to improve upon existing digitizer tools by:
- Preserving axis information alongside extracted data
- Integrating seamlessly within web applications
- Providing a modern, user-friendly interface
Previously, the Starrydata project used WebPlotDigitizer, but the workflow required switching between applications and lost axis metadata.
See LICENSE file for details.