Skip to content

Instantly share code, notes, and snippets.

@chmille4

chmille4/index.html

Last active May 4, 2016 17:11
Show Gist options
  • Save chmille4/49b19f91d655e5a5f8c2 to your computer and use it in GitHub Desktop.
Save chmille4/49b19f91d655e5a5f8c2 to your computer and use it in GitHub Desktop.
Download ZIP
Iobio.viz Pie/Donut Chart
Raw
readme.md

Pie/Donut chart

Raw
index.html
<!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="http://iobio.io/public/js/iobio.viz.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://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;
}
#pie-viz { text-align: center; }
#pie-viz .iobio-pie .iobio-percent { font-size: 90px;}
#pie-viz .iobio-pie .iobio-count { font-size: 40px;}
#pie-viz .iobio-pie .arc:nth-child(even) path { fill: rgb(120,176,194);}
#pie-viz .iobio-pie .arc:nth-child(odd) path { fill: rgba(120,176,194,0.5);}
</style>
</head>
<body>
<div id="pie-viz"></div>
<script>
var m = [15, 35, 25, 150],
w = 960,
h = 500,
r = Math.min(w, h) / 2;
var color = ['rgba(120,176,194,0.5)', 'rgb(120,176,194)'];
var pie = d3.layout.pie().sort(null);
var data = [10,5];
var selection = d3.select("#pie-viz").datum( pie(data) );
var chart = iobio.viz.pie()
.radius(r)
.innerRadius(r-20)
.color( function(d,i) { return color[i]; })
chart( selection );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment