2d:null 2e:["$","title",null,{"children":"State of London Plot Charts | Joe Heywood | Observable"}] 33:T913,function generate_sol_line_chart(data, { x_axis_type = "date", // Should either be date or character [Could make distinction here between Financial/Academic/Calendar year?] highlight = false, // Highlight, rather than regular colours sol_domain = null, // set domain tickfmt = ".0f", // tick format for the y axis null_is_nan = true, // annoying parameter. Sets 'null' to 'NaN' to allow for breaks in lines. sol_marker = "none", // options include dot, circle, circle-stroke ins_left = 80, ins_right = 20 } = {}) { let x_type = "utc" let grid_x = Plot.gridX({...ldnTheme.defaultGridX, interval: '1 year' }) if(x_axis_type === "character") { console.log("character") x_type = "point" grid_x = Plot.gridX({...ldnTheme.defaultGridX }) } // We shouldn't need this bit. It's to avoid the line showing zero (which is what happens) // if the value is null, rather than NaN. Could run it as default? if(null_is_nan) { data.forEach((d) => { console.log(`Y: ${d.y} ${d.y == null}`) if(d.y == null) { d.y = NaN } }) } let reg_cols = [ currentTheme.color.data.primary, currentTheme.color.data.secondary, currentTheme.color.data.tertiary ] let high_cols = [currentTheme.color.data.primary, currentTheme.color.data.neutral[0] ] let cols = (highlight ? high_cols : reg_cols) return Plot.plot({ style: {...ldnTheme.defaultStyle}, ...ldnTheme.defaultSize, color: { ...ldnTheme.defaultColor, legend: true, type: 'ordinal', range: cols }, x: { insetLeft: ins_left, insetRight: ins_right, type: x_type }, // date specific y: { domain:sol_domain}, marks: [ Plot.gridY({...ldnTheme.defaultGridY}), Plot.axisY({...ldnTheme.defaultYAxis, label: '', tickFormat: d3.format(tickfmt) }), //Plot.gridX({...ldnTheme.defaultGridX, interval: '1 year' }), // This bit is date specific grid_x, Plot.lineY(data, { x: d => (x_axis_type == "date" ? new Date(d.xd) : d.xd), // for date y: d => +d.y, z: "b", stroke: "b", strokeWidth: 5, marker: sol_marker, tip: true }), Plot.tip(data, Plot.pointer({ ...ldnTheme.defaultTip, x: (d) => d.xd, y: "y", z:"b" })) ] }) }34:T405,function generate_sol_bar_chart(data, { highlight = false, sol_domain = null, tickfmt = ".0f" } = {}) { let reg_cols = [ currentTheme.color.data.primary, currentTheme.color.data.secondary, currentTheme.color.data.tertiary ] let high_cols = [currentTheme.color.data.primary, currentTheme.color.data.neutral[0] ] let cols = (highlight ? high_cols : reg_cols) return Plot.plot({ style: {...ldnTheme.defaultStyle}, ...ldnTheme.defaultSize, x: {label: null}, //color: {scheme: "spectral", legend: true}, color: { ...ldnTheme.defaultColor, legend: true, range: cols }, y: {grid: true, domain:sol_domain}, marks: [ //Plot.gridY({...ldnTheme.defaultGridY}), Plot.axisY({...ldnTheme.defaultYAxis, tickFormat: d3.format(tickfmt), grid: true}), Plot.barY(data, { x: "xd", // Explicit conversion y: "y", fill: "b" }) ] }) }35:T8e3,function generate_obesity() { let leg = html`

${[ { label: "London (Year 6)", color: "#0077bb", dash: "none" }, { label: "London (Reception)", color: "#0077bb", dash: "4,3" }, { label: "England (Year 6)", color: "#888888", dash: "none" }, { label: "England (Reception)", color: "#888888", dash: "4,3" } ].map(item => html`

${item.label}

`)}

` const sol_domain = [0,50] const highlight = true const tickfmt = ".0f" let dots = tidy(obs.filter(d => d.text === "dotted")) let solid = tidy(obs.filter(d => d.text === "solid")) let cols = [currentTheme.color.data.primary, currentTheme.color.data.neutral[0] ] const chart = Plot.plot({ style: {...ldnTheme.defaultStyle}, ...ldnTheme.defaultSize, color: { ...ldnTheme.defaultColor, legend: false, //true, domain: ["England dotted", "England solid", "London solid", "London dotted"], type: 'ordinal', range: cols }, x: { insetLeft: 80, insetRight: 20, type: 'utc' }, //domain: [0, 100] y: { domain:sol_domain}, marks: [ Plot.gridY({...ldnTheme.defaultGridY}), Plot.axisY({...ldnTheme.defaultYAxis, label: '', tickFormat: d3.format(tickfmt) }), Plot.gridX({...ldnTheme.defaultGridX, interval: '1 year' }), Plot.lineY(solid, { x: d => new Date(d.xd), // Explicit conversion y: d => +d.y, z: "b", //stroke: "b", stroke: d => `${d.b} ${d.text}`, strokeWidth: 5, tip: true }), Plot.lineY(dots, { x: d => new Date(d.xd), // Explicit conversion y: d => +d.y, z: "b", stroke: d => `${d.b} ${d.text}`, strokeWidth: 5, strokeDasharray: "5,20" //tip: true }), Plot.tip(solid, Plot.pointer({ ...ldnTheme.defaultTip, x: (d) => d.xd, y: "y", z:"b" })) ] }) return html`

${leg}${chart}

`; } 36:[{"id":"53f3ee2118e041020e769505bb397d5ad9049c793655f43e2e6d8005c892164134f9700967dee0cf9748714314e2e833d3df01185ce4806d1998e83146def0dd","href":"https://static.observableusercontent.com/files/53f3ee2118e041020e769505bb397d5ad9049c793655f43e2e6d8005c892164134f9700967dee0cf9748714314e2e833d3df01185ce4806d1998e83146def0dd","name":"sol_dash_txt.db","type":"application/x-sqlite3","lastModified":1770110690692.235,"size":659456}] 31:{"id":"80fe4b3299c0657a","slug":"state-of-london-plot-charts","title":"State of London Plot Charts","thumbnail":"4ac26c490f4cd90f8d97b3830db9c3f14b8491d84c1d82657515da4c30b09ead","access_level":"public","create_time":"$D2026-02-03T09:23:54.639Z","update_time":"$D2026-02-03T15:29:55.774Z","view_time":null,"first_public_time":"$D2026-02-03T10:35:22.441Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f25282bfd4a326d0","login":"joe-heywood-gla","name":"Joe Heywood","avatar_url":"https://avatars-next.observableusercontent.com/d8e8bba152da45ecac5e1785107e071eb5be2ae62270694947b94bb20425e9ba","tier":"starter_2024"},"version":85,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"35e2d1d04de9ff36","login":"joe-heywood-gla","name":"Joe Heywood","avatar_url":"https://avatars-next.observableusercontent.com/d8e8bba152da45ecac5e1785107e071eb5be2ae62270694947b94bb20425e9ba","tier":null}],"members":[{"type":"individual","id":"35e2d1d04de9ff36","login":"joe-heywood-gla","name":"Joe Heywood","avatar_url":"https://avatars-next.observableusercontent.com/d8e8bba152da45ecac5e1785107e071eb5be2ae62270694947b94bb20425e9ba","tier":null,"role":"editor"},{"type":"team","id":"f25282bfd4a326d0","login":"joe-heywood-gla","name":"Joe Heywood","avatar_url":"https://avatars-next.observableusercontent.com/d8e8bba152da45ecac5e1785107e071eb5be2ae62270694947b94bb20425e9ba","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"State of London Plot Charts","cells":[{"id":0,"value":"# State of London Plot Charts\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"## Main functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"See [this notebook (Social Justice chapter charts)](https://observablehq.com/@joe-heywood-gla/social-justice-state-of-london) as an example.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"## Some examples\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"eth_gap_data = get_data_for_chart(\"pay_gap_ethnicity\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"generate_sol_line_chart(eth_gap_data, {sol_domain:[0,.36], tickfmt: \".0%\", highlight: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"bills_data = get_data_for_chart(\"bills_arrears\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"generate_sol_line_chart(bills_data, {x_axis_type: \"character\", highlight: true, sol_domain: [0,.13], tickfmt: \".0%\", sol_marker: \"dot\", ins_left: 0, ins_right: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"## More complicated example\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof notebookTheme = Inputs.select([\"light\", \"dark\"], {value:\"light\", label: \"Notebook default:\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"## Database","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"db = FileAttachment(\"sol_dash_txt.db\").sqlite()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"function get_data_for_chart(dtst) {\n return db.query(`SELECT * FROM chart_data WHERE dataset = '${dtst}'`)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"import {getCurrentTheme, getDefaultPlotStyles, darkDefaults, lightDefaults, fontStack, ldnVizUtils} from \"@ldn/viz-tools-imports\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"currentTheme = getCurrentTheme(notebookTheme)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"ldnTheme = getDefaultPlotStyles(notebookTheme);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"obs = get_data_for_chart(\"yr6_obesity\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"import {tidy, filter} from \"@pbeshai/tidyjs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"