Venn Diagram

VennDiagram

Venn and Euler diagram showing set intersections. Three layout types: standard Venn, proportional Euler, and Star Euler. Supports selections, custom styling per state, and inner/outer labels.

Import

import {
  VennDiagram,
  VennSeries,
  VennArc,
  VennLabel,
  VennOuterLabel
} from 'reaviz';

VennDiagram Props

VennDiagramData

interface VennDiagramData {
  key: string[];   // Set names (e.g. ['A'] or ['A', 'B'] for intersection)
  data: number;    // Size of set/intersection
}

VennSeries Props

VennArc Props

VennLabel Props

VennOuterLabel Props

Basic Usage

const data = [
  { key: ['A'], data: 12 },
  { key: ['B'], data: 12 },
  { key: ['A', 'B'], data: 2 },
];

<VennDiagram
  height={450}
  width={450}
  data={data}
/>

Three Sets

const data = [
  { key: ['A'], data: 12 },
  { key: ['B'], data: 12 },
  { key: ['C'], data: 8 },
  { key: ['A', 'B'], data: 2 },
  { key: ['A', 'C'], data: 3 },
  { key: ['B', 'C'], data: 1 },
  { key: ['A', 'B', 'C'], data: 1 },
];

<VennDiagram
  height={450}
  width={450}
  data={data}
/>

Euler Layout (Proportional)

<VennDiagram
  type="euler"
  height={450}
  width={450}
  data={data}
/>

Star Euler Layout

<VennDiagram
  type="starEuler"
  height={450}
  width={450}
  data={data}
  series={
    <VennSeries
      colorScheme={['#868686']}
      arc={<VennArc strokeWidth={1} stroke="#fff" gradient={<Gradient />} />}
      label={<VennLabel labelType="value" showAll={true} fill="#fff" />}
      outerLabel={<VennOuterLabel fill="#fff" />}
    />
  }
/>

Value Labels

<VennDiagram
  data={data}
  series={
    <VennSeries
      label={<VennLabel labelType="value" />}
    />
  }
/>

Managed Selections

<VennDiagram
  data={data}
  series={
    <VennSeries
      selections={['A|B', 'B']}
    />
  }
/>

Dynamic Stroke Color

<VennDiagram
  data={data}
  series={
    <VennSeries
      arc={
        <VennArc
          stroke={(_data, _index, active, hovered) => {
            if (hovered) return 'blue';
            if (active) return 'green';
            return 'white';
          }}
        />
      }
    />
  }
/>

Notes

• type="venn" — equal-sized circles with overlapping intersections
• type="euler" — circle sizes proportional to set values
• type="starEuler" — star-shaped layout for many overlapping sets
• selections uses pipe-delimited keys (e.g. 'A|B' for the intersection of A and B)
• Inner labels show on sufficiently large regions by default; use showAll to force display
• Outer labels appear around the diagram perimeter showing set names
• Arc opacity transitions between initialStyle, activeStyle, and inactiveStyle based on hover/selection state