[network-transport-static] Visualization of train network as multi-graph with movable nodes and automatically adjusted edges

[camold]

Description

We would like to visualize a network of trains similar to what the Netzgrafik Editor (https://github.com/OpenRailAssociation/netzgrafik-editor-frontend) does. Phyiscal stations should be displayed as rectangular nodes. Trains are directed edges connecting nodes and having labels for departure, arrival times, and train IDs. The edges are connected to the nodes via handles. Connections between trains should be shown as links within the nodes.
Beside the data on on the trains, the master data should only include coordinates of the train stations. The trains, i.e., edges, should be drawn automatically with handles being automatically distributed on the four sides of the node rectangles.
Ideally, the nodes should be movable my mouse click with the rest of the graphic adjusting automatically subsequently.

Here is another example of such a plot.

Applications

• Analyzing complex routing networks and their connections

Data

No response

Notes

No response

[claude]

✅ Spec ID: network-transport-interactive

Rationale: This is a specialized interactive multi-graph for transportation networks with rectangular station nodes, labeled train edges (showing departure/arrival times), and draggable interactivity—distinct from existing network specs which use circular nodes without time-based labels or transport-specific features.

Add label approved to begin generation.

[github-actions]

✅ Specification Ready: network-transport-interactive

PR: #3572

---

specification.md

network-transport-interactive: Interactive Transport Network Graph

Description

An interactive multi-graph visualization for transportation networks where stations are displayed as rectangular nodes and trains/routes as directed edges connecting them. Edges are labeled with departure times, arrival times, and train identifiers, attaching to node handles distributed along the four sides of each rectangle. The visualization supports dragging nodes to reposition them while edges automatically adjust their paths. This is ideal for understanding complex timetables, connections, and routing patterns in rail or transit systems.

Applications

• Analyzing train network timetables to identify connection opportunities and transfer points between services
• Visualizing public transit routes and schedules for operational planning and passenger information systems
• Mapping flight or bus connections between hubs to optimize scheduling and minimize layover times

Data

• stations (list of dicts) - nodes with unique IDs, labels, and x/y coordinates for initial positioning
• trains (list of dicts) - directed edges with source station, target station, train ID, departure time, and arrival time
• connections (list of dicts, optional) - internal links within stations representing transfers between trains
• Size: 5-30 stations with 10-100 train connections for readable visualization
• Example: A regional rail network with 15 stations and 50 daily train services showing departure/arrival times

Notes

• Stations should be rendered as rectangles with sufficient size to display labels and accommodate multiple edge handles
• Edge handles should be automatically distributed on the four sides of station rectangles based on edge direction and count
• Edges should display train ID and times as labels, with arrows indicating travel direction
• Implement drag-and-drop functionality for nodes with edges re-routing automatically
• Consider curved or orthogonal edge routing to avoid overlaps when multiple trains connect the same station pair
• Internal station connections (transfers) can be shown as links within the node or as small arcs

---

Next: Add approved label to merge this specification to main.

---

🤖 spec-create workflow

[MarkusNeusinger]

🔄 Spec ID Override: network-transport-static

After analyzing the original request and comparing it with the Netzgrafik Editor, the spec will be split into phases.

Why not directly interactive?

The interactive version with draggable nodes and automatic edge-rerouting requires complex calculations:

• Edge-Rerouting: Every node movement requires recalculating all connected edges (path algorithms, collision avoidance)
• Handle Distribution: Automatic distribution of connection points across 4 sides of rectangles requires geometric optimization
• Performance: With 20+ nodes and 50+ edges, real-time recalculation becomes computationally intensive
• Library Support: Only 2-3 of the 9 libraries (Plotly, Highcharts, possibly Bokeh) can support dragging at all

Strategy: Static first, then interactive

1. Now: network-transport-static - Static visualization with all features except interactivity
2. Later: network-transport-interactive - Can follow as a separate issue for capable libraries

The static version enables:

• All 9 libraries can deliver meaningful implementations
• Focus on correct presentation (nodes, edges, labels, times)
• Foundation for future interactive extension

[MarkusNeusinger]

✅ Specification Ready: network-transport-static

PR: #3573

---

specification.md

network-transport-static: Static Transport Network Diagram

Description

A directed network visualization for transportation systems where stations are displayed as labeled nodes and train/bus routes as directed edges. Edges display departure times, arrival times, and route identifiers. Designed for visualizing timetables, route maps, and connection patterns in rail, bus, or flight networks. This static version focuses on clear, readable presentation without interactive repositioning.

Applications

• Visualizing regional train networks with departure and arrival times at each station
• Displaying bus route maps showing service frequency and travel times between stops
• Analyzing flight connections between airports with layover and connection information
• Planning public transit coverage by mapping routes and identifying service gaps

Data

• stations (list of dicts) - nodes with id, label, x, y coordinates for positioning
• routes (list of dicts) - directed edges with source_id, target_id, route_id, departure_time, arrival_time
• Size: 8-20 stations with 15-60 routes for optimal readability
• Example: A regional rail network with 12 stations and 35 daily train services showing hourly departures

Notes

• Station nodes should display labels clearly; size nodes to accommodate station names
• Edges must show direction with arrows indicating travel direction
• Edge labels should display route identifier and times (e.g., "RE 42 | 08:15 → 09:30")
• When multiple routes connect the same station pair, use curved or offset edges to distinguish them
• Node positioning based on provided x/y coordinates; no force-directed layout needed
• Consider color-coding routes by type (regional, express, local) or frequency
• Tooltips (where supported) should show full route details on hover

---

Next: Add approved label to merge this specification to main.