Skip to content

Instantly share code, notes, and snippets.

@nimezhu

nimezhu/README.md

Created May 5, 2014 20:07
Show Gist options
  • Save nimezhu/11546290 to your computer and use it in GitHub Desktop.
Save nimezhu/11546290 to your computer and use it in GitHub Desktop.
Download ZIP
venn pie graph version 0.1
Raw
README.md

venn pie graph demo

Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment