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]
}]
});
});
默认值是'classic'，显示经典的Venn Diagrams（圆圈）。若想要显示Edwards-Venn diagram，将这个选项设置为'edwards'。这个参数的可用值为：'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 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自带默认颜色，你可以自己设置
$(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)"]
});
});
jvenn默认字体是Arial（文章中一般也用这个），可以使用"fontFamily"参数来改变
$(document).ready(function(){
$('#example').jvenn({
fontFamily: "monospace"
});
});
jvenn默认字号是12px，可以使用"fontSize"参数来改变
$(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
});
});