2b:null 2c:["$","title",null,{"children":"Introducing d3-scale-break for handling heavily skewed data | Luke Whyte | Observable"}] 31:T4c6,continuous = { const x = d3.scaleLinear() .domain([0, extent[1]]) .range([margin.left, width - margin.right]); const y = d3.scaleBand() .domain(d3.range(data.length)) .range([margin.top, height - margin.bottom]) .padding(0.1); const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).ticks(width / 80, '$~s')) .call(g => g.select(".domain").remove()) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(i => data[i].profession).tickSizeOuter(0)) const svg = d3.select(DOM.svg(width, height)); svg.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(data.slice().sort((a,b) => b.medianIncome - a.medianIncome)) .join("rect") .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("width", d => x(d.medianIncome) - x(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .style("font", "12px sans-serif") .selectAll("text") .data(data); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }32:T6c9,scaleBreakCont = { const bp = 100000; const x = d3sB.scaleLinear() .domain([ [0, bp], [bp, extent[1]] ]) .scope([ [0, 0.5], [0.5, 1] ]) .range([margin.left, width - margin.right]); const y = d3.scaleBand() .domain(d3.range(data.length)) .range([margin.top, height - margin.bottom]) .padding(0.1); const boldenLastTick = ticks => ticks.select('text') .style('font-weight', d => d === 100000 ? 'bold' : 'normal'); const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3sB.axisTop(x).tickArguments(width / 80).tickFormat(d3.format('$~s'))) .call(g => g.selectAll(".domain").remove()) .call(g => boldenLastTick(g.selectAll("g.axis-0 g.tick"))) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(i => data[i].profession).tickSizeOuter(0)) const svg = d3.select(DOM.svg(width, height)); svg.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(data.slice().sort((a,b) => b.medianIncome - a.medianIncome)) .join("rect") .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("width", d => x(d.medianIncome) - x(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .style("font", "12px sans-serif") .selectAll("text") .data(data); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append('line') .attr('x1', x(bp)) .attr('x2', x(bp)) .attr('y1', y(0)) .attr('y2', y(data.length - 1) + y.bandwidth()) .style('stroke', '#333') .style('stroke-dasharray', '5,5'); return svg.node(); }33:T5a8,html`

Here's what's different (full API in README):

.domain() now accepts an array of subarrays as opposed to a single array. Each of the subarrays will represent a scale (between a break) in our visualization.
The .scope() method is introduced. Like .domain, .scope accepts an array of nested subarrays. These subarrays correspond to the subarrays passed to .domain and represent a perecentage of the .range to be occupied by their corresponding domain on your chart. Thus, in the above example, there are two nested domains (.domain([ [0, 1000], [1000, 10000] ])) that will each correspond to 50% of the range because of what we define in scope (.scope([ [0, 0.5], [0.5, 1] ])).
.range() does not change at all. It is still the total amount of available space in your SVG that the visualization should occupy. Further all the existing scale methods – like .inverse – are still available.
d3sB.axisLeft, d3sB.axisTop, d3sB.axisRight and d3sB.axisBottom are introduced too. They operate exactly like the d3 axis functions (and share the same methods), but will draw a different, corresponding axis for each one of your scales.

`34:T698,scaleBreakDot = { const x = d3sB.scaleLinear() .domain([ [0, 100000], [5000000, extent[1]] ]) .scope([ [0, 0.46], [0.54, 1] ]) .range([margin.left, width - margin.right]); const y = d3.scaleBand() .domain(d3.range(data.length)) .range([margin.top, height - margin.bottom]) .padding(0.1); const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3sB.axisTop(x).ticks((width / 80), '$~s')) .call(g => g.selectAll(".domain").remove()) .call(g => g.selectAll('text') .attr("y", -3) .attr("x", 9) .attr("dy", ".35em") .attr("transform", "rotate(290)") .style("text-anchor", "start")); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(i => data[i].profession).tickSizeOuter(0)) const svg = d3.select(DOM.svg(width, height)); svg.append('rect') .attr('x', x(100000)) .attr('y', y(0)) .attr('width', x(5000000) - x(100000)) .attr('height', y(data.length - 1) + y.bandwidth()) .style('fill', '#f9f9f9') .style('fill-opacity', 0.7); svg.append("g") .attr("fill", "steelblue") .selectAll("circle") .data(data.sort((a,b) => b.medianIncome - a.medianIncome)) .join("circle") .attr("cx", d => x(d.medianIncome)) .attr("cy", (d, i) => y(i) + (y.bandwidth() / 2)) .attr('r', 5); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .style("font", "12px sans-serif") .selectAll("text") .data(data); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }35:T9cf,rebates = { const breakpoints = [-2000, 9300] const [b0, b1] = breakpoints; const extent = d3.extent(data, function(d) { return d.taxRefund; }); const margin = {top: 10, right: 15, bottom: 36, left: 15} const refunds = data.sort((a,b) => b.taxRefund - a.taxRefund) const x = d3sB.scaleLinear() .domain(taxRefundDomains) .scope(taxRefundScope) .range([margin.left, width - margin.right]); const y = d3.scaleBand() .domain(refunds.map(d => d.profession)) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .attr('class', 'xAxis') .call(d3sB.axisBottom(x).tickArguments(width / 140).tickFormat(d3.format('$~s'))) .call(g => g.selectAll('text') .attr("y", 3) .attr("x", 9) .attr("dy", ".35em") .attr("transform", "rotate(70)") .style("text-anchor", "start")); const yAxis = g => g .attr("transform", `translate(${x(0)},0)`) .call(d3.axisLeft(y).tickSizeOuter(0).tickPadding(4)) .call(g => { // move negative labels const negs = g.selectAll(".tick") .filter((d, i) => data[i].taxRefund < 0) negs.select("line") .attr("x2", 6); negs.select("text") .attr("x", 9) .style("text-anchor", "start"); }); const svg = d3.select(DOM.svg(width, height)); // Defs & masks are used to draw dashed lines const defs = getDefs(svg); svg.append("g") .selectAll("rect") .data(splitRefundData(refunds, breakpoints)) .join("rect") .attr("class", d => { return `bar bar--${ d.taxRefund < 0 ? 'negative' : 'positive' } bar--${ d.isOutside ? 'outside' : 'inside' }`; }) .attr("x", d => x(Math.min(d.taxRefund, d.x))) .attr("y", d => y(d.profession)) .attr("width", d => Math.abs(x(d.taxRefund) - x(d.x))) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .style("font", "12px sans-serif") .selectAll("text") .data(refunds) .join("text") .attr("x", d => x(0) + (d.taxRefund < 0 ? -4 : 4)) .attr("y", d => y(d.profession) + y.bandwidth() / 2) .attr("text-anchor", d => d.taxRefund < 0 ? "end" : "start") .attr("dy", "0.35em") .text(d => d3.format('$~s')(d.taxRefund)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }36:[{"id":"8e34b49eec680ceffb220dd0a31153a7d85735a698f6c1f3b28e12df17529026ecb207dfed0dc8e31a38236da9df11add623924ecc800a659ba3ead716e877ad","href":"https://static.observableusercontent.com/files/8e34b49eec680ceffb220dd0a31153a7d85735a698f6c1f3b28e12df17529026ecb207dfed0dc8e31a38236da9df11add623924ecc800a659ba3ead716e877ad","name":"corruptopia-census-2020@1.csv","type":"text/csv","lastModified":1579672480084.751,"size":498}] 2f:{"id":"66bd43c7d52b952a","slug":"handling-skewed-data-with-d3-scale-break","title":"Introducing d3-scale-break for handling heavily skewed data","thumbnail":"1c329a3f245392879beb8c12a84867032d23ca9a803c0ba1d027e300a6a5feee","access_level":"public","create_time":"$D2020-01-22T02:04:22.736Z","update_time":"$D2020-01-30T00:42:48.280Z","view_time":null,"first_public_time":"$D2020-01-25T21:49:07.430Z","fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"2bb59736daf4140c","login":"lukewhyte","name":"Luke Whyte","avatar_url":"https://avatars-next.observableusercontent.com/688b5801d96123f4df339a833be4d2eace57f294f6db742160616c5c293c426d","tier":"starter_2024"},"version":801,"publish_version":801,"role":null,"authored":false,"authors":[{"type":"individual","id":"e46eb192f759a583","login":"lukewhyte","name":"Luke Whyte","avatar_url":"https://avatars-next.observableusercontent.com/688b5801d96123f4df339a833be4d2eace57f294f6db742160616c5c293c426d","tier":null}],"members":[{"type":"individual","id":"e46eb192f759a583","login":"lukewhyte","name":"Luke Whyte","avatar_url":"https://avatars-next.observableusercontent.com/688b5801d96123f4df339a833be4d2eace57f294f6db742160616c5c293c426d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Introducing d3-scale-break for handling heavily skewed data","cells":[{"id":0,"value":"md`# Introducing d3-scale-break for handling heavily skewed data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"md`Anyone that's worked in data visualization for long enough has at one time or another run up against this problem:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"md`### Median incomes in Corruptopia`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"md`It's hard to interpret median incomes in this chart because Corruptopia's inequality has skewed the data so dramatically.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"md`There are a variety of viable approaches to solving this problem, one of which is a scale break. For which I built [\\`\\`d3-scale-break\\`\\`](https://github.com/lukewhyte/d3-scale-break):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"md`### Median incomes in Corruptopia`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":196,"value":"md`D3 has no built in support for scale breaks and implementation can be complex. \\`\\`d3-scale-break\\`\\` simplifies this by interpolating an array of input domains (one for each scale) to a single range. It does this using the following pattern:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"html`\n

This:

\n d3.scaleLinear()\n .domain([0, 10000])\n .range(0, 100);\n

Becomes this:

\n d3sB.scaleLinear()\n .domain([ [0, 1000], [1000, 10000] ])\n .scope([ [0, 0.5], [0.5, 1] ])\n .range([0, 100]);\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"md`This gives us a great deal of flexibility. Per example, let's say we have the following dataset:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":331,"value":"linear = [1000, 500, 95, 50]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"md`And we break it into three scales:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":337,"value":"exampleScale = d3sB.scaleLinear().domain([ [0, 100], [100, 500], [500, 1000] ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"md`Add a simple range from zero to 150px:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"exampleScale.range([0, 150])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":343,"value":"html`\n

We can then set the scope so that:

0 to 100 takes up the first 50% of the range
100 to 50 take up the next 40%
And 500 to 1000 get just 10% of the range

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"exampleScale.scope([ [0, 0.5], [0.5, 0.9], [0.9, 1] ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"md`If we then apply this scale to the radius of circles for each data point we get:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":256,"value":"exampleGraphic = {\n const w = 350, h = 320;\n const svg = d3.select(DOM.svg(w, h));\n \n svg.append('g')\n .selectAll('line')\n .data(linear)\n .join(\"line\")\n .attr(\"x1\", 155)\n .attr(\"x2\", w)\n .attr(\"y1\", d => h - (exampleScale(d) * 2))\n .attr(\"y2\", d => h - (exampleScale(d) * 2))\n .attr('stroke', 'rgba(0,0,0,0.5)');\n \n svg.append(\"g\")\n .attr(\"fill\", \"rgba(0,0,0,0.8)\")\n .attr(\"text-anchor\", \"end\")\n .style(\"font\", \"12px sans-serif\")\n .selectAll(\"text\")\n .data(linear)\n .join(\"text\")\n .attr(\"x\", w)\n .attr(\"y\", d => (h - 8) - (exampleScale(d) * 2))\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n \n svg.append(\"g\")\n .selectAll(\"circle\")\n .data(linear)\n .join(\"circle\")\n .attr(\"cx\", 155)\n .attr(\"cy\", d => h - exampleScale(d))\n .attr(\"r\", d => exampleScale(d))\n .attr(\"fill\", \"teal\")\n .style('fill-opacity', 0.3)\n .attr(\"stroke\", \"teal\")\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":429,"value":"md`Going back to our original example, lets take advantage of the fact that \\`\\`d3-scale-break\\`\\` will honor gaps you enter in the scope or domains – eg: \\`\\`scope([ [0, 0.1], [0.5, 1] ])\\`\\` – and turn our orginal hard skewed bar chart into a readable dot chart:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":438,"value":"md`### Median incomes in Corruptopia`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":441,"value":"md`In simpler cases, these problems can be solved by parsing your dataset into two sets and then defining two corresponding domains, ranges and axes. Where \\`\\`d3-scale-break\\`\\` becomes a particularly useful is in cases involving complex charts with multiple scale breaks, particularly if the data is dynamic. Take the following one that depicts taxes and rebates issued by the Corruptopian government in the face of intense political pressure due to inequality.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":666,"value":"md`Let's assume we don't have access to the tax rebate data, but we know there will be positive and negative outliers around a central cluster. We could use a one dimensional clustering algorithm to identify those three natural clusters:` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":675,"value":"clusters = ss.ckmeans(data.map(d => d.taxRefund), 3);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":683,"value":"md`We then could loop over these arrays and parse out our domains from here. However, we could also use the \\`\\`d3sB\\`\\` helper function, \\`\\`.breakDomain\\`\\`, which accepts a dataset and an array of breakpoints and then returns scale subdomains:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":687,"value":"taxRefundDomains = d3sB.breakDomain(data.map(d => d.taxRefund), d3.extent(clusters[1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":693,"value":"md`If we wanted to, we could break up our scales to share the available range evenly (\\`\\`.scope([ [0,0.33], [0.33,0.66], [0.66,1] ]))\\`\\`, or we could pass our data and breakpoints to \\`\\`d3sB.breakScope\\`\\`, which will calculate the percentage of available space to use for each scale based on the number of datapoints in each cluster:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":697,"value":"taxRefundScope = d3sB.breakScope(data.map(d => d.taxRefund), d3.extent(clusters[1]));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":700,"value":"md`Then feed the scales to D3:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":447,"value":"md`### Corruptopia tax rebates, 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":451,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":601,"value":"md`I also used svg defs in the above example to create dashed lines on the outlier scales.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":731,"value":"md`There are a couple caveats with \\`\\`d3-scale-break\\`\\`, mainly surrounding the axis. You can't define you axis before you define your scale's domain. If you do, the axis won't know how many scales to generate. Similarly, \\`\\`axis.scale()\\`\\` can't be used to define the scale, you must do it on axis instantiation. Perhaps I'll refactor this in the future.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":739,"value":"md`For now, \\`\\`d3-scale-break\\`\\` only works with \\`\\`.scaleLinear\\`\\`. By design, it shouldn't be much work to add functionality for all the other continuous D3 scales, but I wanted to see if anyone uses this plugin before putting in more work.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":734,"value":"md`For more detail information and the full the API [check out the README](https://github.com/lukewhyte/d3-scale-break)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":768,"value":"md`~ Luke`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"splitRefundData = (data, [b0, b1]) => data.reduce((res, d) => {\n const { taxRefund, profession } = d;\n if (taxRefund >= b1) {\n res.push(\n { profession, taxRefund, x: b1, isOutside: true },\n { profession, taxRefund: b1, x: 0, isOutside: false },\n );\n } else if (taxRefund <= b0) {\n res.push(\n { profession, taxRefund, x: b0, isOutside: true },\n { profession, taxRefund: b0, x: 0, isOutside: false },\n );\n } else { \n res.push(\n { profession, taxRefund, x: 0, isOutside: false }\n ) \n }\n return res;\n}, []);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":534,"value":"getDefs = svg => {\n const defs = svg.append('defs')\n .append('pattern')\n .attr('id', 'pattern-stripe')\n .attr('patternUnits', 'userSpaceOnUse')\n .attr('width', 4)\n .attr('height', 4);\n\n defs.append('rect')\n .attr('width', 3)\n .attr('height', 4)\n .attr('transform', 'translate(0,0)')\n .attr('fill', 'white');\n\n defs.append('mask')\n .attr('id', 'mask-stripe')\n .append('rect')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', '100%')\n .attr('height', '100%')\n .attr('fill', 'url(#pattern-stripe)');\n return defs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"extent = d3.extent(data.map(d => d.medianIncome));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"data = d3.csvParse(await FileAttachment('corruptopia-census-2020@1.csv').text(), ({\n medianIncome,\n taxRefund,\n profession,\n}) => ({\n medianIncome: +medianIncome,\n taxRefund: +taxRefund,\n profession,\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"height = data.length * 25 + margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"margin = ({top: 36, right: 30, bottom: 10, left: 115})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"ss = require('simple-statistics')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"d3sB = require('d3-scale-break@0.1.11')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":475,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"