Box plot with dual dimension and dual x-axis using dc.js

Question

Is it possible with dc.js to draw two x-axis of a graph i.e. one is below and one is above. One Dimension/ x-axis contain a b and above x-axis contain 1 (a b with below a-axis) 2 (a b with below x-axis). An img is attached to explain the view. If it is possible kindly give some suggestion.

Regards.

I guess this might be called a "grouped" or "faceted" box plot. dc.js doesn't have general features for this kind of thing. (Some chart libraries like Vega-Lite do.) If you're using dc.js I think the best way to approximate this is with an ordinal scale like 1A, 1B, 2A, 2B, etc. — Gordon

Gordon Gordon · Accepted Answer · 2020-03-03T15:05:22

As for adding lines between the box plots, here is a hacky solution that works ok. Would probably need some work to make it general.

Assume we have the domain (['1A', '1B', '2A, '2B', ...]) in a variable called domain.

We can add a pretransition handler that draws lines after every second box:

function x_after(chart, n) {
  return (chart.x()(domain[n]) + chart.x()(domain[n+1])) / 2 + chart.margins().left + 7; // why 7?
}

chart.on('pretransition', chart => {
  let divide = chart.g().selectAll('line.divide').data(d3.range(domain.length/2));
  divide.exit().remove();
  divide = divide.enter()
    .append('line')
    .attr('class', 'divide')
    .attr('stroke', 'black')
    .merge(divide);
  divide
    .attr('x1', n => x_after(chart, n*2 + 1))
    .attr('x2', n => x_after(chart, n*2 + 1))
    .attr('y1', chart.margins().top)
    .attr('y2', chart.margins().top + chart.effectiveHeight())
})

This uses the D3 general update pattern to add a vertical line after every other box (specifically those with odd index number).

It takes the average of the X position of 1B and 2A, 2B and 3A, etc. I have no idea why I had to add 7, so probably I am missing something.

demo fiddle.

Box plot with dual dimension and dual x-axis using dc.js

1 Answers