score:1

Here are two different approaches I can think of right away:

1. Set an offset to define how much less should the inner bar width should be compared to the outer and adjust the bars accordingly.

``````var offset = 10;
chart.selectAll(".bar").attr("x", (d, i) => {
return i%2 ? x(d.phase)+offset/2 : x(d.phase)
})
.attr("y", (d, i) => {
return y(d.finish);
})
.attr("width", (d,i) => {
return i%2 ? x.bandwidth()-offset : x.bandwidth();
})
``````
2. Set a different scale for the green bars (I'd prefer this approach):

``````var x1 = d3.scaleBand()
.range([0, width])
.domain(data.map(function(d) {
return d.phase
}));
``````

And accordingly, change the bar attributes:

``````chart.selectAll(".bar")
.attr("x", (d, i) => {
return i % 2 ? x(d.phase)+(Math.abs(x1.bandwidth()-x.bandwidth())/2) : x(d.phase)
})
.attr("y", (d, i) => {
return y(d.finish);
})

.attr("width", (d, i) => {
return i % 2 ? x1.bandwidth() : x.bandwidth()
})
``````

The tricky part here would be setting the inner bar offset but you can clearly see the logic there: Difference between the bandwidths of the scales/2

Hope this helps.