17

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. bar chart with bad proportions

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: Bar chart with horizontal break

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?

Palec
  • 12,743
  • 8
  • 69
  • 138
kciesielski
  • 1,178
  • 9
  • 18

2 Answers2

7

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.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • 2
    Makes sense. [Here's an alternative](http://jsfiddle.net/9xbgT/2/) using a single scale –– instead of `upper` and `lower`. By single scale, I mean `var fullScale = d3.scale.linear().domain([0,5,15,30]).range([280,180,160,0])`. That lets you draw the chart with a single rect per bar and a single Y axis. Then overlay break symbols to make the bars and axis look segmented. – meetamit Dec 17 '13 at 04:09
  • Thank you, I tried this approach and it works, but requires quite some plumbing. After all I took a different approach which works fine in my case and is easier to develop. Still, your answer solves the question. – kciesielski Dec 31 '13 at 13:08
  • 4
    @kciesielski Can you post the code you eventually used? – BBischof Jun 25 '14 at 20:40
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

ColinE
  • 68,894
  • 15
  • 164
  • 232