Abstract 1 Main Concept 2 Implementation and Elements References

Journey of a Time Machine

Florian Sass ORCID TU Wien, Austria Jakob Speitkamp ORCID TU Wien, Austria Guilherme Monteiro Oliveira ORCID TU Wien, Austria
Abstract

What does the story of Netflix’s Dark look like from the perspective of the suitcase time machine? We visualized this perspective with our contribution to the Graph Drawing Contest Creative Topic. We outline the used ideas, concepts and give a high-level overview over the algorithmic implementations.

Keywords and phrases:
graph drawing, Dark, grid-based graph drawing, 360 degree visualization, cyclic graph drawing
Category:
Graph Drawing Contest Abstract
Copyright and License:
[Uncaptioned image] © Florian Sass, Jakob Speitkamp, and Guilherme Monteiro Oliveira; licensed under Creative Commons License CC-BY 4.0
2012 ACM Subject Classification:
Human-centered computing → Graph drawings
DOI:
10.4230/LIPIcs.GD.2025.42
Event:
33rd International Symposium on Graph Drawing and Network Visualization (GD 2025)
Editors:
Vida Dujmović and Fabrizio Montecchiani
Series and Publisher:
LIPIcs Logo Leibniz International Proceedings in Informatics, Schloss Dagstuhl – Leibniz-Zentrum für Informatik

1 Main Concept

We are interested in the interactions with time machines in the story of Dark. Therefore, we visualize the journey of the suitcase time machine, a central method of time travel in the first two seasons of Dark. It traces the machine’s path from character to character, showing how it is acquired, lost, created, and how it eventually breaks down. The graph highlights key, life- defining moments connected to the machine and emphasizes its cyclical nature, reflecting the show’s core themes. Our concept is mostly inspired by and based on already existing material on the topic, like YouTube videos [5] [6] and wiki articles [4].

To bring this concept to life, we defined several core components for our graph:

  1. 1.

    Blocks: Each block represents a period when a specific character possesses the time machine. It’s a group of nodes showing how they acquire it, their experiences, and how it’s eventually lost or passed on.

  2. 2.

    Time-period color coding: Nodes within a block are color-coded based on the time-period in which the events occur. A change in color between nodes typically indicates time travel, though not necessarily via the suitcase time machine.

  3. 3.

    Life stages: We illustrate the time machine’s three life stages: blueprint, working, and broken. These are shown at a high level for each character and are marked on specific nodes where a change occurs.

  4. 4.

    Trigger events: These are key moments in the narrative of the time machine itself. It’s important to note that these are distinct from the dataset’s predefined important triggers. Trigger events are shown by a golden glow around a node.

2 Implementation and Elements

We assigned story-relevant nodes to blocks and generated a separate grid layout for each. These blocks were manually arranged on a shared canvas, combining manual control of the overall layout with automatic placement of nodes within blocks. Edge routing was automated, minimizing collisions with other elements.

2.1 Libraries and Tools

We built the visualization as an SVG using D3 [1] and D3-Plus [2], with Node.js [3] for file handling and setup. This powered a simple web app that visualized the graph, allowed real-time adjustments to key variables via an UI, and supported interactive click-and- drag for certain elements. We also integrated the preview tool for one-click 360° viewing.

2.2 Data handling and Node selection

To select the relevant nodes for out story we first visually identified them in the already existing visualization and then traversing the dataset to mark all relevant nodes. Since some details were missing, we supplemented nodes, referred to as context nodes. In total, we ended up with 126 nodes (15 new) and 142 edges (35 new).

2.3 Node placement

To determine the position of each node within a block, we first performed a topological sort on all nodes in that block. We then used the resulting order, along with some logic, to assign positions within the block grid. We introduced a parameter to independently adjust the aspect ratio of each block to have more control over the layout.

2.4 Edge routing

To route the edges, we start with straight lines between nodes, which are passed to a shaping pipeline with several key steps:

  • ■

    collision avoidance with blocks, nodes and summary nodes

  • ■

    reduction of excess routing points, which were introduced by collision avoidance

  • ■

    evenly spacing edges connected to a single node side

  • ■

    smoothly bending the edge line at routing points

Because the contest format was a 360° display, an edge will use the shorter path towards a node. If an edge crosses the image border (left or right), the edge is split into two sub-edges, one for each side.

2.5 Summary Nodes

To provide more context, we added summary nodes that represent related, non-selected nodes within the broader storyline. Each includes a bubble chart showing the number of summarized nodes per time-period. Their edges follow a separate routing along the top to maintain focus on the main storyline.

References