30:T6a0,{ const indicator = [...new Set(data.map(d => d.indicator))][0] const decile = data.filter(d => d.area_name === area)[0].deprivation const selected = benchmark === "Deprivation group" ? data.filter(d => d.indicator === indicator && d.deprivation === decile): data.filter(d => d.indicator === indicator) const jitter = Array.from({length: selected.length}, d3.randomUniform(0,1)) const plot = addTooltips( Plot.plot({ height: 50, marginTop: 0, marginLeft: 0, style: { fontSize: "13px", paddingTop: 10, overflow: "visible" }, caption: html`${indicator}`, x: { tickSize: 0, tickPadding: 10, label: null }, y: { ticks: 0, label: null }, marks: [ Plot.barX([{x1: d3.min(selected.map(d => d.value)), x2: d3.max(selected.map(d => d.value))}], {x1: "x1", x2: "x2", fill: "#deebf7", fillOpacity: 0.5}), Plot.dot(selected.filter((d) => !d.area_name.includes(area)), { r: 5, x: "value", y: jitter, fill: "#9ecae1", fillOpacity: 0.5, title: (d) => `${d.area_name}: ${d3.format(",.1f")(d.value)}` }), Plot.ruleX([d3.median(selected.map(d => d.value))], {stroke: "red", strokeWidth: 1.5}), Plot.dot(selected.filter(d => d.area_name === area), { r: 5, x: "value", fill: "#2171b5", fillOpacity: 1, title: (d) => `${d.area_name}: ${d3.format(",.1f")(d.value)}` }) ] }), { opacity: 1, stroke: "#000000", "stroke-width": "2px" } ) return plot }31:T6a0,{ const indicator = [...new Set(data.map(d => d.indicator))][1] const decile = data.filter(d => d.area_name === area)[0].deprivation const selected = benchmark === "Deprivation group" ? data.filter(d => d.indicator === indicator && d.deprivation === decile): data.filter(d => d.indicator === indicator) const jitter = Array.from({length: selected.length}, d3.randomUniform(0,1)) const plot = addTooltips( Plot.plot({ height: 50, marginTop: 0, marginLeft: 0, style: { fontSize: "13px", paddingTop: 10, overflow: "visible" }, caption: html`${indicator}`, x: { tickSize: 0, tickPadding: 10, label: null }, y: { ticks: 0, label: null }, marks: [ Plot.barX([{x1: d3.min(selected.map(d => d.value)), x2: d3.max(selected.map(d => d.value))}], {x1: "x1", x2: "x2", fill: "#deebf7", fillOpacity: 0.5}), Plot.dot(selected.filter((d) => !d.area_name.includes(area)), { r: 5, x: "value", y: jitter, fill: "#9ecae1", fillOpacity: 0.5, title: (d) => `${d.area_name}: ${d3.format(",.1f")(d.value)}` }), Plot.ruleX([d3.median(selected.map(d => d.value))], {stroke: "red", strokeWidth: 1.5}), Plot.dot(selected.filter(d => d.area_name === area), { r: 5, x: "value", fill: "#2171b5", fillOpacity: 1, title: (d) => `${d.area_name}: ${d3.format(",.1f")(d.value)}` }) ] }), { opacity: 1, stroke: "#000000", "stroke-width": "2px" } ) return plot }32:T6a0,{ const indicator = [...new Set(data.map(d => d.indicator))][2] const decile = data.filter(d => d.area_name === area)[0].deprivation const selected = benchmark === "Deprivation group" ? data.filter(d => d.indicator === indicator && d.deprivation === decile): data.filter(d => d.indicator === indicator) const jitter = Array.from({length: selected.length}, d3.randomUniform(0,1)) const plot = addTooltips( Plot.plot({ height: 50, marginTop: 0, marginLeft: 0, style: { fontSize: "13px", paddingTop: 10, overflow: "visible" }, caption: html`${indicator}`, x: { tickSize: 0, tickPadding: 10, label: null }, y: { ticks: 0, label: null }, marks: [ Plot.barX([{x1: d3.min(selected.map(d => d.value)), x2: d3.max(selected.map(d => d.value))}], {x1: "x1", x2: "x2", fill: "#deebf7", fillOpacity: 0.5}), Plot.dot(selected.filter((d) => !d.area_name.includes(area)), { r: 5, x: "value", y: jitter, fill: "#9ecae1", fillOpacity: 0.5, title: (d) => `${d.area_name}: ${d3.format(",.1f")(d.value)}` }), Plot.ruleX([d3.median(selected.map(d => d.value))], {stroke: "red", strokeWidth: 1.5}), Plot.dot(selected.filter(d => d.area_name === area), { r: 5, x: "value", fill: "#2171b5", fillOpacity: 1, title: (d) => `${d.area_name}: ${d3.format(",.1f")(d.value)}` }) ] }), { opacity: 1, stroke: "#000000", "stroke-width": "2px" } ) return plot }33:T6a0,{ const indicator = [...new Set(data.map(d => d.indicator))][3] const decile = data.filter(d => d.area_name === area)[0].deprivation const selected = benchmark === "Deprivation group" ? data.filter(d => d.indicator === indicator && d.deprivation === decile): data.filter(d => d.indicator === indicator) const jitter = Array.from({length: selected.length}, d3.randomUniform(0,1)) const plot = addTooltips( Plot.plot({ height: 50, marginTop: 0, marginLeft: 0, style: { fontSize: "13px", paddingTop: 10, overflow: "visible" }, caption: html`${indicator}`, x: { tickSize: 0, tickPadding: 10, label: null }, y: { ticks: 0, label: null }, marks: [ Plot.barX([{x1: d3.min(selected.map(d => d.value)), x2: d3.max(selected.map(d => d.value))}], {x1: "x1", x2: "x2", fill: "#deebf7", fillOpacity: 0.5}), Plot.dot(selected.filter((d) => !d.area_name.includes(area)), { r: 5, x: "value", y: jitter, fill: "#9ecae1", fillOpacity: 0.5, title: (d) => `${d.area_name}: ${d3.format(",.1f")(d.value)}` }), Plot.ruleX([d3.median(selected.map(d => d.value))], {stroke: "red", strokeWidth: 1.5}), Plot.dot(selected.filter(d => d.area_name === area), { r: 5, x: "value", fill: "#2171b5", fillOpacity: 1, title: (d) => `${d.area_name}: ${d3.format(",.1f")(d.value)}` }) ] }), { opacity: 1, stroke: "#000000", "stroke-width": "2px" } ) return plot }34:T6a0,{ const indicator = [...new Set(data.map(d => d.indicator))][4] const decile = data.filter(d => d.area_name === area)[0].deprivation const selected = benchmark === "Deprivation group" ? data.filter(d => d.indicator === indicator && d.deprivation === decile): data.filter(d => d.indicator === indicator) const jitter = Array.from({length: selected.length}, d3.randomUniform(0,1)) const plot = addTooltips( Plot.plot({ height: 50, marginTop: 0, marginLeft: 0, style: { fontSize: "13px", paddingTop: 10, overflow: "visible" }, caption: html`${indicator}`, x: { tickSize: 0, tickPadding: 10, label: null }, y: { ticks: 0, label: null }, marks: [ Plot.barX([{x1: d3.min(selected.map(d => d.value)), x2: d3.max(selected.map(d => d.value))}], {x1: "x1", x2: "x2", fill: "#deebf7", fillOpacity: 0.5}), Plot.dot(selected.filter((d) => !d.area_name.includes(area)), { r: 5, x: "value", y: jitter, fill: "#9ecae1", fillOpacity: 0.5, title: (d) => `${d.area_name}: ${d3.format(",.1f")(d.value)}` }), Plot.ruleX([d3.median(selected.map(d => d.value))], {stroke: "red", strokeWidth: 1.5}), Plot.dot(selected.filter(d => d.area_name === area), { r: 5, x: "value", fill: "#2171b5", fillOpacity: 1, title: (d) => `${d.area_name}: ${d3.format(",.1f")(d.value)}` }) ] }), { opacity: 1, stroke: "#000000", "stroke-width": "2px" } ) return plot }35:[{"id":"cd7500c98a1f84a35980db72c53d65e110b994f65d29abf26e5a56597fd62c11f0a0a7cef5711f21138537966f1ee68203e7ba20c1c0631dcf2639bee3e3a5db","href":"https://static.observableusercontent.com/files/cd7500c98a1f84a35980db72c53d65e110b994f65d29abf26e5a56597fd62c11f0a0a7cef5711f21138537966f1ee68203e7ba20c1c0631dcf2639bee3e3a5db","name":"phe_indicators.csv","type":"text/csv","lastModified":1632312713346.344,"size":124045}] 2e:{"title":"Jittering","cells":[{"id":0,"value":"# Jittering\nExplore some indicators from [Public Health England](https://fingertips.phe.org.uk) for your local authority and benchmark it against other areas in its [deprivation group](https://www.gov.uk/government/statistics/english-indices-of-deprivation-2019).","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"viewof area = Inputs.select(data.map(d => d.area_name), {sort: true, unique: true, label: \"Choose a local authority\", value: \"Blackpool\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"viewof benchmark = Inputs.radio([\"All local authorities\", \"Deprivation group\"], {label: \"Benchmark against\", value: \"All local authorities\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"import {Plot, d3} from \"@observablehq/plot\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = d3.csvParse(await FileAttachment(\"phe_indicators.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}