Getting Started
Basic workflows for using Noodles.gl to create geospatial visualizations and animations.
New to node-based workflows? Start with Introduction to Workflows to learn the fundamentals of how data flows through Noodles.gl.
Interface Overview
Node Editor
- Add Operators: Right-click an empty area of the canvas or press 'a' to open the operator menu
- Connect Data: Drag from output handles to input handles
- Navigate: Use breadcrumbs to move between containers, or press 'u' to go up one container level
Properties Panel
- Configure Inputs: Adjust operator parameters
- Reorder Fields: Drag to change input order
- Timeline Controls: Keyframe values for animation
- See the full Properties Panel reference for context menu actions and field management
Timeline Editor
- Keyframes: Click any parameter in property panel to add keyframes
- Animation: Create smooth motion with bezier curve interpolation
- Playback: Press 'space' to play animation
Tools Shelf
The Tools Shelf in the top menu provides quick access to common operations:
| Tool | Description |
|---|---|
| Add Node | Opens the operator menu at canvas center |
| Create Point | Geocoding wizard to create a PointOp from an address or coordinates |
| Import Data | Import CSV/JSON files and auto-create a visualization pipeline |
Create Point Wizard
Search for locations by address or paste coordinates. The wizard uses multiple geocoding services with automatic fallback:
- Google Places (if API key configured)
- Mapbox (if API key configured)
- Photon (free, no key required)
Creates a PointOp node with the selected coordinates.
Import Data
Drag-and-drop or browse for CSV/JSON files. The importer automatically creates a complete visualization pipeline including data source, layer, and map components. Files are saved to your project's data directory.
Your First Project
Data Source → Filter/Transform → Deck.gl Layer
- Load Data: Start by adding a data source operator (JSON, CSV, or API)
- Add Visualization: Connect your data to a Deck.gl layer operator
- Style & Configure: Use the properties panel to customize appearance
- Animate: Add timeline keyframes to create smooth animations
- Export: Generate images, videos, or interactive applications
Try the NYC Taxis Example
See Noodles.gl in action with a real-world dataset:
This example visualizes millions of NYC taxi trips using:
- Arc layers connecting pickup and dropoff locations
- Brushing interaction to filter trips
- Timeline animation showing temporal patterns
If running locally: http://localhost:5173/examples/nyc-taxis
Need API Keys?
Some features require API keys for external services. See API Keys Configuration for setup instructions.