31:T425,Plot.plot({ style: {fontSize: "14px", fontFamily: "'Open Sans', sans-serif"}, marginLeft: 150, x: {grid: true, domain: [0,50], label: "%", labelOffset: 50, tickSize: 0}, y: {label: null, tickSize: 0}, color: {legend: true, domain: ["21-25 April 2021", "3-13 February 2022"], range: ["#27A0CC", "#206095"], style: {fontSize: "14px", fontFamily: "'Open Sans', sans-serif"}}, marks: [ Plot.ruleY(data, Plot.groupY({x1: "min", x2: "max"}, {x: "percent", y: "shortened", stroke: "#dddddd", strokeWidth: 2.5})), Plot.dot(data, {x: "percent", y: "shortened", r: 5, fill: "date", title: (d) => `${d.shortened} \n ${d.date}\n ${d.percent}%`, sort: {y: "x", reverse: true}}) ], caption: html`

Source: Office for National Statistics – Opinions and Lifestyle Survey

`, tooltip: {opacity: 0.7} })32:T4d9,{ const tidy_data = tidy( data, pivotWider({ namesFrom: 'date', valuesFrom: 'percent' }), mutate({ change: d => d['3-13 February 2022'] - d['21-25 April 2021'] }) ) const plot = Plot.plot({ style: {fontSize: "14px", fontFamily: "'Open Sans', sans-serif"}, marginLeft: 150, x: {grid: true, domain: [0,50], label: "%", labelOffset: 50, tickSize: 0}, y: {label: null, domain: d3.sort(tidy_data, d => -d["3-13 February 2022"]).map(d => d.shortened), tickSize: 0}, marks: [ Plot.arrow(tidy_data, {x1: d => d["21-25 April 2021"], x2: d => d["3-13 February 2022"], y: "shortened", stroke: (d) => d.change > 0 ? "#206095" : "#F66068", strokeWidth: 2, title: (d) => `${d.shortened} \n ${d.change}%`}), //Plot.dot(tidy_data, {x: "21-25 April 2021", y: "shortened", r: 3.5, fill: d => d.change > 0 ? "#206095" : "#F66068"}) ], caption: html`

Source: Office for National Statistics – Opinions and Lifestyle Survey

`, tooltip: {opacity: 0.7} }) return plot }33:T4d9,{ const tidy_data = tidy( data, pivotWider({ namesFrom: 'date', valuesFrom: 'percent' }), mutate({ change: d => d['3-13 February 2022'] - d['21-25 April 2021'] }) ) const plot = Plot.plot({ style: {fontSize: "14px", fontFamily: "'Open Sans', sans-serif"}, marginLeft: 150, x: {grid: true, domain: [0,50], label: "%", labelOffset: 50, tickSize: 0}, y: {label: null, domain: d3.sort(tidy_data, d => -d["3-13 February 2022"]).map(d => d.shortened), tickSize: 0}, marks: [ Plot.link(tidy_data, {x1: "3-13 February 2022", y1: "shortened", x2: "21-25 April 2021", y2: "shortened", stroke: d => d.change > 0 ? "#206095" : "#F66068" , strokeWidth: 1.5}), Plot.dot(tidy_data, {x: "3-13 February 2022", y: "shortened", r: 5, fill: d => d.change > 0 ? "#206095" : "#F66068", title: (d) => `${d.shortened} \n ${d.change}%`}) ], caption: html`

Source: Office for National Statistics – Opinions and Lifestyle Survey

`, tooltip: {opacity: 0.7} }) return plot }34:T5f2,data = [ { date: '21-25 April 2021', response: 'I will work all my hours from my usual place of work', shortened: "Office", percent: 11}, { date: '21-25 April 2021', response: 'I will mostly work from my usual place of work and sometimes from home', shortened: "Mostly office", percent: 25}, { date: '21-25 April 2021', response: 'I will split my time evenly between my usual place of work and home', shortened: "Both evenly", percent: 27}, { date: '21-25 April 2021', response: 'I will mostly work from home and sometimes my usual place of work', shortened: "Mostly home", percent: 30}, { date: '21-25 April 2021', response: 'I will continue to work from home and not return to my usual place of work', shortened: "Just work from home", percent: 4}, { date: '3-13 February 2022', response: 'I will work all my hours from my usual place of work', shortened: "Office", percent: 8}, { date: '3-13 February 2022', response: 'I will mostly work from my usual place of work and sometimes from home', shortened: "Mostly office", percent: 18}, { date: '3-13 February 2022', response: 'I will split my time evenly between my usual place of work and home', shortened: "Both evenly", percent: 24}, { date: '3-13 February 2022', response: 'I will mostly work from home and sometimes my usual place of work', shortened: "Mostly home", percent: 42}, { date: '3-13 February 2022', response: 'I will continue to work from home and not return to my usual place of work', shortened: "Just work from home", percent: 6} ]35:[{"id":"4b7a982a0519c8283dc8fba3043d2b6f9c4d6cc1045f2c63b28b5337a4ecb75085c684a974d39849fdb5c3d28faea124c3984806745377b4c408c11c669a7a90","href":"https://static.observableusercontent.com/files/4b7a982a0519c8283dc8fba3043d2b6f9c4d6cc1045f2c63b28b5337a4ecb75085c684a974d39849fdb5c3d28faea124c3984806745377b4c408c11c669a7a90","name":"ONS.png","type":"image/png","lastModified":1653380955071.163,"size":60588},{"id":"18663f35c57ef39b9d1f785356af58c4d8bce3092e57029db184bf367af2e9323f2d424f83409e1e69024cccb1965234e14b03d0dae27e0fd1593c05382c62ff","href":"https://static.observableusercontent.com/files/18663f35c57ef39b9d1f785356af58c4d8bce3092e57029db184bf367af2e9323f2d424f83409e1e69024cccb1965234e14b03d0dae27e0fd1593c05382c62ff","name":"FT.png","type":"image/png","lastModified":1653381010237.232,"size":41301}] 2f:{"title":"Grid lines on dot plots","cells":[{"id":0,"value":"# Grid lines on dot plots","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"

The Office for National Statistics recently published an article on hybrid working which included a couple of connected dot plots. The Financial Times reported on the analysis and redrew one of the dot plots using horizontal rather than vertical grid lines. The FT made several other design choices such as dropping the connecting lines and arrows, shortening the series names, ordering by the latest period and increasing the height of the plot.

\n\n

Here we explore whether vertical or horizontal grid lines improve readability on a dot plot. Perhaps we need both or adopt a variant of the dot plot like the arrow or comet plot?

","pinned":false,"hidden":false,"mode":"html"},{"id":46,"value":"\n\n

\"Snow\" — Source: Office for National Statistics, 23 May 2022

","pinned":false,"hidden":false,"mode":"html"},{"id":127,"value":"### Vertical grid lines","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"Plot.plot({\n style: {fontSize: \"14px\", fontFamily: \"'Open Sans', sans-serif\"},\n marginLeft: 150,\n x: {grid: true, domain: [0,50], label: \"%\", labelOffset: 50, tickSize: 0},\n y: {label: null, tickSize: 0},\n color: {legend: true, domain: [\"21-25 April 2021\", \"3-13 February 2022\"], range: [\"#27A0CC\", \"#206095\"], style: {fontSize: \"14px\", fontFamily: \"'Open Sans', sans-serif\"}},\n marks: [\n Plot.dot(data, {x: \"percent\", y: \"shortened\", r: 5, fill: \"date\", title: (d) => `${d.shortened} \\n ${d.date}\\n ${d.percent}%`, sort: {y: \"x\", reverse: true}})\n ],\n caption: html`

Source: Office for National Statistics – Opinions and Lifestyle Survey

`, tooltip: {opacity: 0.7}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"---\n### Horizontal grid lines","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"Plot.plot({\n style: {fontSize: \"14px\", fontFamily: \"'Open Sans', sans-serif\"},\n marginLeft: 150,\n x: {domain: [0,50], label: \"%\", labelOffset: 50},\n y: {grid: true, label: null, tickSize: 0},\n color: {legend: true, domain: [\"21-25 April 2021\", \"3-13 February 2022\"], range: [\"#27A0CC\", \"#206095\"], style: {fontSize: \"14px\", fontFamily: \"'Open Sans', sans-serif\"}},\n marks: [\n Plot.dot(data, {x: \"percent\", y: \"shortened\", r: 5, fill: \"date\", title: (d) => `${d.shortened} \\n ${d.date}\\n ${d.percent}%`, sort: {y: \"x\", reverse: true}})\n ],\n caption: html`

Source: Office for National Statistics – Opinions and Lifestyle Survey

`, tooltip: {opacity: 0.7}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"---\n### Vertical and horizontal grid lines","pinned":false,"hidden":false,"mode":"md"},{"id":140,"value":"Plot.plot({\n style: {fontSize: \"14px\", fontFamily: \"'Open Sans', sans-serif\"},\n marginLeft: 150,\n grid: true, \n x: {domain: [0,50], label: \"%\", labelOffset: 50, tickSize: 0},\n y: {label: null, tickSize: 0},\n color: {legend: true, domain: [\"21-25 April 2021\", \"3-13 February 2022\"], range: [\"#27A0CC\", \"#206095\"], style: {fontSize: \"14px\", fontFamily: \"'Open Sans', sans-serif\"}},\n marks: [\n Plot.dot(data, {x: \"percent\", y: \"shortened\", r: 5, fill: \"date\", title: (d) => `${d.shortened} \\n ${d.date}\\n ${d.percent}%`, sort: {y: \"x\", reverse: true}})\n ],\n caption: html`

Source: Office for National Statistics – Opinions and Lifestyle Survey

`, tooltip: {opacity: 0.7}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"---\n### No grid lines","pinned":false,"hidden":false,"mode":"md"},{"id":315,"value":"Plot.plot({\n style: {fontSize: \"14px\", fontFamily: \"'Open Sans', sans-serif\"},\n marginLeft: 150,\n grid: false, \n x: {domain: [0,50], label: \"%\", labelOffset: 50, tickSize: 0},\n y: {label: null, tickSize: 0},\n color: {legend: true, domain: [\"21-25 April 2021\", \"3-13 February 2022\"], range: [\"#27A0CC\", \"#206095\"], style: {fontSize: \"14px\", fontFamily: \"'Open Sans', sans-serif\"}},\n marks: [\n Plot.dot(data, {x: \"percent\", y: \"shortened\", r: 5, fill: \"date\", title: (d) => `${d.shortened} \\n ${d.date}\\n ${d.percent}%`, sort: {y: \"x\", reverse: true}})\n ],\n caption: html`

Source: Office for National Statistics – Opinions and Lifestyle Survey

`, tooltip: {opacity: 0.7}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"---\n### Connected dot plot","pinned":false,"hidden":false,"mode":"md"},{"id":418,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"---\n### Arrow plot\nThere was a sharp ${textcolor(\"increase\", {background: '#206095', color: '#FFFFFF'})} between April 2021 and February 2022 in the percentage of workers planning to be based mostly away from the office.","pinned":false,"hidden":false,"mode":"md"},{"id":402,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"---\n### Comet plot\nThere was a sharp ${textcolor(\"increase\", {background: '#206095', color: '#FFFFFF'})} between April 2021 and February 2022 in the percentage of workers planning to be based mostly away from the office.","pinned":false,"hidden":false,"mode":"md"},{"id":241,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"import {tidy, mutate, pivotWider} from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}