first commit

2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
@@ -0,0 +1,137 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # D3.js - Venn diagram with tooltip
+ *
+ *  Venn diagram demo setup with interactive data tooltip
+ *
+ *  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();
+
+    // Get positions for each set
+    sets = venn.venn(sets, overlaps);
+
+    // Draw the diagram in the 'venn' div
+    var diagram = venn.drawD3Diagram(d3.select("#d3-venn-tooltip"), sets, 350, 350);
+
+
+    // Add tooltip
+    // ------------------------------
+
+    // Add a tooltip showing the size of each set/intersection
+    var tooltip = d3.select("body").append("div")
+        .attr("class", "venntooltip");
+
+    d3.selection.prototype.moveParentToFront = function() {
+        return this.each(function(){
+            this.parentNode.parentNode.appendChild(this.parentNode);
+        });
+    };
+
+    // Text styling
+    diagram.text.style("fill", "white").style("font-weight", "500").style("cursor", "pointer");
+
+    // Hover on all the circles
+    diagram.circles
+        .style("stroke-opacity", 0)
+        .style("stroke", "white")
+        .style("stroke-width", "2")
+        .style("fill-opacity", .7);
+
+
+    // Add events
+    diagram.nodes
+        .on("mousemove", function() {
+            tooltip.style("left", (d3.event.pageX + 20) + "px")
+                   .style("top", (d3.event.pageY - 15) + "px");
+        })
+        .on("mouseover", function(d, i) {
+            var selection = d3.select(this).select("circle");
+            selection.moveParentToFront()
+                .transition()
+                .style("fill-opacity", .7)
+                .style("cursor", "pointer")
+                .style("stroke-opacity", 1);
+
+            tooltip.transition().style("display", "block");
+            tooltip.text(d.size + " users");
+        })
+        .on("mouseout", function(d, i) {
+            d3.select(this).select("circle").transition()
+                .style("fill-opacity", .7)
+                .style("stroke-opacity", 0);
+
+            tooltip.transition().style("display", "none");
+        });
+
+
+        // Draw a path around each intersection area, add hover there as well
+        diagram.svg.selectAll("path")
+            .data(overlaps)
+            .enter()
+            .append("path")
+            .attr("d", function(d) { 
+                return venn.intersectionAreaPath(d.sets.map(function(j) { return sets[j]; })); 
+            })
+            .style("fill-opacity","0")
+            .style("fill", "#333")
+            .style("stroke-opacity", 0)
+            .style("stroke", "white")
+            .style("stroke-width", "2")
+            .on("mouseover", function(d, i) {
+                d3.select(this).transition()
+                    .style("fill-opacity", .1)
+                    .style("stroke-opacity", 1);
+
+                tooltip.transition().style("display", "block");
+                tooltip.text(d.size + " users");
+            })
+            .on("mouseout", function(d, i) {
+                d3.select(this).transition()
+                    .style("fill-opacity", 0)
+                    .style("stroke-opacity", 0);
+
+                tooltip.transition().style("display", "none");
+            })
+            .on("mousemove", function() {
+                tooltip.style("left", (d3.event.pageX + 20) + "px")
+                       .style("top", (d3.event.pageY - 15) + "px");
+            });
+});