Venn Diagram

A Venn Diagram in REAVIZ is a diagram that shows all possible logical relations between a finite collection of sets. It helps visualize the overlaps and differences between multiple sets, making it ideal for set analysis.

Types supported by reaviz:

Venn - Standard Venn diagram showing set relationships.
Euler - A variation where only significant overlaps are shown.
Star Euler - Another variation that emphasizes the star-like layout.

Where to use:

Visualize Set Relationships: Ideal for displaying logical relations between different sets.
Highlight Overlaps: Useful for highlighting overlaps and differences between sets.
Analyze Intersections: Great for analyzing intersections and unique elements in sets.

Quick Start

To create a venn diagram, import the VennDiagram and give it data. The chart will automatically configure itself with the default options exposed via props.

ℹ️

One important aspect to realize here is the key propertyis a array of intersections. It can have one to N number of relationships.

import { VennDiagram } from 'reaviz';


export default function App() {
return (
  <VennDiagram
    height={300}
    width={300}
    data={[
      { key: ['A'], data: 12 },
      { key: ['B'], data: 12 },
      { key: ['A', 'B'], data: 2 }
    ]}
  />
);
}

import { VennDiagram } from 'reaviz';

export default function App() {
return (
  <VennDiagram
    height={300}
    width={300}
    data={[
      { key: ['A'], data: 12 },
      { key: ['B'], data: 12 },
      { key: ['A', 'B'], data: 2 }
    ]}
  />
);
}

Examples

Venn

Euler

Star Euler

API

VennDiagram

Name	Type	Default
`type`	`"venn" \| "euler" \| "starEuler"` Type of the chart.	`'venn'`
`data`	`VennDiagramData[]` Data the chart will receive to render.
`series`	`ReactElement<VennSeriesProps, FC<Partial<VennSeriesProps>>> \| null` The series component that renders the arc and label components.	`<VennSeries />`
`disabled`	`boolean` Whether the chart is disabled.
`id`	`string` Id of the chart.
`width`	`number` Width of the chart. If not provided will autosize.
`height`	`number` Height of the chart. If not provided will autosize.
`margins`	`Margins` Margins for the chart.
`className`	`string` Classnames for the chart.
`containerClassName`	`string` Classnames for the chart.
`style`	`StyleHTMLAttributes<SVGSVGElement>` Additional css styles.
`center`	`boolean` Center the chart. Used mainly internally.
`centerX`	`boolean` Center chart on X Axis only. Used mainly internally.
`centerY`	`boolean` Center chart on Y Axis only. Used mainly internally.

VennSeries

Name	Type	Default
`id`	`string` Id set by the parent.
`selections`	`string[]` Active managed selections.
`data`	`IVennLayout<any>[]` The internal data object built by venn.js
`colorScheme`	`ColorSchemeType` Color scheme for the chart.	`'cybertron'`
`disabled`	`boolean` Whether the chart is disabled.	`false`
`animated`	`boolean` Whether the chart is animated or not.	`true`
`label`	`ReactElement<VennLabelProps, FC<Partial<VennLabelProps>>> \| null` Label element.	`<VennLabel />`
`outerLabel`	`ReactElement<VennOuterLabelProps, FC<Partial<VennOuterLabelProps>>> \| null` Label element.	`<VennOuterLabel />`
`arc`	`ReactElement<VennArcProps, FC<Partial<VennArcProps>>> \| null` Arc element.	`<VennArc />`

VennArc

Name	Type	Default
`active`	`boolean \| null` Whether the shape is active or not.	`false`
`id`	`string` Id set by the parent.
`animated`	`boolean` Whether the chart is animated or not.
`fill`	`string` Fill color for the arc.
`stroke`	`string \| ((data: IVennLayout<any>[], index: number, isActive: boolean \| null, isHovered: boolean \| null) => string)` Stroke for the arc.
`data`	`IVennLayout<any>` The internal data object built by venn.js
`disabled`	`boolean` Whether the chart is disabled.
`strokeWidth`	`number` Stroke on the arc.	`3`
`initialStyle`	`any` Initial style of arc.	`{ opacity: 0.6 }`
`activeStyle`	`any` Active style of arc.	`{ opacity: 0.8 }`
`inactiveStyle`	`any` Inactive style of arc.	`{ opacity: 0.3 }`
`style`	`any` CSS Styles for the arc.
`tooltip`	`ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>> \| null` Tooltip element.	`<ChartTooltip />`
`mask`	`ReactElement<MaskProps, FC<MaskProps>> \| null` Mask element for the arc.
`gradient`	`ReactElement<GradientProps, FC<Partial<GradientProps>>> \| null` Gradient shades for the arc.	`<Gradient />`
`glow`	`Glow` Glow styling for the arc.
`onClick`	`(event: any) => void` Event for when the arc is clicked.
`onMouseEnter`	`(event: any) => void` Event for when the arc has mouse enter.
`onMouseLeave`	`(event: any) => void` Event for when the arc has mouse leave.

VennLabel

Name	Type	Default
`active`	`boolean \| null` Whether the shape is active or not.
`id`	`string` Set by the parent element.
`showAll`	`boolean` Show all labels or just the large ones.	`false`
`labelType`	`"key" \| "value"` The label type to show.	`'key'`
`wrap`	`boolean` Should wrap text or not.	`true`
`data`	`any` The internal data object built by venn.js
`fontSize`	`number` Font size of the text.	`11`
`fontFamily`	`string` Font family of the text.	`'sans-serif'`
`fill`	`string` Fill of the text.
`animated`	`boolean` Whether the chart is animated or not.	`true`
`format`	`(data: any) => any` Format label.

VennOuterLabel

Name	Type	Default
`data`	`any` The internal data object built by venn.js
`fontSize`	`number` Font size of the text.	`14`
`fontFamily`	`string` Font family of the text.	`'sans-serif'`
`fill`	`string` Fill of the text.	`'#000'`
`animated`	`boolean` Whether the chart is animated or not.	`true`
`format`	`(data: any) => any` Format label.