React Venn Diagram

React Venn Diagram is an interactive and customizable Venn diagram component built with React and D3. This component allows you to create attractive and informative Venn diagrams for visualizing intersection data.

Figure 1: Basic Venn Diagram

Features

• Interactive: Smooth animations and interactions when hovering over circles.
• Customizable: Customize colors, labels, and circle sizes.
• Responsive: Automatically adjusts to different screen sizes.
• Easy to Use: Simple integration with existing React projects.

Installation

Install the package via npm or Yarn:

npm install react-venn-diagram
# or
yarn add react-venn-diagram

Basic Usage

Here's a basic example of how to use the component in your React project:

import React from 'react';
import { VennDiagram } from 'react-venn-diagram';

const App: React.FC = () => {
  const data = { a: 10, b: 15, intersection: 5 };
  const width = 400;
  const height = 400;

  return (
    <div>
      <VennDiagram 
        data={data} 
        width={width} 
        height={height} 
      />
    </div>
  );
};

export default App;

Props

• data: Object containing the values of a, b, and intersection. Example:

  const data = { a: 10, b: 15, intersection: 5 };

• width: Width of the diagram. Example:

  const width = 400;

• height: Height of the diagram. Example:

  const height = 400;

• labels (optional): Custom labels for the groups and intersection. Example:

  const labels = {
    labelA: 'Group A',
    labelB: 'Group B',
    labelIntersection: 'Intersection'
  };

• colors (optional): Custom colors for the circles and texts. Example:

  const colors = {
    colorA: '#9467bd',
    colorB: '#2ca02c',
    fontColorA: 'white',
    fontColorB: 'white',
    fontColorIntersection: 'white'
  };

Customization Examples

Color Customization

You can customize the colors of the circles and text using the colors property:

const colors = {
  colorA: '#ff6347', // Color of circle A
  colorB: '#4682b4', // Color of circle B
  fontColorA: 'black', // Font color of circle A
  fontColorB: 'black', // Font color of circle B
  fontColorIntersection: 'gray' // Font color of the intersection
};

Label Customization

You can customize the labels of the groups and intersection using the labels property:

const labels = {
  labelA: 'Sector A',
  labelB: 'Sector B',
  labelIntersection: 'Common Area'
};

Acknowledgements

Special thanks to the D3.js community for their incredible library, which made this project possible.

Contributing

Contributions are welcome! Feel free to open issues and pull requests.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

---

Links

• GitHub Repository
• NPM Page

---