Skip to content

Instantly share code, notes, and snippets.

@tborychowski
Created October 6, 2014 20:54
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 tborychowski/b16b4fe4950362c18e26 to your computer and use it in GitHub Desktop.
Save tborychowski/b16b4fe4950362c18e26 to your computer and use it in GitHub Desktop.
d3 multi-series donut / arc-ular graph
var s = 1, e = s + 4;
var data = d3.range(s, e);
var col = d3.scale.category10();
var scal = d3.scale.linear()
.domain([data[0], data[data.length-1]])
.range([0, 1]);
var g = d3.select('svg');
var groups = g.selectAll('g').data(data).enter().append('g');
groups.attr({
transform: function (d, i) {
return 'translate(220, 219)';
}
});
var r = 30,
h = 15,
pad = 2,
arc = d3.svg.arc()
.innerRadius(function (d, i) {
return r + h * i - h + pad;
})
.outerRadius(function (d, i) {
return r + h * i;
})
.startAngle(-Math.PI)
.endAngle(function (d) {
return Math.PI * 0.1 + d - Math.PI;
});
var arcs = groups.append('path')
.attr({
d: arc,
fill: function (d, i) {
return col(i);
}
});
var labels = groups.append('text')
.text(function (d, i) { return d; })
.attr({
fill: '#000',
y: function (d, i) { return r + h * i - 2; },
x: 5,
'font-size': 11
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment