piechooser
Iobio.viz piechooser chart
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
<script src="https://iobio.io/public/js/iobio.viz.min.js"></script> | |
<link rel="stylesheet" type="text/css" href="https://iobio.io/public/css/iobio.viz.min.css"> | |
<style type="text/css"> | |
body { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
margin: auto; | |
position: relative; | |
width: 960px; | |
} | |
#piechooser-viz { text-align: center; } | |
#piechooser-viz .iobio-pie .iobio-percent { font-size: 20px;} | |
#piechooser-viz .iobio-pie .iobio-count { font-size: 12px;} | |
#piechooser-viz .arc text { fill: white; font-size: 10px; font-weight: normal; } | |
#piechooser-viz circle#all-circle:hover { fill: #F7F3BA;} | |
#piechooser-viz circle#all-circle.selected { fill: #F7F3BA; stroke-width: 1.5px;} | |
</style> | |
</head> | |
<body> | |
<div id="piechooser-viz"> | |
</div> | |
<script> | |
var m = [15, 35, 25, 15], | |
w = 230, | |
h = 230, | |
r = Math.min(w, h) / 2; | |
var color = d3.scale.category20b(); | |
var pie = d3.layout.pie() | |
.sort(null) | |
.value(function(d,i) {return d.value}); | |
var references = [ | |
{name: 'chr1', value: +20}, | |
{name: 'chr2', value: +14}, | |
{name: 'chr3', value: +15}, | |
{name: 'chr4', value: +17}, | |
{name: 'chr5', value: +23}, | |
{name: 'chr6', value: +24}, | |
{name: 'chr7', value: +30} | |
]; | |
var selection = d3.select("#piechooser-viz").datum( pie(references) ); | |
var chart = iobio.viz.pieChooser() | |
.radius(r) | |
.innerRadius(r*.5) | |
.padding(30) | |
.color( function(d,i) { | |
return color(i); | |
}) | |
.on("click", function(d,i) { | |
console.log("chr clicked " + d ); | |
}) | |
.on("clickall", function(d,i) { | |
console.log("click all " + d); | |
}) | |
.tooltip( function(d) { | |
return d.data.name; | |
}); | |
chart( selection ); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment