Temporal RectEuler

Welcome!

To our Project "Temporal RectEuler". This is an extension of the Original Paper Implementation of "RectEuler: Visualizing Intersecting Sets using Rectangles." by Paetzold et.al., done by Sebastian Antes and Maximilian Scheiber for the Visualization Course at TU Wien in the winter semester of 2025. It extends the original visualization technique to support temporal data with multiple timestamps. This enables the visualization of how set relationships evolve over time, making it possible to track changes in set memberships, intersections, and hierarchies. We built the extension on top of the existing RectEuler codebase.

Temporal RectEuler visualization

Original RectEuler

About RectEuler

The original implementation by Paetzold et.al. addresses the problem of visualizing intersecting sets using rectangular Euler-like diagrams. Traditional Euler diagrams use circles or ellipses to represent sets. RectEuler instead uses rectangles as geometric primitives, enabling compact and readable visualizations of complex set relationships. The implementation automatically generates well-formed Euler-like diagrams that accurately represent set intersections, element containments, and disjoint relationships while maintaining aesthetic quality.

To achieve this, a Mixed Integer Programming (MIP) optimization problem is formulated. The positions and sizes of rectangular set representations are determined by solving for variables that satisfy geometric constraints and minimize an objective function focused on diagram compactness. Each set and element group (a group of elements that share exactly the same set memberships) is represented by a rectangle. Element Groups are positioned based on their set memberships. RectEuler uses the Gurobi Optimizer to solve the MIP optimization problem.

The web frontend is built with Svelte and allows the user to upload datasets and visualize the corresponding diagrams. It provides several interactive features for exploring the data.

MIP Model

Variables: The global bounding box, sets, set labels and element groups are each represented by a rectangle with four corner positions (x1,y1,x2,y2). The model uses continuous variables for box corner positions and additional continuous and binary variables for enforcing constraints and defining the objective function.

Constraints: There are 8 constraints (H0 to H7) that ensure well-formedess and aesthetic properties of the diagram. For details on how these constraints are enforced using the MIP Variables, please refer to the original Paper and Supplementaries

Constraints diagram

Objective Function: The base objective function is optimized for diagram compactness. It minimizes the total space occupied by the diagram while encouraging a square-like aspect ratio for the global bounding rectangle.

Objective Components:

  • Rectangle sizes: sum_rect = Σr∈Rectangles ((x2r - x1r) + (y2r - y1r))
  • Bounding rectangle size: sum_br = (x2br - x1br) + (y2br - y1br)
  • Bounding rectangle squareness penalty: square = (x2br - x1br) - (y2br - y1br)

Base Objective:
minimize [sum_rect + sum_br + square]

Diagram Splitting

When the solver cannot find an optimal solution within the specified time limit or iteration constraints, the system employs a diagram splitting strategy. This fallback mechanism divides the layout into multiple sublayouts, allowing the optimization to proceed on smaller, more manageable subproblems. The splitting process uses either random or cluster-based splitting of the element groups. The random splittin strategy randomly splits the element groups into two disjoint sets. This creates a somewhat even distribution of element groups count wise, but can results in hard to read sublayouts as unfavorable combinations of element groups can be created. The cluster-based splitting improves this by considering element group similarity based on the shared set memberships. Similar element groups are put together in the same sublayout using k-medoids clustering with the Jaccard metric. Sometimes the clustering can result in an uneven distribution of element group counts between the sub layouts. After splitting, each sublayout is optimized independently, and the results are combined to form the final visualization.

Interactive Controls

The original RectEuler web interface provides several interactive features for exploring and customizing the generated diagrams:

  • Upload Form: The Upload Form allows to upload a CSV file containing the set membership data. Additionally, images can be uploaded for custom element rendering.
  • Zoom and Pan: Users can zoom in and out of the diagram and pan to explore different regions.
  • Element Group Highlighting: Hovering over element groups highlights them and the set boxes they belong to. Hovering over the colored dot set membership encodings shows the set names.
  • Set Highlighting: Hovering over set labels highlights the set box and all elements belonging to it. If the set is split into multiple boxes, all boxes are highlighted and connected by colored lines.
  • Color Customization: By left clicking on a set label, the color of the set box can be changed using a color picker. Additionally, saturation and fill opacity can be adjusted in the settings menu.
  • Interactive Statistics: In the settings tab, the user can inspect several statistics about the optimization process and the final diagram. A colored overlay can be activated to show the distribution of unwanted zones.
  • Export Options: The user can export the diagram as PDF.

Tech Stack

