Skip to main content

Getting Started

Basic workflows for using Noodles.gl to create geospatial visualizations and animations.

Simple Noodles.gl graph showing DeckRenderer connected to an Out node

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:

ToolDescription
Add NodeOpens the operator menu at canvas center
Create PointGeocoding wizard to create a PointOp from an address or coordinates
Import DataImport 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:

  1. Google Places (if API key configured)
  2. Mapbox (if API key configured)
  3. 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.

For tables of points, the importer looks for latitude and longitude columns (lat/lng, Latitude/Longitude, x/y and common variants) or a WKT or GeoJSON geometry column. It then fits the camera to the data and, when there is an obvious numeric column such as population or magnitude, sizes the points by it. If no coordinates are found, a message says so and the position is left for you to set in the Accessor node. Dropping a CSV on the start screen does the same in a new project.

Your First Project​

Data Source → Filter/Transform → Deck.gl Layer

  1. Load Data: Start by adding a data source operator (JSON, CSV, or API)
  2. Add Visualization: Connect your data to a Deck.gl layer operator
  3. Style & Configure: Use the properties panel to customize appearance
  4. Animate: Add timeline keyframes to create smooth animations
  5. Export: Generate images, videos, or interactive applications

Try the NYC Taxis Example​

See Noodles.gl in action with a real-world dataset:

Open NYC Taxis Example →

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.