Building a data-driven station visualization system in Unity 3D.
From Visual Prototype to System Architecture
In many design workflows, the visual interface is the final layer. But in complex systems, the real challenge lies in designing the structure behind the interface.
Recently I started building a transit-style UI simulator in Unity. The initial goal was simple: generate station progress screens similar to those used in transport systems. However, as development progressed, the project naturally evolved into something more interesting — a data-driven system that generates and animates UI elements automatically.
Instead of manually arranging elements, the system allows data to define the interface behavior.
The Core Idea: Let Data Drive the UI
The first architectural decision was separating content from presentation.
Station information such as ID, name, and station code is stored externally in a CSV file. When the system loads the file, it dynamically generates all station objects and their corresponding UI controllers.
This approach introduces several benefits:
• Rapid content updates without rebuilding layouts • Scalable design for routes with many stations • A clear separation between data and visual logic
The result is a workflow where modifying a station name or adding a new stop requires only a CSV edit, not manual UI adjustments.
System Components
The project eventually evolved into several interconnected systems.
1. CSV Object Loader
This module reads structured station data and passes it into the runtime system. Each row becomes a station object containing:
Once loaded, the system determines the first and last station automatically, which later becomes important for route direction logic.
2. Dynamic Station Object Generation
Instead of manually placing UI elements, the system spawns:
• Station UI objects • Manipulator controls for editing station properties • Toggle-based selectors for previewing the current station
Each station object carries a unique ID and visual state controller.
This architecture ensures that UI logic remains consistent regardless of how many stations exist in the route.
3. Station State System
A transit interface typically represents three states:
Each station object updates its appearance depending on the state.
Examples include:
A coroutine-based pulse animation is used to highlight the current station.
4. Direction-Aware Navigation Logic
Transport interfaces often operate in two directions:
To support this, the system dynamically determines the starting station based on the selected direction. It also recalculates which stations should be classified as visited or pending.
This allows the interface to instantly adapt when the direction changes without rebuilding the UI.
Recommended by LinkedIn
5. Animated Route Indicator
The system includes an animated arrow that continuously moves between stations.
The arrow animation is driven by two reference points:
When a user selects a different station from the manipulator panel, the arrow automatically updates its destination.
This creates a simple but effective visual representation of route progression.
6. Automated Video Capture Pipeline
One of the practical goals of the project was generating ready-to-export station animations.
The capture system includes:
• a dedicated capture camera • a fixed render texture resolution • frame-by-frame PNG export • automated video encoding via FFmpeg
Instead of recording manually, the system captures frames programmatically and converts them into a video file.
This creates a reliable workflow for generating clean UI demonstration footage or simulation outputs.
Why Unity?
Unity is typically associated with games, but it is also a powerful environment for:
Using Unity allowed the system to combine UI logic, animation control, and video output inside a single environment.
Lessons From the Project
Several insights emerged during development.
Systems Matter More Than Screens
A good interface is not just a visual layer. It is the result of well-structured relationships between data, logic, and presentation.
Data-Driven Design Scales Better
Hard-coding UI elements quickly becomes fragile. Structuring systems around data allows the interface to evolve without breaking.
Tool Thinking Changes Development
When a prototype evolves into a reusable tool, development decisions change. Code becomes less about solving a single problem and more about enabling repeatable workflows.
Looking Forward
This project is still evolving. Future improvements may include:
What began as a small UI prototype is slowly becoming a modular system for generating dynamic transit interface simulations.
If you're working on UI systems, visualization tools, or creative technology workflows, I'd be interested to hear how you approach similar challenges.
Always happy to connect and exchange ideas.
#Unity #CreativeTechnology #DataDrivenDesign #InteractiveSystems #DataVisualization #UIEngineering #TechLead #EmergingTech