score:4

Accepted answer

I added gutters. You can change the number to change the gutter ratio.

I added another axis bound to x1 scale,

var xAxisTop = d3.axisBottom(xTop)
    .ticks(d3.timeMonth)
    .tickFormat(d=>d3.timeFormat("%b %Y")(d));

and it is called in brushed as the following.

gXTop.call(xAxisTop);

If there's something I missed, or anything else you want added, please, comment.

enter image description here

Fiddle


Related Query

More Query from same tag