/* polar layout */ (function() { var RADIUS, arc_generator, bl, br, color, data, height, inner_radius_scale, max, pie, pies, polar, polar_data, polar_layout, radius_scale, rand2_6, side, svg, ul, ur, width; polar = function() { var angle, self; angle = null; self = function(data) { angle = 2 * Math.PI / data.length; data.forEach(function(d, i) { return d.angle = data.length > 2 ? i * angle : (i - 0.25) * angle; }); return data; }; self.angle = function() { return angle; }; return self; }; /* --- */ rand2_6 = function() { return 2 + Math.round(Math.random() * 6); }; data = d3.range(rand2_6()).map(function(d) { return { category: "cat_" + d, value: Math.random() }; }); console.log(data); max = d3.max(data, function(d) { return d.value; }); width = 960; height = 500; side = Math.min(width, height); RADIUS = side / 4 - 20; polar_layout = polar(); polar_data = polar_layout(data); console.log(polar_data); svg = d3.select("body").append("svg").attr("width", width).attr("height", height).append('g').attr({ transform: "translate(" + (width / 2) + ", " + (height / 2) + ")" }); ul = svg.append("g").attr({ transform: "translate(" + (-side / 4) + ", " + (-side / 4) + ")" }); ur = svg.append("g").attr({ transform: "translate(" + (+side / 4) + ", " + (-side / 4) + ")" }); bl = svg.append("g").attr({ transform: "translate(" + (-side / 4) + ", " + (+side / 4) + ")" }); br = svg.append("g").attr({ transform: "translate(" + (+side / 4) + ", " + (+side / 4) + ")" }); color = d3.scale.ordinal().range(["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02", "#a6761d", "#666666"]); pie = d3.layout.pie().sort(null).value(function(d) { return d.value; }); arc_generator = d3.svg.arc().innerRadius(0).outerRadius(RADIUS); ul.selectAll('.arc').data(pie(data)).enter().append('path').attr({ "class": 'arc', d: arc_generator, fill: function(d, i) { return color(i); } }); radius_scale = d3.scale.linear().domain([0, max]).range([0, RADIUS]); inner_radius_scale = d3.scale.linear().domain([0, max]).range([RADIUS * 0.4, RADIUS]); arc_generator = d3.svg.arc().innerRadius(function(d) { return inner_radius_scale(max - d.value); }).outerRadius(function(d) { return radius_scale(max); }).startAngle(function(d) { return d.angle - polar_layout.angle() / 2; }).endAngle(function(d) { return d.angle + polar_layout.angle() / 2; }); pies = ur.selectAll('.arc').data(polar_data); pies.enter().append('path').attr({ "class": 'arc', d: arc_generator, fill: function(count, klass) { return color(klass); } }); radius_scale = d3.scale.linear().domain([0, max]).range([0, RADIUS]); arc_generator = d3.svg.arc().innerRadius(0).outerRadius(function(d) { return radius_scale(d.value); }).startAngle(function(d) { return d.angle - polar_layout.angle() / 2; }).endAngle(function(d) { return d.angle + polar_layout.angle() / 2; }); bl.selectAll('.arc').data(polar_data).enter().append('path').attr({ "class": 'arc', d: arc_generator, fill: function(d, i) { return color(i); } }); radius_scale = d3.scale.sqrt().domain([0, max]).range([0, RADIUS]); arc_generator = d3.svg.arc().innerRadius(0).outerRadius(function(d) { return radius_scale(d.value); }).startAngle(function(d) { return d.angle - polar_layout.angle() / 2; }).endAngle(function(d) { return d.angle + polar_layout.angle() / 2; }); br.selectAll('.arc').data(polar_data).enter().append('path').attr({ "class": 'arc', d: arc_generator, fill: function(d, i) { return color(i); } }); }).call(this);