/* ------------------------------------------------------------------------------ * * # 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!") }); });