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.
75 lines
2.3 KiB
75 lines
2.3 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # 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"); |
|
});
|
|
|