In order to use jvenn, you need to import within your web page:
Take a peek at the code below, a single function call to initialise the venn diagram is all it takes:
$(document).ready(function(){
$('#example').jvenn({
series: [{
name: 'Actors',
data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
}, {
name: 'Singers',
data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
}]
});
});
The serie can be a list of value, the plugin will then compute itself the intersections between lists.
$(document).ready(function(){
$('#example').jvenn({
series: [{
name: 'Actors',
data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
}, {
name: 'Singers',
data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
}]
});
});
The serie can also define the number of occurence for each intersections and their values. If only the data are provided, the values are computed. If only the values are provided the callback function is desactivated.
$(document).ready(function(){
$('#example').jvenn({
series: [{
name: {A: 'Actors',
B: 'Singers'},
data: {A: ["Arnold Schwarzenegger", "Jack Nicholson", "Robert de Niro", "Harrison Ford"], B: ["Freddy Mercury", "Ricky Martin", "Celine Dion"], AB: ["Marilyn Monroe", "Barbra Streisand", "Dean Martin"]},
values: {A: 4, B: 3, AB: 3}
}],
});
});
Finaly, the serie can define the list values with the number of occurence for each value.
$(document).ready(function(){
$('#example').jvenn({
series: [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5"],
values: [5, 15, 250, 20, 23]
},{
name: 'sample2',
data: ["Otu1", "Otu5", "Otu6", "Otu7"],
values: [234, 29, 239, 5]
}]
});
});
The default value is 'classic' to have a classical venn diagram to be displayed. If you want a Edwards-Venn diagram display, just set this option to 'edwards'. Available values for this parameters are: 'classic', 'edwards'.
$(document).ready(function(){
$('#example').jvenn({
displayMode: 'edwards'
});
});
The default value is true to display some statistics based on input lists. The first chart represents the histogram of the lists size, providing to the user a rapid view on its lists composition to verify the samples homogeneity. The second chart displays the number of common and specific elements between lists. This feature allows to quickly get an insight on the similarity of the data sets when comparing multiple Venn diagrams.
$(document).ready(function(){
$('#example').jvenn({
displayStat: false
});
});
The default value is true to display a switch button panel, if more than 3 lists are provided.
$(document).ready(function(){
$('#example').jvenn({
displaySwitch: false
});
});
The callback function to execute when the user click on a number.
$(document).ready(function(){
$('#example').jvenn({
series: [{
name: {A: 'List 1',
B: 'List 2',
C: 'List 3',
D: 'List 4'},
data: {A: 340, B: 562, C: 620, D: 592,
AB: 639, AC: 456, AD: 257, BC: 915,
BD: 354, CD: 143, ABC: 552, ABD: 578,
ACD: 298, BCD: 613, ABCD: 148}
}],
fnClickCallback: function() {
var value = "";
if (this.listnames.length == 1) {
value += "Elements only in ";
} else {
value += "Common elements in ";
}
for (name in this.listnames) {
value += this.listnames[name] + " ";
}
value += ":\n";
for (val in this.list) {
value += this.list[val] + "\n";
}
alert(value);
}
});
});
Jvenn comes with some default colors, you can change them to the ones you want.
$(document).ready(function(){
$('#example').jvenn({
colors: ["rgb(0,102,0)","rgb(90,155,212)","rgb(241,90,96)","rgb(250,220,91)","rgb(255,117,0)","rgb(192,152,83)"]
});
});
The jvenn default font family is Arial, you can change it using "fontFamily" parameter.
$(document).ready(function(){
$('#example').jvenn({
fontFamily: "monospace"
});
});
The jvenn default font size is 12px, you can change it using "fontSize" parameter.
$(document).ready(function(){
$('#example').jvenn({
fontSize: "11px"
});
});
Default is false, if set to true, when intersection counts are too big to be displayed, jvenn will add a "?" instead of the value, which is accessible on the rollover action.
$(document).ready(function(){
$('#example').jvenn({
shortNumber: true
});
});
Default is false, if set to true, the click on the number si disabled.
$(document).ready(function(){
$('#example').jvenn({
series: [{
name: 'Actors',
data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
}, {
name: 'Singers',
data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
}],
disableClick: true
});
});
Default is false, if set to true, the values provided in a mixte serie will be considered as the number of occurence of the element.
$(document).ready(function(){
$('#example').jvenn({
series: [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
values: [5, 15, 250, 20, 23, 58, 89]
}],
useValues: true
});
});
Default is true, an export module is added to the window, if set to false the export module is disabled.
$(document).ready(function(){
$('#example').jvenn({
series: [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
values: [5, 15, 250, 20, 23, 58, 89]
}],
exporting: false
});
});
Three parameters to manage a search field:
$(document).ready(function(){
$('#example').jvenn({
series: [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
values: [5, 15, 250, 20, 23, 58, 89]
}],
searchInput: $("#search-field"),
searchStatus: $("#search-status"),
searchMinSize: 1
});
});