Venn- / Euler-Diagramm

Über Venn- und Euler-Diagramme

Ein Venn-Diagramm verwendet überlappende Kreise, um jede mögliche logische Beziehung zwischen einer Sammlung von Mengen darzustellen – unabhängig davon, ob jede Schnittmenge tatsächlich Elemente enthält. Ein Euler-Diagramm ist die allgemeinere Form: Kreise werden nur gezeichnet, wo Beziehungen tatsächlich bestehen, sodass eine vollständig in einer anderen enthaltene Menge als verschachtelter Kreis dargestellt wird und zwei disjunkte Mengen sich überhaupt nicht überschneiden. John Venn führte die Form mit festen Überlappungen 1880 ein; Leonhard Euler beschrieb die allgemeine Mengeneinschlussform in den 1760er Jahren.

Lehrende nutzen sie zum Unterrichten der Mengenlehre; Datenanalysten greifen auf sie zurück, um Zielgruppen-Überschneidungen zwischen Segmenten darzustellen (E-Mail-Liste ∩ Mobilnutzer ∩ zahlende Abonnenten); Forscher in Biologie, Linguistik und Medizin verwenden Euler-Diagramme zur Kartierung taxonomischer oder konzeptueller Hierarchien. Schematex unterstützt alle vier gängigen Anwendungsmuster in einer einzigen DSL – deklarative Zählungen, Element-Aufzählungen, Regions-Labels und Euler-Teilmengen-/Disjunkt-/Überlappungs-Relationen – und kann sie in einem einzigen Diagramm mischen. Siehe den Wikipedia-Artikel über Venn-Diagramme und Euler-Diagramme als Hintergrund.

1. Ihr erstes Venn-Diagramm

Das kleinste nützliche Diagramm: zwei Mengen, eine Überlappung, zwei exklusive Regionen.

Vier Regeln decken 80 % der Anwendungsfälle ab:

1. Beginnen Sie mit venn, optional gefolgt von einem Titel in Anführungszeichen.
2. Deklarieren Sie jede Menge mit set ID "Label" – die ID wird intern verwendet, das Label erscheint im Diagramm.
3. Weisen Sie Regionen Werte zu mit A & B : value für Schnittmengen und A only : value für exklusive Regionen.
4. Konfigurieren Sie das Erscheinungsbild mit config:-Zeilen; der Diagrammmodus (venn vs. euler) kann explizit gesetzt oder auf auto belassen werden.

Kommentare müssen mit # auf einer eigenen Zeile beginnen.

2. Mengen

Eine Mengendeklaration erstellt einen Kreis im Diagramm.

set ID "Label" [color: "#hex"]

Mengen müssen deklariert werden, bevor sie in Regions- oder Relationszeilen referenziert werden.

3. Regionen

Eine Region weist einer Schnittmenge oder einem exklusiven Bereich einen Wert zu. Die vier DSL-Modi können in einem Diagramm gemischt werden.

3.1 Deklarativer Modus – Zählungen und Prozentsätze

Weisen Sie einer benannten Region eine Zahl oder einen Prozentsatz zu. Der Regions-Schlüssel ist entweder eine durch & getrennte Liste von Mengen-IDs (für Schnittmengen) oder ID only (für den Teil dieser Menge, der nicht von einer anderen Menge abgedeckt wird).

A & B : 320          # ganzzahlige Zählung
A & B & C : 45       # Drei-Wege-Schnittmenge
A only : 1450        # A minus alle anderen Mengen
A & B : 18.5%        # Prozentwert

3.2 Regions-Labels (Text)

Verwenden Sie das Schlüsselwort region als Präfix und weisen Sie eine Zeichenkette in Anführungszeichen statt einer Zahl zu. Die Zeichenkette wird innerhalb der Region gerendert.

region A & B : "Nurture"
region B & C : "Convert"
region A & B & C : "Loyal customer"

3.3 Aufzählungsmodus – Elementlisten

Listen Sie die tatsächlichen Elemente jeder Menge auf. Schematex berechnet alle Schnittmengen automatisch.

ID = { element1, element2, element3 }

Elemente sind durch Kommas getrennte bloße Wörter oder Zeichenketten in Anführungszeichen. Aufzählungsmengen benötigen keine explizite set-Deklaration – die Deklaration wird impliziert.

4. Euler-Relationen

Euler-Relationen drücken strukturellen Einschluss oder Trennung aus – dass eine Menge eine Teilmenge einer anderen ist, dass zwei Mengen vollständig disjunkt sind oder dass sie sich überlappen. Sie müssen Mengen-IDs referenzieren, die bereits mit set deklariert wurden.

from subset to    # from ist vollständig innerhalb von to (auch: "in")
from in to        # Alias für subset
from disjoint to  # from und to überlappen sich nicht
from overlap to   # from und to überlappen sich teilweise (explizit – Standard für nicht verwandte Mengen)

5. Konfiguration

config:-Zeilen steuern das Diagrammverhalten. Jede steht auf einer eigenen Zeile.

Config kann auch inline in der Header-Zeile geschrieben werden: venn "Title" [proportional: true, showPercent: true].

venn "Segment overlap"
config: proportional = true
config: showPercent = true
config: blendMode = screen

Layout-Auswahl:

• layout venn – alternative Form von config: diagram = venn (identisch geparst).
• layout euler – alternative Form von config: diagram = euler.
• layout auto – alternative Form von config: diagram = auto.

6. Beschriftungen & Kommentare

• Titel: venn "My diagram" – nur erste Zeile.
• Mengen-Label: set A "Email subscribers" – Zeichenkette in Anführungszeichen in der set-Zeile.
• Regionswert: Ganzzahl, Prozentsatz, Zeichenkette in Anführungszeichen oder Elementliste nach dem :.
• Kommentare: # am Anfang einer Zeile (nach führenden Leerzeichen).

7. Reservierte Wörter & Escaping

Am Zeilenanfang reserviert: venn (Header), set, config:, layout, region.

Reservierte Operatoren in Regions-Schlüsseln: & (Schnittmenge), only (exklusive Region).

Euler-Relationsschlüsselwörter: subset, in, disjoint, overlap – können nicht als Mengen-IDs verwendet werden.

ID-Regeln: müssen [A-Za-z][A-Za-z0-9_-]* entsprechen. Labels mit Leerzeichen gehen in das "Label"-Feld in Anführungszeichen.

8. Häufige Fehler

9. Grammatik (EBNF)

document       = header (blank | comment | config | layout-stmt | set-decl | enum-decl | euler-rel | region)*

header         = "venn" ( ":"? WS quoted-string )? ( WS "[" config-props "]" )? NEWLINE
quoted-string  = '"' any-char-but-quote* '"'

config         = "config" WS ":" WS config-key WS "=" WS config-value NEWLINE
config-key     = "diagram" | "proportional" | "palette" | "blendMode" | "showCounts" | "showPercent"

layout-stmt    = "layout" WS ( "venn" | "euler" | "auto" ) NEWLINE

set-decl       = "set" WS id WS quoted-string ( WS "[" set-props "]" )? NEWLINE
set-props      = "color:" quoted-hex | "fill:" quoted-hex

enum-decl      = id WS "=" WS "{" element-list "}" NEWLINE
element-list   = element ( "," element )*
element        = quoted-string | bare-word

euler-rel      = id WS euler-op WS id NEWLINE
euler-op       = "subset" | "in" | "disjoint" | "overlap"

region         = "region"? WS region-key WS ":" WS region-value NEWLINE
region-key     = id WS "only"
               | id ( WS "&" WS id )+
region-value   = integer | percent | quoted-string | "[" element-list "]"

percent        = number "%"
id             = [A-Za-z] [A-Za-z0-9_-]*
comment        = "#" any NEWLINE

Maßgebliche Quelle: src/diagrams/venn/parser.ts. Falls dies vom Parser abweicht, hat der Parser Vorrang – bitte öffnen Sie ein Issue.

10. Roadmap

Geplant – noch nicht parsebar. Verwenden Sie diese heute nicht in generiertem DSL; der Parser wird sie ablehnen oder ignorieren.

• Drei-Wege- und N-Wege-Euler-Verschachtelung – der Renderer unterstützt derzeit bis zu 3 Mengen im Venn-Modus; größere Euler-Diagramme mit komplexem Einschluss sind noch nicht vollständig ausgelegt.
• fill:-Farb-Alias – die fill:-Eigenschaft auf set wird vom Parser akzeptiert (als Alias für color:), aber der Renderer verwendet derzeit nur color:.
• label: auf Regionen – region A & B [label: "Core"]-Syntax für separate Labels vs. Werte.
• Flächenproportionales Euler – proportional: true betrifft derzeit nur den Venn-Modus; das Euler-Einschlusslayout ignoriert das Flag.
• and-Schlüsselwort – natürlichsprachiges A and B : 120 als Alias für A & B : 120.

Verfolgen Sie die GitHub-Issues, wenn Sie eines davon früher benötigen.

Verwandte Beispiele

Sofort einsatzbereite Szenarien aus der Beispiel-Galerie: