How to apply horizontal break to a d3.js bar chart

Question

I am using Rickshaw (based on d3.js) to plot stacked bar charts. The problem is that the first bar is usually way more higher than the others, ruining the visual feedback.

Using logarithmic scale is (I guess) not an option here, because then the proportions between stacks in a bar will get broken. I wanted to introduce a horizontal break like in following image:

However, I cannot find any out-of-the box feature of Rickshaw or d3.js to do something like this. Any suggestions on how to make one?

Answer 1

This would require quite a bit of additional work. Here's an outline of what you would have to do.

• Create two scales, one for the lower part and one for the upper. Set domains and ranges accordingly.
• Pass values to the lower scale, capping them at the maximum domain value such that bars that are longer will reach the maximum.
• Pass values to the upper scale, filtering those that are lower than the minimum.

You basically need to create two graphs that are aligned with each other to give the impression that there's just one. If you keep that in mind, doing it shouldn't be too difficult.

Here's a quick and dirty proof of concept that uses the linear scale's .clamp(true) to prevent the bars from becoming too long for values outside the domain.

Answer 2

The d3fc-discontinuous-scale component adapts any other scale (for example a d3 linear scale) and adding the concept of discontinuities. These discontinuities are determined via a 'discontinuity provider', which can be used to create one or more 'gaps' in a scale.

For example, to remove a range, you can construct a scale as follows:

var scale = scaleDiscontinuous(scaleLinear())
    .discontinuityProvider(discontinuityRange([50, 75]))

Here is a complete example that shows how to use this to create a 'break' in a scale in order to render values that have large gaps in their overall range.

https://bl.ocks.org/ColinEberhardt/b60919a17c0b14d745c881f48effe681