# devtools::install_github("timelyportfolio/d3vennR")
library("d3vennR")
## Simple layout from venn.js Readme.md
d3vennR(
data = list(
list( sets = list("A"), size = 12 )
, list( sets = list("B"), size = 12 )
, list( sets = c("A", "B"), size = 2)
)
)
## Changing the Style from venn.js Readme.md
styled_venn <- d3vennR(
# data from venn.js examples
# https://github.com/benfred/venn.js/blob/master/examples/medical.jsonp
data = list(
list(sets = list(0), label = 'SE', size = 28),
list(sets = list(1), label = 'Treat', size= 35),
list(sets = list(2), label = 'Anti-CCP', size = 108),
list(sets = list(3), label = 'DAS28', size=106),
list(sets = c(0,1), size=1),
list(sets = c(0,2), size=1),
list(sets = c(0,3), size=14),
list(sets = c(1,2), size=6),
list(sets = c(1,3), size=0),
list(sets = c(2,3), size=1),
list(sets = c(0,2,3), size=1),
list(sets = c(0,1,2), size=0),
list(sets = c(0,1,3), size=0),
list(sets = c(1,2,3), size=0),
list(sets = c(0,1,2,3), size=0)
)
, tasks = list(
htmlwidgets::JS('
function(){
var colours = ["black", "red", "blue", "green"];
d3.select(this).selectAll(".venn-circle path")
.style("fill-opacity", 0)
.style("stroke-width", 10)
.style("stroke-opacity", .5)
.style("stroke", function(d,i) { return colours[i]; });
d3.select(this).selectAll(".venn-circle text")
.style("fill", function(d,i) { return colours[i]})
.style("font-size", "24px")
.style("font-weight", "100");
}
')
)
)
styled_venn
styled_venn_inverted <- styled_venn
styled_venn_inverted$x$tasks <- list(
htmlwidgets::JS('
function(){
d3.select(this).selectAll(".venn-circle path")
.style("fill-opacity",0.8);
d3.select(this).selectAll("text")
.style("fill","white");
}
')
)
styled_venn_inverted
styled_venn_mono <- styled_venn
styled_venn_mono$x$tasks <- list(
htmlwidgets::JS('
function(){
d3.select(this).selectAll(".venn-circle path")
.style("fill-opacity", 0)
.style("stroke-width", 2)
.style("stroke", "#444");
d3.select(this).selectAll("text")
.style("fill", "#444");
}
')
)
styled_venn_mono
styled_venn_dropshadow <- styled_venn
styled_venn_dropshadow$x$tasks <- list(
htmlwidgets::JS('
function(){
var colours = d3.scale.category10();
var areas = d3.select(this).selectAll("g")
areas.select("path")
.filter(function(d) { return d.sets.length == 1; })
.style("fill-opacity", .1)
.style("stroke-width", 5)
.style("stroke-opacity", .8)
.style("fill", function(d,i) { return colours(i); })
.style("stroke", function(d,i) { return colours(i); });
areas.select("text").style("fill", "#444")
.style("font-family", "Shadows Into Light")
.style("font-size", "22px");
var defs = d3.select(this).select("svg").append("defs");
// from http://stackoverflow.com/questions/12277776/how-to-add-drop-shadow-to-d3-js-pie-or-donut-chart
var filter = defs.append("filter")
.attr("id", "dropshadow")
filter.append("feGaussianBlur")
.attr("in", "SourceAlpha")
.attr("stdDeviation", 4)
.attr("result", "blur");
filter.append("feOffset")
.attr("in", "blur")
.attr("dx", 5)
.attr("dy", 5)
.attr("result", "offsetBlur");
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
.attr("in", "offsetBlur")
feMerge.append("feMergeNode")
.attr("in", "SourceGraphic");
areas.attr("filter", "url(#dropshadow)");
}
')
)
styled_venn_dropshadow
## Adding tooltips from venn.js Readme.md
d3vennR(
# data from venn.js examples
# https://github.com/benfred/venn.js/blob/master/examples/lastfm.jsonp
data = list(
list("sets"= list(0), "label"= "Radiohead", "size"= 77348),
list("sets"= list(1), "label"= "Thom Yorke", "size"= 5621),
list("sets"= list(2), "label"= "John Lennon", "size"= 7773),
list("sets"= list(3), "label"= "Kanye West", "size"= 27053),
list("sets"= list(4), "label"= "Eminem", "size"= 19056),
list("sets"= list(5), "label"= "Elvis Presley", "size"= 15839),
list("sets"= list(6), "label"= "Explosions in the Sky", "size"= 10813),
list("sets"= list(7), "label"= "Bach", "size"= 9264),
list("sets"= list(8), "label"= "Mozart", "size"= 3959),
list("sets"= list(9), "label"= "Philip Glass", "size"= 4793),
list("sets"= list(10), "label"= "St. Germain", "size"= 4136),
list("sets"= list(11), "label"= "Morrissey", "size"= 10945),
list("sets"= list(12), "label"= "Outkast", "size"= 8444),
list("sets"= list(0, 1), "size"= 4832),
list("sets"= list(0, 2), "size"= 2602),
list("sets"= list(0, 3), "size"= 6141),
list("sets"= list(0, 4), "size"= 2723),
list("sets"= list(0, 5), "size"= 3177),
list("sets"= list(0, 6), "size"= 5384),
list("sets"= list(0, 7), "size"= 2252),
list("sets"= list(0, 8), "size"= 877),
list("sets"= list(0, 9), "size"= 1663),
list("sets"= list(0, 10), "size"= 899),
list("sets"= list(0, 11), "size"= 4557),
list("sets"= list(0, 12), "size"= 2332),
list("sets"= list(1, 2), "size"= 162),
list("sets"= list(1, 3), "size"= 396),
list("sets"= list(1, 4), "size"= 133),
list("sets"= list(1, 5), "size"= 135),
list("sets"= list(1, 6), "size"= 511),
list("sets"= list(1, 7), "size"= 159),
list("sets"= list(1, 8), "size"= 47),
list("sets"= list(1, 9), "size"= 168),
list("sets"= list(1, 10), "size"= 68),
list("sets"= list(1, 11), "size"= 336),
list("sets"= list(1, 12), "size"= 172),
list("sets"= list(2, 3), "size"= 406),
list("sets"= list(2, 4), "size"= 350),
list("sets"= list(2, 5), "size"= 1335),
list("sets"= list(2, 6), "size"= 145),
list("sets"= list(2, 7), "size"= 347),
list("sets"= list(2, 8), "size"= 176),
list("sets"= list(2, 9), "size"= 119),
list("sets"= list(2, 10), "size"= 46),
list("sets"= list(2, 11), "size"= 418),
list("sets"= list(2, 12), "size"= 146),
list("sets"= list(3, 4), "size"= 5465),
list("sets"= list(3, 5), "size"= 849),
list("sets"= list(3, 6), "size"= 724),
list("sets"= list(3, 7), "size"= 273),
list("sets"= list(3, 8), "size"= 143),
list("sets"= list(3, 9), "size"= 180),
list("sets"= list(3, 10), "size"= 218),
list("sets"= list(3, 11), "size"= 599),
list("sets"= list(3, 12), "size"= 3453),
list("sets"= list(4, 5), "size"= 977),
list("sets"= list(4, 6), "size"= 232),
list("sets"= list(4, 7), "size"= 250),
list("sets"= list(4, 8), "size"= 166),
list("sets"= list(4, 9), "size"= 97),
list("sets"= list(4, 10), "size"= 106),
list("sets"= list(4, 11), "size"= 225),
list("sets"= list(4, 12), "size"= 1807),
list("sets"= list(5, 6), "size"= 196),
list("sets"= list(5, 7), "size"= 642),
list("sets"= list(5, 8), "size"= 336),
list("sets"= list(5, 9), "size"= 165),
list("sets"= list(5, 10), "size"= 143),
list("sets"= list(5, 11), "size"= 782),
list("sets"= list(5, 12), "size"= 332),
list("sets"= list(6, 7), "size"= 262),
list("sets"= list(6, 8), "size"= 85),
list("sets"= list(6, 9), "size"= 284),
list("sets"= list(6, 10), "size"= 68),
list("sets"= list(6, 11), "size"= 363),
list("sets"= list(6, 12), "size"= 218),
list("sets"= list(7, 8), "size"= 1581),
list("sets"= list(7, 9), "size"= 716),
list("sets"= list(7, 10), "size"= 133),
list("sets"= list(7, 11), "size"= 254),
list("sets"= list(7, 12), "size"= 132),
list("sets"= list(8, 9), "size"= 280),
list("sets"= list(8, 10), "size"= 53),
list("sets"= list(8, 11), "size"= 117),
list("sets"= list(8, 12), "size"= 67),
list("sets"= list(9, 10), "size"= 57),
list("sets"= list(9, 11), "size"= 184),
list("sets"= list(9, 12), "size"= 89),
list("sets"= list(10, 11), "size"= 51),
list("sets"= list(10, 12), "size"= 115),
list("sets"= list(11, 12), "size"= 162),
list("sets"= list(0, 1, 6), "size"= 480),
list("sets"= list(0, 1, 9), "size"= 152),
list("sets"= list(0, 2, 7), "size"= 112),
list("sets"= list(0, 3, 4), "size"= 715),
list("sets"= list(0, 3, 12), "size"= 822),
list("sets"= list(0, 4, 5), "size"= 160),
list("sets"= list(0, 5, 11), "size"= 292),
list("sets"= list(0, 6, 12), "size"= 122),
list("sets"= list(0, 7, 11), "size"= 118),
list("sets"= list(0, 9, 10), "size" =13),
list("sets"= list(2, 7, 8), "size"= 72)
)
, tasks = list(
htmlwidgets::JS('
function(){
var div = d3.select(this);
// add a tooltip
var tooltip = d3.select("body").append("div")
.attr("class", "venntooltip")
.style("position", "absolute")
.style("text-align", "center")
.style("width", 128)
.style("height", 16)
.style("background", "#333")
.style("color","#ddd")
.style("padding","2px")
.style("border","0px")
.style("border-radius","8px")
.style("opacity",0);
div.selectAll("path")
.style("stroke-opacity", 0)
.style("stroke", "#fff")
.style("stroke-width", 0)
// add listeners to all the groups to display tooltip on mousover
div.selectAll("g")
.on("mouseover", function(d, i) {
// sort all the areas relative to the current item
venn.sortAreas(div, d);
// Display a tooltip with the current size
tooltip.transition().duration(400).style("opacity", .9);
tooltip.text(d.size + " users");
// highlight the current path
var selection = d3.select(this).transition("tooltip").duration(400);
selection.select("path")
.style("stroke-width", 3)
.style("fill-opacity", d.sets.length == 1 ? .4 : .1)
.style("stroke-opacity", 1);
})
.on("mousemove", function() {
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d, i) {
tooltip.transition().duration(400).style("opacity", 0);
var selection = d3.select(this).transition("tooltip").duration(400);
selection.select("path")
.style("stroke-width", 0)
.style("fill-opacity", d.sets.length == 1 ? .25 : .0)
.style("stroke-opacity", 0);
});
}
')
)
)
## MDS Layout from venn.js Readme.md
d3vennR(
data = list(
list(sets= list('A'), size= 9),
list(sets= list('B'), size= 15),
list(sets= list('C'), size= 8),
list(sets= list('D'), size= 6),
list(sets= list('E'), size= 9),
list(sets= list('F'), size= 9),
list(sets= list('A','B'), size= 3),
list(sets= list('A','C'), size= 0),
list(sets= list('A','D'), size= 0),
list(sets= list('A','E'), size= 0),
list(sets= list('A','F'), size= 3),
list(sets= list('B','C'), size= 3),
list(sets= list('B','D'), size= 2),
list(sets= list('B','E'), size= 0),
list(sets= list('B','F'), size= 3),
list(sets= list('C','D'), size= 2),
list(sets= list('C','E'), size= 0),
list(sets= list('C','F'), size= 0),
list(sets= list('D','E'), size= 1),
list(sets= list('D','F'), size= 0),
list(sets= list('E','F'), size= 1)
)
,layoutFunction = '
function(d) { return venn.venn(d, { initialLayout: venn.classicMDSLayout });}
'
)
## Example from VennDiagram R package
library("VennDiagram")
venn.plot <- draw.quintuple.venn(
area1 = 301,
area2 = 321,
area3 = 311,
area4 = 321,
area5 = 301,
n12 = 188,
n13 = 191,
n14 = 184,
n15 = 177,
n23 = 194,
n24 = 197,
n25 = 190,
n34 = 190,
n35 = 173,
n45 = 186,
n123 = 112,
n124 = 108,
n125 = 108,
n134 = 111,
n135 = 104,
n145 = 104,
n234 = 111,
n235 = 107,
n245 = 110,
n345 = 100,
n1234 = 61,
n1235 = 60,
n1245 = 59,
n1345 = 58,
n2345 = 57,
n12345 = 31,
category = c("A", "B", "C", "D", "E"),
fill = c("dodgerblue", "goldenrod1", "darkorange1", "seagreen3", "orchid3"),
cat.col = c("dodgerblue", "goldenrod1", "darkorange1", "seagreen3", "orchid3"),
cat.cex = 2,
margin = 0.05,
cex = c(1.5, 1.5, 1.5, 1.5, 1.5, 1, 0.8, 1, 0.8, 1, 0.8, 1, 0.8, 1, 0.8,
1, 0.55, 1, 0.55, 1, 0.55, 1, 0.55, 1, 0.55, 1, 1, 1, 1, 1, 1.5),
ind = TRUE
)
d3vennR(
data = list(
list(sets = list("A"), size = 301),
list(sets = list("B"), size = 321),
list(sets = list("C"), size = 311),
list(sets = list("D"), size = 321),
list(sets = list("E"), size = 301),
list(sets = list("A","B"), size = 188),
list(sets = list("A","C"), size = 191),
list(sets = list("A","D"), size = 184),
list(sets = list("A","E"), size = 177),
list(sets = list("B","C"), size = 194),
list(sets = list("B","D"), size = 197),
list(sets = list("B","E"), size = 190),
list(sets = list("C","D"), size = 190),
list(sets = list("C","E"), size = 173),
list(sets = list("D","E"), size = 186),
list(sets = list("A","B","C"), size = 112),
list(sets = list("A","B","D"), size = 108),
list(sets = list("A","B","E"), size = 108),
list(sets = list("A","C","D"), size = 111),
list(sets = list("A","C","E"), size = 104),
list(sets = list("A","D","E"), size = 104),
list(sets = list("B","C","D"), size = 111),
list(sets = list("B","C","E"), size = 107),
list(sets = list("B","D","E"), size = 110),
list(sets = list("C","D","E"), size = 100),
list(sets = list("A","B","C","D"), size = 61),
list(sets = list("A","B","C","E"), size = 60),
list(sets = list("A","B","D","E"), size = 59),
list(sets = list("A","C","D","E"), size = 58),
list(sets = list("B","C","D","E"), size = 57),
list(sets = list("A","B","C","D","E"), size = 31)
)
# feel free to skip this complicated part to match colors
, colours = htmlwidgets::JS(sprintf('
d3.scale.category10().range(%s.map(function(col){return eval(col)}))
',
jsonlite::toJSON(lapply(
c("dodgerblue", "goldenrod1", "darkorange1", "seagreen3", "orchid3")
,function(color){
rgb <- t(col2rgb(color))
sprintf("d3.rgb(%s)",paste0(rgb,collapse=","))
}
), auto_unbox=T)
)
)
,layoutFunction = '
function(d) { return venn.venn(d, { initialLayout: venn.classicMDSLayout });}
'
, tasks = list(
htmlwidgets::JS('
function(){
var div = d3.select(this);
// add a tooltip
var tooltip = d3.select("body").append("div")
.attr("class", "venntooltip")
.style("position", "absolute")
.style("text-align", "center")
.style("width", 128)
.style("height", 16)
.style("background", "#333")
.style("color","#ddd")
.style("padding","2px")
.style("border","0px")
.style("border-radius","8px")
.style("opacity",0);
div.selectAll("path")
.style("stroke-opacity", 0)
.style("stroke", "#fff")
.style("stroke-width", 0)
// add listeners to all the groups to display tooltip on mousover
div.selectAll("g")
.on("mouseover", function(d, i) {
// sort all the areas relative to the current item
venn.sortAreas(div, d);
// Display a tooltip with the current size
tooltip.transition().duration(400).style("opacity", .9);
tooltip.text(d.size + " users");
// highlight the current path
var selection = d3.select(this).transition("tooltip").duration(400);
selection.select("path")
.style("stroke-width", 3)
.style("fill-opacity", d.sets.length == 1 ? .4 : .1)
.style("stroke-opacity", 1);
})
.on("mousemove", function() {
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d, i) {
tooltip.transition().duration(400).style("opacity", 0);
var selection = d3.select(this).transition("tooltip").duration(400);
selection.select("path")
.style("stroke-width", 0)
.style("fill-opacity", d.sets.length == 1 ? .25 : .0)
.style("stroke-opacity", 0);
});
}
')
)
)
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.