first commit
This commit is contained in:
+75
@@ -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");
|
||||
});
|
||||
Reference in New Issue
Block a user