You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.4 KiB
86 lines
2.4 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # D3.js - interactive Venn diagram |
|
* |
|
* Venn diagram demo setup with interactions |
|
* |
|
* Version: 1.0 |
|
* Latest update: August 1, 2015 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
$(function () { |
|
|
|
|
|
// Data set |
|
// ------------------------------ |
|
|
|
// Circles |
|
var sets = [ |
|
{label: 'SE', size: 28}, |
|
{label: 'Treat', size: 35}, |
|
{label: 'Anti-CCP', size: 108}, |
|
{label: 'DAS28', size: 106} |
|
]; |
|
|
|
// Overlaps |
|
var overlaps = [ |
|
{sets: [0,1], size: 1}, |
|
{sets: [0,2], size: 1}, |
|
{sets: [0,3], size: 14}, |
|
{sets: [1,2], size: 6}, |
|
{sets: [1,3], size: 0}, |
|
{sets: [2,3], size: 1}, |
|
{sets: [0,2,3], size: 1}, |
|
{sets: [0,1,2], size: 0}, |
|
{sets: [0,1,3], size: 0}, |
|
{sets: [1,2,3], size: 0}, |
|
{sets: [0,1,2,3], size: 0} |
|
]; |
|
|
|
|
|
// Initialize chart |
|
// ------------------------------ |
|
|
|
// Define colors |
|
var colours = d3.scale.category10(); |
|
|
|
|
|
// Draw diagram |
|
var diagram = venn.drawD3Diagram(d3.select("#d3-venn-interactive"), venn.venn(sets, overlaps), 350, 350); |
|
|
|
|
|
// Circle styles |
|
diagram.circles |
|
.style("fill-opacity", 0) |
|
.style("stroke-width", 4) |
|
.style("stroke-opacity", .6) |
|
.style("cursor", "pointer") |
|
.style("fill", function(d,i) { return colours(i); }) |
|
.style("stroke", function(d,i) { return colours(i); }); |
|
|
|
|
|
// Text styles |
|
diagram.text |
|
.style("fill", function(d,i) { return colours(i)}) |
|
.style("cursor", "pointer") |
|
.style("font-size", "14px") |
|
.style("font-weight", "500"); |
|
|
|
|
|
// Add interaction |
|
diagram.nodes |
|
.on("mouseover", function(d, i) { |
|
var node = d3.select(this).transition(); |
|
node.select("circle").style("fill-opacity", .1); |
|
node.select("text").style("font-weight", "500").style("font-size", "16px"); |
|
}) |
|
.on("mouseout", function(d, i) { |
|
var node = d3.select(this).transition(); |
|
node.select("circle").style("fill-opacity", 0); |
|
node.select("text").style("font-weight", "500").style("font-size", "14px"); |
|
}) |
|
.on("click", function(d, i) { |
|
alert("You have clicked on one of the rings!") |
|
}); |
|
});
|
|
|