This is a radial variant of my earlier example stacked bar chart. While pretty, you probably don’t want to use this version because it’s easier to compare the bars when they share an aligned (linear) axis. You might consider this form if your ordinal axis is cyclical, such as weeks of the year, and you want to show a cyclical pattern. This example’s data is not cyclical, so the use of a radial form here is rather gratuitous!
forked from mbostock's block: Radial Stacked Bar
xxxxxxxxxx<meta charset="utf-8"><svg width="960" height="960" font-family="sans-serif" font-size="8" ></svg><script src="https://d3js.org/d3.v4.min.js"></script><script src="d3-scale-radial.js"></script><script> //forked from Bostocks https://bl.ocks.org/mbostock/6fead6d1378d6df5ae77bb6a719afcb2var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), innerRadius = 200, outerRadius = Math.min(width, height) / 2, g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");var x = d3.scaleBand() .range([0, 2 * Math.PI]) .align(0);var y = d3.scaleRadial() .range([innerRadius, outerRadius]);var z = d3.scaleOrdinal() .range(["#c496b7", "#9aa587", "#413748", "#6b486b", "#a05d56", "#d0743c", "#ff8c00", "#87a589"]);//Insert data herevar url = "https://raw.githubusercontent.com/MTClass/Project_Graphs/master/RaceCounties.csv" d3.csv(url, function(d, i, columns) { for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]]; d.total = t; return d;}, function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.County; })); y.domain([0, d3.max(data, function(d) { return d.total; })]); z.domain(data.columns.slice(1)); g.append("g") .selectAll("g") .data(d3.stack().keys(data.columns.slice(1))(data)) .enter().append("g") .attr("fill", function(d) { return z(d.key); }) .selectAll("path") .data(function(d) { return d; }) .enter().append("path") .attr("d", d3.arc() .innerRadius(function(d) { return y(d[0]); }) .outerRadius(function(d) { return y(d[1]); }) .startAngle(function(d) { return x(d.data.County); }) .endAngle(function(d) { return x(d.data.County) + x.bandwidth(); }) .padAngle(0.01) .padRadius(innerRadius)); var label = g.append("g") .selectAll("g") .data(data) .enter().append("g") .attr("text-anchor", "middle") .attr("transform", function(d) { return "rotate(" + ((x(d.County) + x.bandwidth() / 2) * 180 / Math.PI - 90) + ")translate(" + innerRadius + ",0)"; }); label.append("line") .attr("x2", -5) .attr("stroke", "#000"); label.append("text") .attr("transform", function(d) { return (x(d.County) + x.bandwidth() / 2 + Math.PI / 2) % (2 * Math.PI) < Math.PI ? "rotate(90)translate(0,16)" : "rotate(-90)translate(0,-9)"; }) .text(function(d) { return d.County; }); var yAxis = g.append("g") .attr("text-anchor", "middle"); var yTick = yAxis .selectAll("g") .data(y.ticks(5).slice(1)) .enter().append("g"); yTick.append("circle") .attr("fill", "none") .attr("stroke", "#000") .attr("r", y); yTick.append("text") .attr("y", function(d) { return -y(d); }) .attr("dy", "0.35em") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 5) .text(y.tickFormat(5, "s")); yTick.append("text") .attr("y", function(d) { return -y(d); }) .attr("dy", "0.35em") .text(y.tickFormat(5, "s")); yAxis.append("text") .attr("y", function(d) { return -y(y.ticks(5).pop()); }) .attr("dy", "-1em") .text("Population"); var legend = g.append("g") .selectAll("g") .data(data.columns.slice(1).reverse()) .enter().append("g") .attr("transform", function(d, i) { return "translate(-40," + (i - (data.columns.length - 1) / 2) * 20 + ")"; }); legend.append("rect") .attr("width", 18) .attr("height", 18) .attr("fill", z); legend.append("text") .attr("x", 24) .attr("y", 9) .attr("dy", "0.35em") .text(function(d) { return d; });});</script> https://d3js.org/d3.v4.min.js