Skip to content

Instantly share code, notes, and snippets.

@tonydisera

tonydisera/index.html

Last active May 28, 2018
Embed
What would you like to do?
Iobio.viz piechooser chart

piechooser

<!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