nimezhu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    venn pie graph demo

  
## index.html
<!DOCTYPE HTML>
<head>
  <meta charset="utf-8">
  <title>venn pie demo</title>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <style>
  body {
  font:10px sans-serif;
  }
  </style>
</head>
<body>
<div id="canvas">
</div>
</body>
<script>
    function vennpie(data){
    var arcs = [];
    var a = 0  ;
    k = 3.1415926 * 2 / 1.0
    arcs[0] = {
        data: data[0],
        value: d = data[0],
        startAngle: a,
        endAngle: d * k,
        outerRadius: 50,
        innerRadius: 40
    };
    arcs[1] = {
        data: data[1],
        value:d = data[1],
        startAngle: (data[0]-data[2])*k ,
        endAngle: (data[0]+data[1]-data[2])*k,
        outerRadius: 60,
        innerRadius: 50
    };

    arcs[2] = {
        data: 1.0-data[0]-data[1]+data[2],
        value: d = 1.0-data[0]-data[1]+data[2],
        startAngle: (data[0]+data[1]-data[2])*k,
        endAngle: 2*3.1415926,
        outerRadius: 40,
        innerRadius: 0,
    };
    return arcs
}


data=[0.3,0.7,0.1]
pie=vennpie(data);
console.log(pie);

var w = 300,
    h = 300,
    r = 100,
    color = d3.scale.category10();
 var arc = d3.svg.arc() ;

var vis= d3.select("#canvas")
        .append("svg:svg")
        .data([data])
            .attr("width", w)
            .attr("height", h)
        .append("svg:g")
            .attr("transform", "translate(" + r + "," + r + ")")

var arcs = vis.selectAll("g.slice")
        .data(pie)
        .enter()
        .append("svg:g")
        .attr("class", "slice");

        arcs.append("svg:path")
                .attr("fill", function(d, i) { return color(i); } )
                .attr("d", arc)
                .attr("opacity",0.7);
</script>
	<!DOCTYPE HTML>
	<head>
	<meta charset="utf-8">
	<title>venn pie demo</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
	body {
	font:10px sans-serif;
	}
	</style>
	</head>
	<body>
	<div id="canvas">
	</div>
	</body>
	<script>
	function vennpie(data){
	var arcs = [];
	var a = 0 ;
	k = 3.1415926 * 2 / 1.0
	arcs[0] = {
	data: data[0],
	value: d = data[0],
	startAngle: a,
	endAngle: d * k,
	outerRadius: 50,
	innerRadius: 40
	};
	arcs[1] = {
	data: data[1],
	value:d = data[1],
	startAngle: (data[0]-data[2])*k ,
	endAngle: (data[0]+data[1]-data[2])*k,
	outerRadius: 60,
	innerRadius: 50
	};

	arcs[2] = {
	data: 1.0-data[0]-data[1]+data[2],
	value: d = 1.0-data[0]-data[1]+data[2],
	startAngle: (data[0]+data[1]-data[2])*k,
	endAngle: 2*3.1415926,
	outerRadius: 40,
	innerRadius: 0,
	};
	return arcs
	}


	data=[0.3,0.7,0.1]
	pie=vennpie(data);
	console.log(pie);

	var w = 300,
	h = 300,
	r = 100,
	color = d3.scale.category10();
	var arc = d3.svg.arc() ;

	var vis= d3.select("#canvas")
	.append("svg:svg")
	.data([data])
	.attr("width", w)
	.attr("height", h)
	.append("svg:g")
	.attr("transform", "translate(" + r + "," + r + ")")

	var arcs = vis.selectAll("g.slice")
	.data(pie)
	.enter()
	.append("svg:g")
	.attr("class", "slice");

	arcs.append("svg:path")
	.attr("fill", function(d, i) { return color(i); } )
	.attr("d", arc)
	.attr("opacity",0.7);
	</script>