score:1

Accepted answer

you can create multiple scaleBands, for rank_bucket, nation and group.

For each scales' range width, use the each bandwidth() of the preceding scale. For example,

var xscale_rank_bucket = d3.scaleBand()
          .rangeRound([0,width])
          .padding(0.2)
          .domain(Array.from(rank_buckets));

var xscale_nation = d3.scaleBand()
          .rangeRound([0,xscale_rank_bucket.bandwidth()])
          .padding(0.1)
          .domain(Array.from(nations));

You had done some of this already, but it just needed extending to the third scale.

Also, you can create multiple x-axes for nation and rank_bucket. For the nation axes, you will need one per rank_bucket, so you can add them based on a rank_bucket data join, for example:

var axisNationG = axes.selectAll(".axis-nation")
        .data(Array.from(rank_buckets))
      .enter()
      .append("g")
      .attr("transform", function(d){
        return "translate(" + xscale_rank_bucket(d) + ",0)"
      })
      .attr("class", "x axis")
      .call(axisNation)

The axes can be translated and styled to look like your mock up.

https://jsfiddle.net/yL5z1q04/5/

PS - The updated fiddle uses Sets to extract the unique values for each scale, and converts the Sets to Arrays for use in the scales and data joins.


Related Query

More Query from same tag