DOCSEARCHbyAlgolia
Submit Docs

Noodles.gl Documentation

website·Indexed 31 days ago

https://noodles.gl

A React-based visualization platform for creating animated timeline presentations and geospatial data visualizations.

Tokens
645
Snippets
2
Records
5
Agent score
9%

What's inside Noodles.gl

  1. Overview of Noodles.gl

    Noodles.gl is a node-based editor for creating geospatial visualizations and animations. It utilizes a reactive data flow and visual programming to build interactive presentations and high-quality renders. Key capabilities include geospatial visualization via Deck.gl and MapLibre, timeline-based animation with native bezier interpolation, and support for JSON, CSV, and GeoJSON data formats. Outputs can be exported as video, images, or interactive web presentations.

  2. Set up Noodles.gl for local development

    To set up the Noodles.gl development environment, install all dependencies, start the application server, or build the project for production using the following yarn commands.
    # Install dependencies
yarn install:all

# Start development server
yarn start:app

# Build for production
yarn build:all

  3. Noodles.gl technology stack and dependencies

    Noodles.gl is built with a modern web stack focused on high-performance geospatial rendering and state management:

    • Core: React, TypeScript, Vite
    • Visualization: Deck.gl (WebGL geospatial layers), MapLibre GL JS (Map rendering)
    • State & Data: Zustand (State management), Immer (Immutable updates), DuckDB-WASM (In-browser SQL queries)
    • UI: React Flow (Node-based editor interface)
    • Animation: Native Timeline with bezier curves

  4. Understand the Noodles.gl repository structure

    The project is organized into the editor application, the documentation site, and architectural guides:
    /noodles-editor/          # Main editor application (React + TypeScript)
  /src/
    /noodles/
      /components/        # UI components for the editor
      /operators/         # Built-in operator implementations
      /fields/            # Field type system
    /visualizations/      # Deck.gl visualization layers
    /utils/               # Utility functions
/website/                 # Documentation site (Docusaurus)
  /docs/                  # Documentation markdown files
    /users/               # User-facing documentation
    /developers/          # Developer documentation
  /static/                # Static assets
/docs/                    # Additional documentation (symlinked to website/docs)
/dev-docs/                # Development and architecture documentation

  5. Noodles.gl architectural concepts

    Noodles.gl operates on a reactive node-based system with the following core components:

    • Operators: Nodes that process data.
    • Fields: Type-safe definitions for inputs and outputs.
    • Paths: Mechanisms for deep data access and manipulation.
    • Containers: Managers for collections of operators.
    • Timeline: Integration for keyframing any parameter. Changes in the node graph propagate automatically through the reactive data flow.