31:[] 2f:{"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"},{"id":28,"value":"heading(\"Bar chart - vertical\", 1, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":133,"value":"heading(\"Bar chart - horizontal\", 2, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":120,"value":"heading(\"Diverging bar chart with absolute values\", 3, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":49,"value":"heading(\"Diverging bar chart with relative values\", 4, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":148,"value":"heading(\"Grouped bar chart\", 5, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":227,"value":"heading(\"Bar chart with faceting\", 6, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":239,"value":"heading(\n \"Stacked Bar charts with interactive selection\",\n 7,\n k,\n bg\n)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":154,"value":"heading(\"Stacked bar chart - vertical\", 8, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":254,"value":"heading(\"Stacked bar chart - horizontal\", 9, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":256,"value":"heading(\"Stacked bar chart - normalized\", 10, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":281,"value":"heading(\"Bar chart with same axes on both sides\", 11, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":9,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"k = 11","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"bg = \"blue\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import { alphabet } from \"@d3/bar-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"import { states } from \"@d3/diverging-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"import { stateages, ages } from \"@d3/grouped-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"#### Misc","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"import { heading } from \"@ee2dev/formatting-in-observable\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}