The application runs fully dockerized using Docker Compose. Multiple services run in separate containers:

  • nginx: A webserver that serves static files from the frontend and acts as a reverse proxy, redirecting API calls to the backend.
  • certbot: Automatically obtains and renews free SSL/TLS certificates for secure HTTPS connections.
  • build-svelte: Builds the Svelte frontend application and makes it available to nginx for serving static content.
  • backend: Runs a Python Flask web backend using Gunicorn as the WSGI server. Handles API requests from the frontend, performs database operations, and manages the Redis queue. Communicates with both PostgreSQL and Redis over the shared Docker network.
  • postgres: Runs a PostgreSQL database instance with the "recteuler" database. Contains two main tables: "dataset" (stores uploaded datasets) and "optimization_result" (stores optimization results and diagram data).
  • redis: Runs a Redis instance used as a queue system. The backend pushes JobIDs to the queue for each uploaded dataset. Worker nodes fetch JobIDs from the queue to process optimizations.
  • worker: Runs the Python Gurobi optimization code. Fetches JobIDs from the Redis queue, reads dataset entries from PostgreSQL, builds and solves the MIP optimization models, and writes results back to the database.

What's new in Temporal RectEuler?

Model Warmstart

When processing datasets with multiple timestamps, the optimization model uses a warmstart strategy to improve efficiency and solution quality. For each timestamp after the first, the solver is initialized with the solution from the previous timestamp as a starting point. This warmstart approach leverages the temporal continuity of the data, as consecutive timestamps typically exhibit gradual changes rather than complete restructuring. This provides several benefits: it reduces the number of iterations needed for convergence, helps maintain visual stability across timestamps by biasing solutions toward the previous layout, and can lead to more consistent diagram evolution when the underlying data changes incrementally over time.

Extended Objective Function

We extended the objective function by multiple stability terms that penalize changes in rectangle position and size from the previous timestamp. We introduced new slack variables and constraints to measure these changes and to formulate the stability penalties.

Stability Terms:

  • Set center position: set_pos = Σr∈Sets (devx_posr + devx_negr + devy_posr + devy_negr)
  • Set size: set_size = Σr∈Sets (devw_posr + devw_negr + devh_posr + devh_negr)
  • Element position: elem_pos = Σelement∈Elements (devx_poselement + devx_negelement + devy_poselement + devy_negelement)
    • (the position of an element is equal to the center position of its element group)

The stability terms get normalized by dividing each term by a scale factor (computed from the previous solution or heuristically) to make them comparable in magnitude, ensuring that set position, set size, and element position stability contribute on similar scales despite having different units and typical values. Each normalized term is then multiplied by an individual weighting factor between 0.0 and 1.0, which can be set via the Upload Form to control the relative importance of each stability aspect (e.g., prioritizing set position stability over set size stability, or vice versa).

Combined Normalized Stability Term:
stability_normalized = wset_pos · (set_pos / set_pos_scale) + wset_size · (set_size / set_size_scale) + welement_pos · (elem_pos / elem_scale)

The final objective function combines the normalized base objective from the original RectEuler with the normalized stability terms using a weighted linear combination. The base_normalized term represents the compactness and aesthetic properties of the diagram at the current timestamp, while stability_normalized captures the visual similarity to the previous timestamp. The tradeoff parameter α ∈ [0, 0.95] controls the balance between these two objectives: when α = 0, only diagram quality is optimized (no temporal stability), and when α = 0.95, stability is maximized while still preserving some diagram quality. The parameter is capped at 0.95 to ensure that the base objective always has at least 5% influence, preventing the optimization from becoming too rigid. Intermediate values allow for a balanced optimization of both aspects.

Final Objective:
minimize [(1 - α) · base_normalized + α · stability_normalized]

Extended Upload Form

The upload form has been extended to give the user more control over the model parameters:

  • Use Warmstart: Toggle option whether the solver should use the solution from the previous timestamp as a starting point.
  • Splitting Strategy: Set the splitting strategy for the solver. Either "randomSplit" or "recursiveclusterSplit".
  • Maximum Optimization Iterations: Set the maximum number of iterations the solver will try to optimize the solution.
  • Maximum Optimization Time before splitting: Set the maximum execution time for trying to find a feasible solution before splitting the layout into multiple sublayouts.
  • Stability Tradeoff: The tradeoff between compactness and stability.
  • Set Position Stability Weight: The weight of the stability term for the set position.
  • Set Size Stability Weight: The weight of the stability term for the set size.
  • Element Stability Weight: The weight of the stability term for the element position.

Adjusted Backend

In order to provide support for uploading datasets with "timeseries" data (i.e. multiple timestamps), we had to make some changes to the database layout. This way we can query the database for timestamp specific data. Additionally, we implemented some logic to the Web-backend that splits and parses uploaded datasets into the individual timestamp data to upload that into the database.

