MD Counties Radial Stacked Bar

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

<!DOCTYPE html>
<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/6fead6d1378d6df5ae77bb6a719afcb2
var 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 here
var 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