Draw 5 way diagram using d3.js

Question

I am using venn.js to try to visualize 5-way data. The data I am using is from R's VennDiagram Package . But it somehow can't show up. Most of the examples are using the even number of sets, is there anything special about the odd number?

My code is as below:

 <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>mds venn.js example</title>
<style>
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
}
</style>
</head>

<body>
    <div id="venn"></div>
</body>

<script src="http://www.numericjs.com/lib/numeric-1.2.6.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="venn.js"></script>
<script src="http://www.benfrederickson.com/images/mds.js"></script>
<script>
var sets = [{sets: ['A'], size: 301},
            {sets: ['B'], size: 321},
            {sets: ['C'], size: 311},
            {sets: ['D'], size: 321},
            {sets: ['E'], size: 301}
            {sets: ['A','B'], size: 188},
            {sets: ['A','C'], size: 191},
            {sets: ['A','D'], size: 184},
            {sets: ['A','E'], size: 177},
            {sets: ['B','C'], size: 194},
            {sets: ['B','D'], size: 197},
            {sets: ['B','E'], size: 190},
            {sets: ['C','D'], size: 190},
            {sets: ['C','E'], size: 173},
            {sets: ['D','E'], size: 186}];
var chart = venn.VennDiagram()
                 .width(600)
                 .height(400)
                 .layoutFunction(
                    function(d) { return venn.venn(d, { initialLayout: venn.classicMDSLayout });}
                );
d3.select("#venn").datum(sets).call(chart);
</script>
</html>

The original data come from

venn.plot <- draw.quintuple.venn(
area1 = 301,
area2 = 321,
area3 = 311,
area4 = 321,
area5 = 301,
n12 = 188,
n13 = 191,
n14 = 184,
n15 = 177,
n23 = 194,
n24 = 197,
n25 = 190,
n34 = 190,
n35 = 173,
n45 = 186,
n123 = 112,
n124 = 108,
n125 = 108,
n134 = 111,
n135 = 104,
n145 = 104,
n234 = 111,
n235 = 107,
n245 = 110,
n345 = 100,
n1234 = 61,
n1235 = 60,
n1245 = 59,
n1345 = 58,
n2345 = 57,
n12345 = 31,
category = c("A", "B", "C", "D", "E"),
fill = c("dodgerblue", "goldenrod1", "darkorange1", "seagreen3", "orchid3"),
cat.col = c("dodgerblue", "goldenrod1", "darkorange1", "seagreen3", "orchid3"),
cat.cex = 2,
margin = 0.05,
cex = c(1.5, 1.5, 1.5, 1.5, 1.5, 1, 0.8, 1, 0.8, 1, 0.8, 1, 0.8, 1, 0.8, 
1, 0.55, 1, 0.55, 1, 0.55, 1, 0.55, 1, 0.55, 1, 1, 1, 1, 1, 1.5),
ind = TRUE
);

Answer 1

You have a syntax error in your javascript, this line "{sets: ['E'], size: 301}" should have a comma after it - adding the comma and it produces output like:

在此输入图像描述

Draw 5 way diagram using d3.js

Question

1 answers

solution1
0 ACCPTED 2015-03-05 17:08:55

Draw 5 way diagram using d3.js

Question

1 answers

solution1 0 ACCPTED 2015-03-05 17:08:55

solution1
0 ACCPTED 2015-03-05 17:08:55