Description of the agent
A Streamlit app that lets you sketch points or freehand curves on an interactive canvas and instantly converts your drawing into a numeric dataset. It then renders the extracted data in a Plotly chart, shows the corresponding table, and lets you export everything to CSV or Excel.
It’s especially handy for quickly prototyping synthetic datasets—clusters, trends, PCA-style point clouds, or toy signals—and turning them into clean, reusable data for analysis workflows.
Latest version infos (V2)
A Streamlit app that lets youdraw points or freehand curves inside a Streamlit canvas and automatically converts what you drew into a numeric dataset. The app then visualizes the extracted data as a Plotly chart and displays the underlying table, with CSV and Excel export.This is useful when you want to quickly “sketch” synthetic datasets (clusters, trends, PCA-like clouds, toy signals) and immediately get a clean table you can reuse in analysis pipelines.
Features
- Interactive drawingPoints mode: click to place points. Curve mode: click-and-drag to draw a curve (freehand path). Points mode: click to place points. Curve mode: click-and-drag to draw a curve (freehand path).
- Points mode: click to place points.
- Curve mode: click-and-drag to draw a curve (freehand path).
- Axis mapping (real coordinates)Define X min / X max and Y min / Y max. Pixels from the canvas are converted into real numeric coordinates. Define X min / X max and Y min / Y max. Pixels from the canvas are converted into real numeric coordinates.
- Define X min / X max and Y min / Y max.
- Pixels from the canvas are converted into real numeric coordinates.
- Multiple classes / colorsChoose a class (label) mapped to a stroke color. Each drawing object is tagged with its class. Choose a class (label) mapped to a stroke color. Each drawing object is tagged with its class.
- Choose a class (label) mapped to a stroke color.
- Each drawing object is tagged with its class.
- Live updateOptionally refresh the extracted dataset as you draw. Optionally refresh the extracted dataset as you draw.
- Optionally refresh the extracted dataset as you draw.
- VisualizationAuto view: points or lines depending on what you drew. Optional marginal histograms for quick distribution checks. Auto view: points or lines depending on what you drew. Optional marginal histograms for quick distribution checks.
- Auto view: points or lines depending on what you drew.
- Optional marginal histograms for quick distribution checks.
- Data exportDownload extracted points as CSV or Excel (.xlsx). Download extracted points as CSV or Excel (.xlsx).
- Download extracted points as CSV or Excel (.xlsx).
How it works
1) Drawing capture (Canvas → JSON)
The app uses streamlit-drawable-canvas to capture what the user draws. The widget returns a JSON structure (canvas.json_data) that contains a list of Fabric.js objects in objects.Two object types are handled:
- Circles (type == "circle") → used for point drawing
- Paths (type == "path") → used for freehand curves
2) Coordinate conversion (Pixels → real data)
The script defines the canvas size:
- CANVAS_W = 900
- CANVAS_H = 450
It maps canvas pixel coordinates (xp, yp) into numeric coordinates (x, y) using the axis ranges selected in the sidebar:
- x = x_min + (xp / CANVAS_W) * (x_max - x_min)
- y = y_max - (yp / CANVAS_H) * (y_max - y_min) (Y is inverted because canvas Y increases downward.)
3) Curve sampling
Freehand paths can contain many points, so the script samples them using:
- SAMPLE_STEP = 3
This keeps the dataset manageable while preserving the curve shape.
4) Path positioning heuristic (absolute vs relative)
Depending on how Fabric.js encodes paths, path coordinates may be:
- already absolute in canvas coordinates, or
- relative and require adding (left, top) as an offset.
The script estimates which case applies by checking how many path points fall within canvas bounds. If most points are in-bounds, it treats them as absolute; otherwise it offsets by (left, top).
5) Dataset assembly
All extracted points are appended into a Pandas DataFrame with these columns:
- x, y: numeric coordinates in your chosen axis ranges
- color: hex stroke/fill color used for that object
- label: class label mapped from color
- source: "point" or "curve"
- x_pix, y_pix: original pixel coordinates on the canvas
6) Plotting and table
The app displays:
- a Plotly chart (scatter or line) using the extracted (x, y)
- a dataframe view of the dataset
- export buttons for CSV and Excel
Dependencies
- streamlit: UI / app runtime
- streamlit-drawable-canvas: interactive drawing widget (Fabric.js under the hood)
- pandas: building the dataset table
- plotly: plotting extracted points/curves
- openpyxl: Excel export support
Comments (0)
Write a comment