Graph break for large outliers

[Xhale1]

Is there a method for creating graph breaks? For example if you have a bar graph with one particularly large bar it would be great to have a built in method to break the bar and / or scale.

I found the image below as an example from this stack exchange question.

[williaster]

hey @Xhale1 thanks for checking out visx! Interesting question, I've not seen this before in d3-based charts. Some quick searching revealed two approaches, both of which require a bit of work but probably could be possible in visx.

1. use two separate scales and render two separate axes (link)
2. define a custom domain for your scaleLinear consisting of points which are not proportional/evenly spaced (link). you would then need to render a visual indication of the clipping / discontinuity that is occurring so that it is interpreted accurately. I've used the following svg for a project before (it's just a squiggly line created in Figma) which you'd need to position on top of each broken bar and on top of the axis

const CLIP_INDICATOR_WIDTH = 13;
const CLIP_INDICATOR_HEIGHT = 7;

<svg
  width={CLIP_INDICATOR_WIDTH}
  height={CLIP_INDICATOR_HEIGHT}
  viewBox={`0 0 ${CLIP_INDICATOR_WIDTH} ${CLIP_INDICATOR_HEIGHT}`}
  fill="none"
>
  <path d="M1 6L4.66667 2.25L8.33333 4.75L12 1" stroke="white" strokeWidth="1.5" />
</svg>

(note there is no broken axis, just indicating the bar goes far above the visible space)

[williaster]

I don't think this is an issue with visx since we probably would never support this out of the box / it would be a custom implementation, so I'm going to convert this to a discussion instead of an issue.

[gazcn007]

Interesting Idea!
I found something like this online: http://jsfiddle.net/9xbgT/
Maybe we can add graph break legends in the middle.

I don't think D3 has generic support for graph break in the mid of axis, because when you apply scale(), the internal math just converts consistent data units to visual units.

Some thinking:

1. How often do you need to graph break: Graph breaking should only be used in rare cases where your visual space is too small.

2. Can you break the graph into different groups instead: I know for Tableau, it suggests breaking data that has huge difference in value into different groups, like say visualizing car performance, you shouldn't put a Sedan and a F1 in one visualization. Instead you should break cars into different groups, GT1, GT2, F1 🏎 . And visualize each group with their own axis because they are more comparable [exmaple]:(https://public.tableau.com/app/profile/gianni.balduzzi/viz/Laforzadeipartitiinbaseaidiversiistituti/Dashboard7)
   

3. How do you decide when to graph break? With graph that has extreme high values or low values, it is easy, what if you have a graph that has some data points right in the middle, in that case you won't be able to break it 🤔