axis breaks

This example demonstrates how the d3fc discontinuous scale can be used to create a 'break' in a scale, in this case the range 5-20 is removed in order to allow data which spans a large range, to be more easiy visualised.

A line annotation is used to highlight the location of the break.

(Note, the axis ticks are not ideal, as highlighted in this issue).

<!DOCTYPE html>

<script src="//unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="//unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>

<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>

var bar = fc.autoBandwidth(fc.seriesSvgBar())
		.align('left')
    .crossValue((_, i) => i)
    .mainValue(d => d);
  
var scaleWithBreak = fc.scaleDiscontinuous(d3.scaleLinear())
    .discontinuityProvider(fc.discontinuityRange([5, 20]));
  
var annotation = fc.annotationSvgLine();
  
var multi = fc.seriesSvgMulti()
	.series([bar, annotation])
  .mapping((data, index, series) => {
      switch(series[index]) {
        case annotation:
          return [5];
        case bar:
          return data;
      }
    });

var chart = fc.chartCartesian(
      d3.scaleBand(),
      scaleWithBreak
    )
		.chartLabel("A chart with a 'break' in the y-scale between 5-20")
    .xDomain(data.map((_, i) => i))
		.xPadding(0.2)
    .yDomain(d3.extent(data))
    .svgPlotArea(multi);

d3.select('#chart')
    .datum(data)
    .call(chart);

</script>

https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js

https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js

https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js

https://unpkg.com/babel-standalone@6/babel.min.js

https://unpkg.com/d3@5.5.0

https://unpkg.com/d3fc@14.0.41