venn_weighted.js 2.33 KB
Newer Older
Percy Quispe committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 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");
});