The program generates Euler diagrams based on user-defined parameters for the number of sets and overlap complexity and creates a smoothed version of the original diagram.
The project is based on the paper A Simple Approach for Boundary Improvement of Euler Diagrams by Simonetto, Archambault, and Scheidegger, which introduces a method to enhance the visual quality of Euler diagrams through boundary smoothing using curve-shortening flow and force-directed techniques.
The Euler Diagram Generator algorithm creates polygons to represent sets, ensuring they overlap based on user-defined complexity. Non-overlapping polygons are positioned to avoid intersections, while overlapping polygons are adjusted using geometric transformations to achieve precise overlap areas. Instead of the curve-shortening flow and force-directed techniques a Bezier curve smoothing algorithm refines the polygon edges for a polished appearance, using cubic splines to interpolate additional points. The diagram outputs both the original and smoothed versions, dynamically rendered with D3.js. This approach combines procedural generation and computational geometry to produce customizable and visually appealing diagrams.
Below is a screenshot of the program in action, showing the generated diagrams and user interface:
When opening the website, no diagrams are yet being displayed and the user can make their selection, also regeneration is possible:
Users can adjust the number of sets (1-5) and overlap complexity (0-5). The program generates original and smoothed diagrams dynamically using D3.js for visualization, shown in an example above. When hovering over the blue questionmarks or the blue buttons the user can get more info on how to procede
When hovering over specific sets the programm displays which sets are beneath the mouse:
