2c:null 2d:["$","title",null,{"children":"Bar charts with an ordinal dimension | ee2dev | Observable"}] 32:[] 30:{"id":"6ba4a8c226a1e4c5","slug":"bar-charts-with-an-ordinal-dimension","title":"Bar charts with an ordinal dimension","thumbnail":"6809729b3421a6b379b055c7ba8e8a8f68d8a746753f6346fbb55bf278616e76","access_level":"public","create_time":"$D2022-04-16T22:11:37.911Z","update_time":"$D2022-06-14T07:39:54.397Z","view_time":null,"first_public_time":"$D2022-04-17T23:43:28.017Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"e6e1e2a0da500bb6","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":"starter_2024"},"version":301,"publish_version":301,"role":null,"authored":false,"authors":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null}],"members":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bar charts with an ordinal dimension","cells":[{"id":0,"value":"# Bar charts with an ordinal dimension\n\nA copy of the Plot examples (sometimes slightly adjusted) provided for the [d3 charts](https://observablehq.com/@d3/charts) to have them in one place.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"heading(\"Bar chart - vertical\", 1, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"Plot.plot({\n y: { tickFormat: \"%\" },\n marks: [\n Plot.barY(alphabet, {\n x: \"letter\",\n y: \"frequency\",\n fill: \"steelblue\",\n sort: { x: \"y\", reverse: true }\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"heading(\"Bar chart - horizontal\", 2, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"Plot.plot({\n x: { tickFormat: \"%\" },\n marks: [\n Plot.barX(alphabet, {\n y: \"letter\",\n x: \"frequency\",\n fill: \"steelblue\",\n sort: { y: \"x\", reverse: true }\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"heading(\"Diverging bar chart with absolute values\", 3, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"Plot.plot({\n marginLeft: 100,\n marginRight: 50,\n width,\n x: {\n tickFormat: \"+,d\",\n grid: true,\n axis: \"top\"\n },\n y: {},\n color: {\n range: [d3.schemeRdBu[3][2], d3.schemeRdBu[3][0]]\n },\n marks: [\n Plot.barX(states, {\n x: (d) => d[2019] - d[2010],\n y: \"State\",\n fill: (d) => d[2019] < d[2010],\n sort: { y: \"x\", reverse: \"true\" }\n }),\n Plot.ruleX([0]),\n Plot.text(states, {\n x: (d) => d[2019] - d[2010],\n y: \"State\",\n sort: { y: \"x\" },\n text: (d) => d[2019] - d[2010],\n textAnchor: \"start\",\n dx: 4,\n stroke: \"white\",\n fill: \"black\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"heading(\"Diverging bar chart with relative values\", 4, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Plot.plot({\n marginLeft: 100,\n marginRight: 50,\n width,\n x: {\n tickFormat: \"+%\",\n grid: true,\n axis: \"top\"\n },\n y: {},\n color: {\n range: [d3.schemeRdBu[3][2], d3.schemeRdBu[3][0]]\n },\n marks: [\n Plot.barX(states, {\n x: (d) => d[2019] / d[2010] - 1,\n y: \"State\",\n fill: (d) => d[2019] < d[2010],\n sort: { y: \"x\", reverse: \"true\" }\n }),\n Plot.ruleX([0]),\n Plot.text(states, {\n x: (d) => d[2019] / d[2010] - 1,\n y: \"State\",\n sort: { y: \"x\" },\n text: (d) => d3.format(\"+.1%\")(d[2019] / d[2010] - 1),\n textAnchor: \"start\",\n dx: 4,\n stroke: \"white\",\n fill: \"black\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"heading(\"Grouped bar chart\", 5, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"Plot.plot({\n x: { axis: null, domain: ages },\n y: { tickFormat: \"s\" },\n color: { scheme: \"spectral\", domain: ages, legend: true },\n facet: { data: stateages, x: \"state\" },\n marks: [\n Plot.barY(stateages, {\n x: \"age\",\n y: \"population\",\n title: \"age\",\n fill: \"age\",\n sort: { fx: \"y\", reduce: \"sum\", limit: 6, reverse: true }\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"heading(\"Bar chart with faceting\", 6, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"Plot.plot({\n width,\n y: { tickFormat: \"s\", grid: true },\n color: {\n scheme: \"spectral\",\n domain: ages,\n legend: true\n },\n facet: {\n data: stateages,\n y: \"age\",\n marginRight: 50\n },\n fy: {\n domain: ages\n },\n marks: [\n Plot.barY(stateages, {\n x: \"state\",\n y: \"population\",\n fill: \"age\",\n sort: { x: \"y\", reverse: true }\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"heading(\n \"Stacked Bar charts with interactive selection\",\n 7,\n k,\n bg\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"viewof age_group = Inputs.select(\n [\"≥80\", \"70-79\", \"60-69\", \"50-59\", \"40-49\", \"30-39\", \"20-29\", \"10-19\", \"<10\"],\n {\n label: \"age group\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"Plot.plot({\n width,\n y: { tickFormat: \"s\" },\n marks: [\n Plot.barY(stateages, {\n x: \"state\",\n y: \"population\",\n //z: \"age\",\n fill: (d) => (d.age === age_group ? \"steelblue\" : \"lightgrey\"),\n stroke: \"grey\",\n sort: { x: \"y\", reverse: true }\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"heading(\"Stacked bar chart - vertical\", 8, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"Plot.plot({\n width,\n y: { tickFormat: \"s\" },\n color: { scheme: \"spectral\", domain: ages, legend: true },\n marks: [\n Plot.barY(stateages, {\n x: \"state\",\n y: \"population\",\n fill: \"age\",\n sort: { x: \"y\", reverse: true }\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"heading(\"Stacked bar chart - horizontal\", 9, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"Plot.plot({\n width,\n x: { axis: \"top\", tickFormat: \"s\" },\n color: { scheme: \"spectral\", domain: ages, legend: true },\n marks: [\n Plot.barX(stateages, {\n y: \"state\",\n x: \"population\",\n fill: \"age\",\n sort: { y: \"x\", reverse: true }\n }),\n Plot.ruleX([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"heading(\"Stacked bar chart - normalized\", 10, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"Plot.plot({\n width,\n x: { axis: \"top\", percent: true },\n color: { scheme: \"spectral\", domain: ages },\n marks: [\n Plot.barX(stateages, {\n y: \"state\",\n x: \"population\",\n fill: \"age\",\n offset: \"expand\", // this option is consumed by the implicit stack transform\n sort: { y: \"x2\", reduce: \"first\", reverse: true }\n }),\n Plot.ruleX([0, 1])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"heading(\"Bar chart with same axes on both sides\", 11, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"{\n const p = Plot.plot({\n x: { tickFormat: \"%\", grid: true },\n marks: [\n Plot.barX(alphabet, {\n y: \"letter\",\n x: \"frequency\",\n fill: \"steelblue\",\n sort: { y: \"x\", reverse: true }\n })\n ]\n });\n return Plot.plot({\n width,\n height: p.getAttribute(\"height\"),\n marks: [() => p],\n x: { ...p.scale(\"x\"), tickFormat: \"%\", axis: \"top\", label: null }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"k = 11","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"bg = \"blue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import { alphabet } from \"@d3/bar-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"import { states } from \"@d3/diverging-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"import { stateages, ages } from \"@d3/grouped-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"#### Misc","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"import { heading } from \"@ee2dev/formatting-in-observable\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"