Creating a Venn diagram


1. Overview

The Venn Diagram was first introduced in 1880 by John Venn, and is designed to show all possible logical relations between a finite collection of different sets. 

This sample will show how to integrate an external Javascript library such as the D3.js library into the Dundas BI Application using an HTML label.

Venn diagrams are not great visualization tools for comparing quantitative data and are also quite limited when it comes to showing logical relations between more than 3 collections (in that case you may take a look at the Relationship Diagram).

2. Prerequisites

This sample requires:

  • Basic knowledge of HTML, CSS and Javascript.
  • Venn.js library which is the source for the D3 visual. 

3. Sample data

Create a metric set from the main menu, selecting the different category intersections on Rows and the member counts on Measures.

Disable totals from the toolbar or from the dialog shown when clicking the Edit button in the Data Analysis Panel.

A sample metric set looks like this:

Sample metric set
Sample metric set

When using the example script shown below, the values of the intersection dimension should all be in the form of category names separated by "&".

4. Integrating D3

Add the Venn.js file in the Dundas BI Javascript override folder located at [BIWebsite]/Scripts/Override.

Download and unzip this file and add the dundasVennLib.js to the override folder located at [BIWebsite]/Scripts/Override.

Create a new CSS file with the following code:

.venntooltip {
  position: absolute;
  text-align: center;
  width: 128px;
  height: 16px;
  background: #000;
  color: #FFF;
  padding: 2px;
  border: 0px;
  /*border-radius: 8px;*/
  opacity: 0;
  z-index: 10000;

Rename this file to venn.css and add it to the override folder located at [BIWebsite]/Content/Override. This css file adds formatting to the tooltip displayed when hovering over the Venn diagram.

Now, navigate to the [BIWebsite]/Override folder and add the following to the Html.Override.html file

<link rel="stylesheet" type="text/css" href="/Content/Override/venn.css">
<script src="/Scripts/Override/venn.js"></script>
<script src="/Scripts/Override/dundasVennLib.js"></script>

5. Dashboard setup

On a new or existing dashboard, add an HTML Label component.

Under the Text properties of the HTML Label, add the following to the HTML Label Text:

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

On the Ready event of the dashboard, add the script to call window.dundasVennLib.generateVenn

var div ="#venn");

var viewParameter1 = this.baseViewService.currentView.control.viewParameters.filter(function(vp){
 return === "viewParameter1";})[0];

//htmlLabel: reference to the htmlLabel containing the div where the diagram is to be shown
//div: reference to the div where the diagram will be shown as returned by the d3 selector
//metricSetID: id of the metricSet to get data from
//categoryHierarchy: name of the hierarchy that identifies the categories
//memberMeasure: name of the measure that indicates the number of members of each category
//viewParameterMappings (optional): array of mappings between view parameters and metric set elements,
//for when you want to use filters. The mappings would use this format:
//               {targetElementName: "<name_of_element_to_filter>",
//               parameter: <view_parameter_used_to_filter_the_element>}

window.dundasVennLib.generateVenn(htmlLabel1, div,

Optional:  If you intend to use filters on the Venn Diagram, you will need to add a script that refreshes the Venn Diagram. This script should be added on the Parameter Value Changed event of those filters.


6. Result

The result of this sample is a Venn Diagram that displays how many students are enrolled in the courses provided.

Venn Diagram
Venn Diagram

7. See also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri