| license: mit |
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).
| State | Under 5 Years | 5 to 13 Years | 14 to 17 Years | 18 to 24 Years | 25 to 44 Years | 45 to 64 Years | 65 Years and Over | |
|---|---|---|---|---|---|---|---|---|
| CA | 2704659 | 4499890 | 2159981 | 3853788 | 10604510 | 8819342 | 4114496 | |
| TX | 2027307 | 3277946 | 1420518 | 2454721 | 7017731 | 5656528 | 2472223 | |
| NY | 1208495 | 2141490 | 1058031 | 1999120 | 5355235 | 5120254 | 2607672 | |
| FL | 1140516 | 1938695 | 925060 | 1607297 | 4782119 | 4746856 | 3187797 | |
| IL | 894368 | 1558919 | 725973 | 1311479 | 3596343 | 3239173 | 1575308 | |
| PA | 737462 | 1345341 | 679201 | 1203944 | 3157759 | 3414001 | 1910571 |
| <!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> |
