Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 8, 2016 23:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mbostock/611840 to your computer and use it in GitHub Desktop.
Save mbostock/611840 to your computer and use it in GitHub Desktop.
Donuts
license: gpl-3.0
<html>
<head>
<script type="text/javascript" src="https://cdn.rawgit.com/mbostock/protovis/v3.3.1/protovis.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body><center>
<script type="text/javascript+protovis">
var data = [
{dept:"Accounting", values: [
{name:"sal", value:90000},
{name:"equ", value:10000},
{name:"trvl", value:267},
{name:"extra", value:5000}
]},
{dept:"Sales", values: [
{name:"sal", value:20000},
{name:"equ", value:10000},
{name:"trvl", value:3049},
{name:"extra", value:7000}
]},
{dept:"Consulting", values: [
{name:"sal", value:90000},
{name:"equ", value:58000},
{name:"trvl", value:983},
{name:"extra", value:17000}
]}
];
/* Sizing. */
var w = 280,
h = w,
r = w / 2;
/* Scales. */
data.forEach(function(d) d.scale = pv.Scale.linear(0,
pv.sum(d.values, function(d) d.value))
.range(0, 2 * Math.PI));
/* The root panel. */
var vis = new pv.Panel()
.data(data)
.width(w)
.height(h)
.margin(10);
/* The wedge, with centered label. */
vis.add(pv.Wedge)
.data(function(d) d.values)
.bottom(w / 2)
.left(w / 2)
.innerRadius(r - 40)
.outerRadius(r)
.angle(function(d, p) p.scale(d.value))
.anchor("center").add(pv.Label)
.text(function(d) d.name);
vis.render();
</script>
</center></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment