2e:null 2f:["$","title",null,{"children":"Dual axes are a great way to show correlation | Toph Tucker | Observable"}] 34:T5e6,# Dual axes are a great way to show correlation There’s [another dual-axis chart](https://twitter.com/stlouisfed/status/1617266021810724866) going around so there’s the usual [hubbub](https://geopoliticaleconomy.com/2023/01/23/china-military-spending-st-louis-fed-graph/) about how it’s terribly misleading. And it might be! Depending on what you’re looking at, it really might be. I have almost never used a dual-axis chart. But I think one criticism is unfair: that they exaggerate correlation. - “By adjusting one or the other range & or scale, they can show pretty much any correlation” ([source](https://twitter.com/f_dion/status/1529083053355712517)) - “dual-axis charts are particularly susceptible to showing spurious correlations. With two axes, trend lines can be exaggerated and manipulated” ([source](https://www.politifact.com/factchecks/2015/oct/01/jason-chaffetz/chart-shown-planned-parenthood-hearing-misleading-/)) - “the main reason I am skeptical of them is because for economic/financial time series dual axis charts risk discovering spurious correlation” ([source](http://lenkiefer.com/2020/01/07/double-trouble-hazard-of-dual-axis-charts/)) - “perfect example of correlation without causation and why #ggplot2 does not allow dual y axes” ([source](https://twitter.com/DinkoRekic/status/794345706005925890)) Many of these statements are true enough. But they feel mis-framed; they’re a problem with correlation itself, which I think dual axes show pretty well.35:T568,That’s why correlation doesn’t care what units each series is in. So yes, dual axes transform the series, and that transformation can lie. But it is the same kind of transformation that is already built into the Pearson correlation coefficient. Insofar as dual axes are bad, so is the Pearson correlation coefficient. Their merits and their badness go together. Dual axes are good at showing spurious correlation because they are good at showing correlation. My respect for dual axes grew when I [watched](https://tophtucker.medium.com/doing-enterprise-financial-data-visualization-after-data-journalism-3c68861b7f4c) how much so many well-informed finance professionals seem to love them; “maybe they are not being misled because they are not looking for what we think they’re looking for.” It’s hard for the eye to measure correlation across a million little steps up and down. But life is often dominated by a handful of extreme events. In comparing data, be it stocks or military expenditures, you’re partly looking for shocks, dislocations, changes in elasticities. When one thing has a bad shock, what has a good shock? Did two things used to move together, and then stop? That’s asking the eye to see what was happening on one line, and then _jump_ to what was happening on a different line. Dual axes can bring those lines closer together for an easier jump.36:Tb4c,Further reading: - [Why not to use two axes, and what to use instead](https://blog.datawrapper.de/dualaxis/), Lisa Charlotte Muth - [Dual-Scaled Axes in Graphs: Are They Ever the Best Solution?](http://www.perceptualedge.com/articles/visual_business_intelligence/dual-scaled_axes.pdf), Stephen Few - “Some problems: The are not invertible: given a point on the plot space, you can not uniquely map it back to a point in the data space. They are relatively hard to read correctly compared to other options. They are easily manipulated to mislead: there is no unique way to specify the relative scales of the axes, leaving them open to manipulation. They are arbitrary: why have only 2 scales, not 3, 4 or ten?” —[Hadley Wickham](https://stackoverflow.com/a/3101876/120290) - “My view: dual-axis line charts are unfairly maligned, and are usually a far more effective way of presenting data than any of the supposedly superior alternatives. As with all charts, the intellectual honesty of the data analysis & presentation matters far more than chart type.” —[@jburnmurdoch](https://twitter.com/jburnmurdoch/status/1529058902607904768) - “Joke: Dual axis charts exaggerate magnitude and cointegration. Woke: Dual axis charts privlege linear fits over other kinds of relationships.” —[@quantian1](https://twitter.com/quantian1/status/847529432676012034) - “I assume that dual axis charts are effective means to display a correlation. But their very effectiveness is the root of the problem…” —[@lenkiefer](https://twitter.com/lenkiefer/status/1529080879552815105) - Fil’s response to this notebook: “Stocks (and almost everything money) are fundamentally ratios, so any discussion of them should imo use a log scale. The ‘shift’ operation is not allowed in my book, not on linear scales, otherwise you’d have negative shares. ‘Shifting’ on the log scale is the same as ‘stretching’ the linear scale.” - How should data visualization professionals critique the charts of finance professionals or other outsiders to the formal study of charts? I make chart software for a living, but a chart I make is usually merely interesting, not load-bearing. Outsiders have skin in the game that may make their charts smarter than they look. See also [outsider art](https://en.wikipedia.org/wiki/Outsider_art). (And of course I’m the outsider to every other field touching a chart I make.) 37:[{"id":"8e34cd60e8c205e6b2b1927c92771c83f1771b80a7d8a96e3a9ca889973add546a7de155aad30894189368d0601e82aff1fc9402806810b0f1192469c532529a","href":"https://static.observableusercontent.com/files/8e34cd60e8c205e6b2b1927c92771c83f1771b80a7d8a96e3a9ca889973add546a7de155aad30894189368d0601e82aff1fc9402806810b0f1192469c532529a","name":"plot@1.umd.min.js","type":"application/javascript","lastModified":1674604262343.558,"size":146323},{"id":"8445d8a029726dfd2e88f87994328f622b8a9985e172931467f36fb12348a5e03daeab2dc16f810a448673ae2c55e8547b9f190f80b0b09b4b7f206a7e4c7b08","href":"https://static.observableusercontent.com/files/8445d8a029726dfd2e88f87994328f622b8a9985e172931467f36fb12348a5e03daeab2dc16f810a448673ae2c55e8547b9f190f80b0b09b4b7f206a7e4c7b08","name":"image.png","type":"image/png","lastModified":1674614616983.255,"size":294650},{"id":"2055f8ffdc462027cff640dd23ae485a5078d6e9b1fb3fe108d59bcad9fb311da017ec9983147416bc39b2b61cff31c7969f42267a683bb3a53a51e0ce3a2dc6","href":"https://static.observableusercontent.com/files/2055f8ffdc462027cff640dd23ae485a5078d6e9b1fb3fe108d59bcad9fb311da017ec9983147416bc39b2b61cff31c7969f42267a683bb3a53a51e0ce3a2dc6","name":"image@1.png","type":"image/png","lastModified":1674614622609.198,"size":245823}] 32:{"id":"a6bb7fdb33015a5d","slug":"dual-axes-are-a-great-way-to-show-correlation","title":"Dual axes are a great way to show correlation","thumbnail":"b0e485fb93c93caa71b95e544943e137bcd9f19c9fc40ffc01e446d7b3d25325","access_level":"public","create_time":"$D2023-01-24T23:51:02.343Z","update_time":"$D2026-02-21T22:43:49.426Z","view_time":null,"first_public_time":"$D2023-05-01T21:43:40.810Z","fork":true,"stars":18,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2024"},"version":460,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"ee48d2d87f751f74","slug":"sketches","title":"Sketches","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"title":"Dual axes are a great way to show correlation","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":365,"value":"I’ll start with the problem with dual axes. When you have a line chart with two series on dual axes, if you’re not paying attention, and assume they’re on one axis, it can look as if numbers are greater or less than they actually are. Like, if I’m plotting GOOG and AAPL stock prices, if I show GOOG on a second axis, it is like multiplying every GOOG price by some arbitrary number, and adding another arbitrary number, and showing that as the price of GOOG — a lie.\n\nIn other words, the chart on the left is honest and the one on the right is a total lie, but they look alike. They both stretch and shift: the one on the left by using dual axes, the one on the right by straight up changing some of the data. Fiddle with how much they stretch and shift below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"

\n ${Plot.plot({\n color: { legend: true },\n y: { domain },\n caption: \"Plotting on dual axes (honest but maybe confusing)\",\n marks: [\n Plot.frame({stroke: \"#ccc\"}),\n Plot.lineY(twoStocks, { x: \"Date\", y: \"Close\", stroke: \"Symbol\" }),\n Plot.axisY({ anchor: \"left\", color: \"#4e79a7\" }),\n Plot.axisY({\n anchor: \"right\",\n color: \"#f28e2c\",\n ticks: d3\n .ticks(...domain.map((d) => (d - b) / m - b), 10)\n .map((d) => d * m + b),\n tickFormat: (d) => (d - b) / m\n })\n ]\n })}\n ${Plot.plot({\n color: { legend: true },\n caption: \"Plotting on one axis as if GOOG were actually different (dishonest)\",\n marks: [\n Plot.frame({stroke: \"#ccc\"}),\n Plot.lineY(twoStocks, { x: \"Date\", y: \"Close\", stroke: \"Symbol\" })\n ]\n })}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"viewof m = Inputs.range([0.01, 2], {label: \"Stretch\", step: 0.01, value: 0.2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"viewof b = Inputs.range([-100, 100], {label: \"Shift\", step: 0.01, value: -20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"Dual axes mislead you about relative _levels_: as if one share of GOOG were more or less expensive than it is. And they mislead you about _crosses_: as if one share of GOOG “got more expensive than” one of AAPL at a different arbitrary time.\n\nBut stretching and shifting a series does not change its correlation with another. Drag the sliders and watch the equation:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":272,"value":"tex.block`corr((${aapl.map(d => d.Close).slice(0, 3).map(d => d.toFixed(0))}\\ldots), (${goog.map(d => d.Close).slice(0, 3).map(d => d.toFixed(0))}\\ldots)) = ${isNaN(corr) ? \"\\\\text{undefined}\" : corr.toFixed(2)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"The correlation doesn’t change! That’s because correlation normalizes each series by mean and standard deviation. It subtracts the mean from each point (${tex`x_{i}-{\\bar {x}}`}) and divides by the standard deviation (${tex`{\\sqrt {\\sum _{i=1}^{n}(x_{i}-{\\bar {x}})^{2}}}`}):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"tex.block`{\\displaystyle corr_{xy}={\\frac {\\sum _{i=1}^{n}(x_{i}-{\\bar {x}})(y_{i}-{\\bar {y}})}{{\\sqrt {\\sum _{i=1}^{n}(x_{i}-{\\bar {x}})^{2}}}{\\sqrt {\\sum _{i=1}^{n}(y_{i}-{\\bar {y}})^{2}}}}}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"What happens if we take the first point in the true GOOG series ($${goog0[0].Close.toFixed(0)}) and subtract the mean (${d3.mean(goog0, d => d.Close).toFixed(0)}) and divide by the standard deviation (${d3.deviation(goog0, d => d.Close).toFixed(0)})? ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"\\frac{${goog0[0].Close.toFixed(0)} - ${d3.mean(goog0, d => d.Close).toFixed(0)}}{${d3.deviation(goog0, d => d.Close).toFixed(0)}} = ${((goog0[0].Close - d3.mean(goog0, d => d.Close)) / d3.deviation(goog0, d => d.Close)).toFixed(1)}","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":334,"value":"And what if we do the same with the stretched and shifted series? No matter how we stretch and shift, it’ll always be the same:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":339,"value":"\\frac{${goog[0].Close.toFixed(0)} - ${d3.mean(goog, d => d.Close).toFixed(0)}}{${d3.deviation(goog, d => d.Close).toFixed(0)}} = ${((goog[0].Close - d3.mean(goog, d => d.Close)) / d3.deviation(goog, d => d.Close)).toFixed(1)}","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":406,"value":"[These charts](https://www.businessinsider.com/charts-what-happened-during-flash-crash-2010-10) of the 2010 flash crash seem like reasonable uses of dual axes. They could be faceted, sure, but they’re clear and compact as-is. And faceting gets trickier with more lines where you wanna juxtapose any one with any other.\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"corr = stat.sampleCorrelation(aapl.map(d => d.Close), goog.map(d => d.Close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"aapl = stocks.filter(d => d.Symbol === \"AAPL\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"goog0 = stocks.filter(d => d.Symbol === \"GOOG\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"goog = goog0.map(d => ({...d, Close: d.Close * m + b}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"twoStocks = [...aapl, ...goog]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"domain = d3.extent(twoStocks, d => d.Close)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"stat = require(\"simple-statistics\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"import {stocks} from \"@observablehq/plot-line\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"