SVG Based Venn Diagram Plugin With jQuery - Venn

Venn is a jQuery plugin which helps you render a simple, interactive, vector shaped Venn diagram to represent all possible logical relations between different sets. Also comes with an event handler that gets called when a region is clicked. Heavily based on raphael.js JavaScript Vector Library.

How to use it:

1. Load the needed jQuery and raphael.js JavaScript libraries in the html file.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/raphael.min.js"></script>

2. Create a div container to place the Venn diagram.

<div id="venn-demo"></div>

3. Create a basic Venn diagram involving 4 different sets.

$('#venn-demo').venn();

4. All possible options with default values.

$('#venn-demo').venn({

  // The number of sets to draw and track.
  numSets : 4,

  // Default labels to use for the sets
  setLabels : ['A', 'B', 'C', 'D'],

  // Label to use for the universe
  universeLabel : 'U',

  // Color palette
  colors : ['#f00', '#0f0', '#00f', '#dd0'],

  // Background color for universal set, etc.
  backgroundColor : '#fff',

  // Border color appearing around the universe
  borderColor: '#000',

  // If this is true, we will render nice little lines under regions that are
  // enabled.
  shadeRegions : true,

  // If region shading is enabled, this specifies the number of pixels that
  // vertically separate the lines in the shading.
  shadeSpacing : 3,

  // Color to use for shading (fill for universe, lines for non-universe sets).
  shadeColor : '#000',

  // Opacity to use when the universe is shaded
  universeShadeOpacity : 0.3,

  // Set of attributes for the ellipses to be drawn
  ellipseSettings: {
    'fill'         : '#fff', 
    'fill-opacity' : 0,
    'stroke-width' : 2,
  },

  // An set of regions to enable initially
  initRegions : [],

  // If true, interactive clicking will be disabled.
  disableClicks : false,

  // Default dimensions for the HTML 5 canvas
  canvasWidth : 'inherit',
  canvasHeight : 'inherit',

  // Event handler that gets called when a region is clicked. Default is noop.
  regionClicked : $.noop

});

---

This awesome jQuery plugin is developed by sidoh. For more Advanced Usages, please check the demo page or visit the official website.