Euler diagram

aka: Venn diagram

Above Euler diagram of tags on this website. It’s not a static picture - it’s generated based on the content everytime website is updated.

Installation

Install dependencies
Terminal window
```
pnpm add venn-isomorphic
```

Create EulerDiagram component

---
import { createVennRenderer, type ISetOverlap } from "venn-isomorphic";

interface Props {
  items: ISetOverlap[];
}

const items = Astro.props.items;

const renderer = createVennRenderer();
const results = await renderer([items]);
const [result] = results;
let svg =
  result.status == "fulfilled" ? result.value.svg : String(result.reason);
---

<figure class="euler not-content beoe">
 <Fragment set:html={svg} />
</figure>

Use component, wherever you like

Theory

A Better Algorithm for Area Proportional Venn and Euler Diagrams
- code, maintained fork
eulerdiagrams.org
Euler diagrams drawn with ellipses area-proportionally (Edeap)
- code
- playground
eulerr: Area-Proportional Euler Diagrams with Ellipses
- code (R)
SPEULER: Semantics-preserving Euler Diagrams
EVenn: Easy to create statistically measurable Venn diagrams online
nVenn: generalized, quasi-proportional Venn and Euler diagrams
UpSetR: An R Package For The Visualization Of Intersecting Sets And Their Properties
- code
Exact and Approximate Area-proportional Circular Venn and Euler Diagrams
DeepVenn – creation of area-proportional Venn diagrams using Tensorflow
A Survey of Euler Diagrams
Realizability of Rectangular Euler Diagrams
Generating and Navigating Large Euler Diagrams

Further improvements

Implement area-proportional diagram. Maybe edeap.
Try to implement it without headless browser