D3 Examples - axis breaks

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).

xxxxxxxxxx
 
<!DOCTYPE html>
<!-- include polyfills for custom event, Symbol and Custom Elements -->
<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>
​
<!-- use babel so that we can use arrow functions and other goodness in this block! -->
<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>
​
<script src="//unpkg.com/d3@5.5.0"></script>
<script src="//unpkg.com/d3fc@14.0.41"></script>
​
<style>
  body {
    font-family: sans-serif;
  }
  
  .tick text {
    font-size: 14px;
  }
  
  .chart-label {
    font-size: 25px;
  }
  
  #chart {
    height: 480px;
  }
  
  .annotation-line text {
    display: none;
  }
  
  line {
    stroke: red;
    stroke-width: 3;
    stroke-dasharray: 5 5;
    }
</style>
<body>
  
<div id="chart"></div>
​
<script type='text/babel'>
var data = [0, 1, 2, 4, 3, 22, 25];
​
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>
​
    