Float/FloatBackOfffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
dev-chiefworks
2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/charts/d3/venn/venn_basic.js
Vendored
+51
View File
@@ -0,0 +1,51 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - basic Venn diagram
*
* Basic demo d3.js Venn diagram setup
*
* 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
// ------------------------------
// Draw diagram
var diagram = venn.drawD3Diagram(d3.select("#d3-venn-basic"), venn.venn(sets, overlaps), 350, 350);
// Make text semi bold
diagram.text.style("font-weight", "500");
});
assets/js/charts/d3/venn/venn_colors.js
Vendored
+65
View File
@@ -0,0 +1,65 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - custom diagram colors
*
* Venn diagram demo with custom color options
*
* 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-colors"), venn.venn(sets, overlaps), 350, 350);
// Style circles
diagram.circles
.style("fill-opacity", .7)
.style("stroke-opacity", 0)
.style("fill", function(d,i) { return colours(i); })
.style("stroke", function(d,i) { return colours(i); });
// Style text
diagram.text
.style("fill", "white")
.style("font-weight", "500");
});
assets/js/charts/d3/venn/venn_interactive.js
Vendored
+86
View File
@@ -0,0 +1,86 @@
/* ------------------------------------------------------------------------------
*
* # 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!")
});
});
assets/js/charts/d3/venn/venn_rings.js
Vendored
+66
View File
@@ -0,0 +1,66 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - ring Venn diagram
*
* Venn diagram demo with ring style option
*
* 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-rings"), venn.venn(sets, overlaps), 350, 350);
// Style circles
diagram.circles
.style("fill-opacity", 0)
.style("stroke-width", 6)
.style("stroke-opacity", .6)
.style("fill", function(d,i) { return colours(i); })
.style("stroke", function(d,i) { return colours(i); });
// Style text
diagram.text
.style("fill", function(d,i) { return colours(i)})
.style("font-weight", "500");
});
assets/js/charts/d3/venn/venn_tooltip.js
Vendored
+137
View File
@@ -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");
});
});
assets/js/charts/d3/venn/venn_weighted.js
Vendored
+75
View File
@@ -0,0 +1,75 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - weighted Venn diagram
*
* Venn diagram demo with weights
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Data set
// ------------------------------
// Circles
var sets = [{label: "0", size: 7000},
{label: "1", size: 7000},
{label: "2", size: 2000},
{label: "3", size: 11000},
{label: "4", size: 11000}];
// Overlaps
var overlaps = [{id: 1, sets: [2,0], size: 300},
{id: 2, sets: [2,1], size: 300},
{id: 4, sets: [2,3], size: 100},
{id: 5, sets: [2,4], size: 100},
{sets: [0,0], size: 0, weight: 1e-10},
{sets: [0,1], size: 0, weight: 1e-10},
{sets: [0,3], size: 0, weight: 1e-10},
{sets: [0,4], size: 0, weight: 1e-10},
{sets: [1,0], size: 0, weight: 1e-10},
{sets: [1,1], size: 0, weight: 1e-10},
{sets: [1,3], size: 0, weight: 1e-10},
{sets: [1,4], size: 0, weight: 1e-10},
{sets: [3,0], size: 0, weight: 1e-10},
{sets: [3,1], size: 0, weight: 1e-10},
{sets: [3,3], size: 0, weight: 1e-10},
{sets: [3,4], size: 0, weight: 1e-10},
{sets: [4,0], size: 0, weight: 1e-10},
{sets: [4,1], size: 0, weight: 1e-10},
{sets: [4,3], size: 0, weight: 1e-10},
{sets: [4,4], size: 0, weight: 1e-10}];
// Initialize chart
// ------------------------------
// Colors
var colours = d3.scale.category10();
// Bind data
sets = venn.venn(sets, overlaps);
// Draw diagram
var diagram = venn.drawD3Diagram(d3.select("#d3-venn-weighted"), sets, 350, 350);
// Circle styles
diagram.circles
.style("fill-opacity", .7)
.style("stroke-opacity", 0)
.style("fill", function(d,i) { return colours(i); })
.style("stroke", function(d,i) { return colours(i); });
// Text styles
diagram.text
.style("fill", "white")
.style("font-weight", "500");
});