Extended Highlighting Options

Users can now permanently highlight one element and one set at a time by left-clicking on them. The highlighting colors can be customized in the settings tab. This feature is particularly useful for tracking specific elements or sets of interest as they evolve over time in the temporal visualization. Because left clicking is now reserved, opening he color picker now works by pressing shift + left-click on the set label.

Highlighting

Restructured Settings and Statistics UI

The settings and statistics panels have been restructured into separate tabs, making it easier to navigate and find specific configuration options or information. The Settings have been extended to make it possible to customize the new highlighting effect. The Statistics Tab has been adjusted to show data for individual timestamps as well as overall statistics.

Settings and Statistics

Overview Mode

The Overview mode provides a comprehensive view of all timestamps of a dataset at once. Panning and Zooming allows the user to navigate through the diagram and inspect the layout of each timestamp in detail. The extended highlighting options make it easy to spot changes globally.

Overview Mode visualization

Playback Mode

The playback mode allows to play back the diagrams in sequence and show changes between consecutive timestamps. The timeline slider and play/pause button make it convenient to scrub through time. The user can also select a timestamp to jump to it. Between two consecutive timestamps, the diagram is morphed to the new layout by smooth animations. The user can also adjust the playback speed and the duration of the morph transition. The extended highlighting options make it easy to follow changes between consecutive timestamps.

Playback Mode visualization

New Datasets

Temporal RectEuler comes with several example datasets that demonstrate the capabilities of temporal set visualization. These datasets showcase different types of temporal relationships and can be used to explore the various features of the system.

  • Europe (1990-2025): European countries and their membership in various organizations (EU, Schengen Area, EFTA, etc.) over 35 years of political evolution.
  • Historical Empires (1000-2000): Major empires across continents showing geographic extent, religions, economic systems, and trade networks over a millennium.
  • Video Games (2015-2024): Popular games across platforms, genres, publishers, and award categories tracking industry trends over a decade.
  • Companies (2020-2024): Major corporations by sector, stock exchange listings, market capitalization tiers, and inclusion in major indices.
  • Music Artists (2020-2024): Recording artists by label affiliation, genres, Grammy wins, chart performance, and streaming success.
  • Tech Startups (2020-2024): Technology startups by funding stage, sector specialization, accelerator programs, and market expansion.
  • Harry Potter (7 Movies): Characters across the film series showing their attributes, affiliations, and status changes throughout the story.

Try it yourself!

Prerequisites

To run Temporal RectEuler, you need the following prerequisites:

  • Docker: Docker must be installed and running on your system. Docker provides containerization that ensures consistent execution across different environments.
  • Docker Compose: Docker Compose is required to orchestrate the multiple services (nginx, backend, worker, postgres, redis) that make up the application.
  • Gurobi License: A Gurobi WSL (Web Service License) is required to run the optimization. For academic use, it can be obtained from Gurobi's academic program.

Get Code

Access the source code on GitLab and clone the repository to your local machine.

Running the Application

Before running the application, copy your Gurobi license file gurobi.lic to the docker-files/secrets directory. Additionally, add the file postgres_password.txt to the docker-files/secrets directory and put in it a password used for the database.

Once you have cloned the repository and set up the prerequisites, navigate to the docker-files directory and run the following command:

docker compose up

This command works identically on Windows, Mac, and Linux. Docker Compose will start all required services. Once the containers are running, open your browser and navigate to localhost to view the website and upload datasets for visualization.

Uploading Datasets

To upload a dataset, use the upload interface on the web application. Datasets must be provided in CSV format with the following structure:

  • First row (header): Contains the set names, with the first cell typically being "Name" or left empty. The remaining cells contain the names of all sets (e.g., Council of Europe, Schengen Area, EFTA, ...)
  • First column: Contains element identifiers in the format ElementName_Timestamp (e.g., Albania_1990, Albania_1995, Austria_1990, ...). The part before the first underscore (_) is parsed as the element name, and everything after the first underscore is parsed as the timestamp. Timestamps are used to group data into different diagrams for temporal visualization.
  • Matrix cells: Contain 0 or 1 values where 1 indicates the element (row) belongs to the set (column), and 0 indicates it does not.

Optionally, you can upload images and provide a configuration JSON for custom element rendering.

Example:

Name,Council of Europe,Schengen Area,EFTA,EEA,Nordic Council,...,European Union
Albania_1990,0,0,0,0,0,...,0
Albania_1995,1,0,0,0,0,...,0
Albania_2000,1,0,0,0,0,...,0
Austria_1990,1,0,1,0,0,...,0
Austria_1995,1,1,1,1,0,...,1
...