Data Visualizing

Data Visualizing

The SILAS Web demo app is a powerful tool for visualizing and exploring data from various sources. Built upon the foundation of Kepler.gl's kepler.gl/examples/demo-app, it showcases a flexible and interactive data visualization platform. This app seamlessly integrates data from different sources, including:

  • Silas API: Fetches one-time data from a Silas API endpoint, providing a snapshot of information.
  • MQTT Broker: Continuously receives real-time data updates from an MQTT broker, enabling dynamic visualization of changing data.
  • Preloaded JSON Data: Loads pre-defined datasets from data/kepler.gl.json, offering a starting point for exploration.
  • Map Tiles: Utilizes map tiles from various sources, including Mapbox and a local 3D tiles server, providing a rich and detailed map context.
  • GLTF Models: The app supports loading GLTF models, such as drones, to enhance the visualization with 3D representations. These models are integrated into the map using Deck.gl's ScenegraphLayer, allowing for realistic and interactive 3D visualizations of objects in the environment.
  • JSON/CSV Files: The app can load data from local JSON or CSV files, enabling the analysis of static datasets.
  • Server-Side Database: The app can query data from the backend server's database (powered by server.py), providing access to dynamic and potentially large datasets.

These data sources are visualized using a combination of Kepler.gl and Deck.gl layers, each tailored to handle specific data types and visualization requirements:

Kepler.gl Layers:

  • Data Layers: Kepler.gl's built-in data layers are used to visualize the preloaded JSON data and data fetched from the Silas API. These layers offer interactive features like data filtering, highlighting, and tooltip information.

Deck.gl Layers:

  • MQTT Data Layer: A custom Deck.gl layer is implemented to visualize real-time data received from the MQTT broker. This layer dynamically updates the map based on the latest data, providing a live view of changing information. The updateMqttDroneLayer function combines MQTT drone data with trajectory data, interpolating positions for smooth transitions and updating the ScenegraphLayer to reflect these changes.
  • 3D Tiles Layer: A Deck.gl Tile3DLayer is used to display 3D tiles from the local server, providing a detailed and immersive 3D representation of the environment.
  • Trajectory Layers: Deck.gl layers like LineLayer and PathLayer are used to visualize trajectories, animating the movement of objects over time.

MapLibre Tiles: The app leverages MapLibre GL JS for rendering the map, providing a performant and customizable base for visualization. MapLibre tiles, including terrain and basemap data, are loaded as sources for the Mapbox overlay, offering a rich and detailed map context.

The app's architecture is designed to be modular and extensible, allowing for easy integration of new data sources and visualization techniques. This flexibility makes it a valuable tool for exploring and understanding data from diverse domains.

Key Components:

  • src/app.js: The main application component, responsible for data loading, visualization, and user interaction.
  • src/actions/index.js: Defines actions for data loading, exporting maps, and handling cloud provider interactions.
  • src/factories: Contains factories for customizing Kepler.gl components.
  • src/reducers/index.js: Manages the application's state using Redux.
  • src/utils: Provides utility functions for various tasks.

This architecture allows for a clear separation of concerns, making the codebase easier to understand, maintain, and extend. The app's modular design enables developers to easily add new features and adapt it to different data visualization needs.

Utils