Euler Diagram Renderer - Hall of Fame

Final result

Screenshot of the final Step 4 diagram (set curves + member labels).

Links

Program: Progaram Website Link
Original Paper: Semantics-Preserving Euler Diagrams
Source Code: included in the submission under /src (../src/)
Documentation: included in the submission under /doc (Web Documentation).
GitLab Repository: GitLab Repo

Purpose

This program visualizes a set system (e.g., attributes, groups, categories) by computing all observed set intersections (“zones”) and drawing one closed curve per set. The goal is to make the structure of overlaps easy to understand: which combinations exist, how they relate by inclusion, and where members belong.

Input format

Datasets are provided as CSV files. Each row is a member, with a name column and one column per set. Originally, we used 3 datasets from another paper (RectEuler), but they turned out to be very sparsed and hard to demonstrate the SPEULER logic of the paper. Therefore, we created two new datasets that are more suitable for demonstrating the logic. They have a total of 4 and 5 sets, respectively, and at least 1 member per zone. We also created a dataset with meaningful sets and members from the movie Avengers, as well as recreated the dataset from the paper based on the diagram they provided. An example of the structure is shown below:

name,A,B,C,D
m1,1,0,1,0
m2,0,1,1,0
m3,1,1,0,0

Datasets are stored in data/ and loaded by the Flask backend.

How the program works

Interactivity

The program is built with Flask (backend) and D3.js (frontend). Users can select datasets from a dropdown menu, and the diagram updates automatically. The users can also choose from a checklist which steps they would like to inspect.

Step 1 — Zone construction

Each member induces a set-combination signature (e.g., A|C, B|C|D). Members with identical signatures are grouped into one zone. The zone’s rank is the number of sets in its signature.

Step 1 screenshot: abstract description (zones)

Step 2 — Ring layout

Zones are placed on concentric rings by rank: rank 1 (single sets) on the outer ring, rank 2 on the next ring, etc. Angles are assigned to place a zone “between” its parent zones (immediate subsets), using circular averaging so that, for example, A|B is placed between A and B.

Step 3 — Super-dual adjacency graph

A super-dual graph is built between zones that differ by exactly one set. An edge connects Z and Z U {S} and is annotated with the set S that was added. (Optionally, long edges can be filtered to reduce clutter.)

Step 4 — Set boundary curves

For each set S, a closed curve is constructed from a collection of boundary evidence points:

Boundary midpoints: midpoints of adjacency edges that add S.
Outer anchors: a point slightly outside the outermost zone(s) containing S, ensuring singletons are enclosed without forcing the curve through the node.
Phantom points (fallback): if a zone truly lacks an original boundary edge for S, a synthetic point is introduced so the curve remains stable even when edges are restricted.

The points are ordered (per set) around their centroid and connected with a closed spline to form the set boundary. Member labels are then placed inside their corresponding zone regions while avoiding overlaps and staying strictly within the region. If not all member names can be placed, a summary label is shown inside the zone (e.g., Name +N).

How to run locally

cd bin
./run_local.sh   # macOS/Linux
run_local.bat    # Windows

Open:

http://127.0.0.1:5001/