30:[{"id":"2e16d0e78fb1674fd1fce73a65459bac1c512ab6865a8a86fc84ed8374bc60adae27e63b94801c635f3d5e26c0e71626b74f123d3da29930a2d5274e9486c9d1","href":"https://static.observableusercontent.com/files/2e16d0e78fb1674fd1fce73a65459bac1c512ab6865a8a86fc84ed8374bc60adae27e63b94801c635f3d5e26c0e71626b74f123d3da29930a2d5274e9486c9d1","name":"us-state-population-2010-2019.csv","type":"text/csv","lastModified":1616131674960.736,"size":1354},{"id":"fcc0015cbe24eea265833239de543af33607f288cc9959f9ce4d0e2456b25dbaae5ff62a355704d879441905518bdbbeef0d13496346f63bfed61b07decbd0d3","href":"https://static.observableusercontent.com/files/fcc0015cbe24eea265833239de543af33607f288cc9959f9ce4d0e2456b25dbaae5ff62a355704d879441905518bdbbeef0d13496346f63bfed61b07decbd0d3","name":"civilizations.csv","type":"text/csv","lastModified":1608069186990.726,"size":3382},{"id":"81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","href":"https://static.observableusercontent.com/files/81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","name":"us-population-state-age.csv","type":"text/csv","lastModified":1616033593719.974,"size":3516},{"id":"56252fee45d48e3b1834acc30dc71d7387e85cb50ca4de2e0eff9afd4f8f7e90e89218a5ec966f223eb4aabfda79df16c57654ca044c1a511497676dc5f4da93","href":"https://static.observableusercontent.com/files/56252fee45d48e3b1834acc30dc71d7387e85cb50ca4de2e0eff9afd4f8f7e90e89218a5ec966f223eb4aabfda79df16c57654ca044c1a511497676dc5f4da93","name":"hadcrut-annual.txt","type":"text/plain","lastModified":1608077271734.549,"size":17784},{"id":"75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","href":"https://static.observableusercontent.com/files/75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","name":"alphabet.csv","type":"text/csv","lastModified":1608067427823.185,"size":275}] 2e:{"title":"Bar Mark / Observable Plot","cells":[{"id":0,"value":"

Bar Mark / Observable Plot

Observable Plot › Marks › Bar · API

\n\n# Plot: Bar\n\nBars have an ordinal dimension, such as a name or category, and a quantitative dimension, a number. Bars come in two orientations: **barX** extends horizontally→ as in a bar chart, and **barY** extends vertically↑ as in a column chart. For example, the plot below shows the frequency of letters in the English language. The *letter* dimension is ordinal, while the *frequency* dimension is quantitative, representing how often the given letter appears.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"alphabet = FileAttachment(\"alphabet.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"Plot.plot({\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"We can improve this plot by adding a *y*-grid, a rule at *y* = 0, and a warm gray fill to reduce contrast.","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\", fill: \"#bab0ab\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"To transform values, specify a function rather than a named field. For example, to show percentages instead of proportions, multiply *frequency* by 100:","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"Plot.plot({\n y: {\n label: \"↑ Frequency (%)\",\n grid: true\n },\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: d => d.frequency * 100}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":837,"value":"You can alternatively apply a transform to all channels associated with a particular scale using the scale’s *transform* option.","pinned":false,"hidden":false,"mode":"md"},{"id":840,"value":"Plot.plot({\n y: {\n label: \"↑ Frequency (%)\",\n grid: true,\n transform: d => d * 100\n },\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1097,"value":"The bar mark is closely related to the [rect mark](/@observablehq/plot-rect?collection=@observablehq/plot). Both generate a rectangle; the difference is in how the coordinates are specified. For a bar, one side is a quantitative interval (*e.g.*, from 0 to a percentage) while the other is an ordinal or categorical value (*e.g.*, an English letter); whereas for a rect, both sides are quantitative intervals. Hence a bar is used for a bar chart but a rect is needed for a histogram.","pinned":false,"hidden":false,"mode":"md"},{"id":1136,"value":"The bar mark should generally not be used if the independent dimension (*e.g.*, *x* for barY) is temporal rather than ordinal. In this case, you should use the rect mark with the [interval transform](/@observablehq/plot-interval?collection=@observablehq/plot).","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"A bar’s ordinal dimension uses a [band scale](/@d3/d3-scaleband?collection=@d3/d3-scale) with a bit of padding to separate bars. For finer separation, you can set the *x*-scale’s padding to zero and use an inset. The bar mark supports four options for insetting the sides of the bar: *insetTop*, *insetRight*, *insetBottom*, and *insetLeft*. The *inset* option is shorthand for setting all four sides to the same value. The chart below separates each bar by a single pixel.","pinned":false,"hidden":false,"mode":"md"},{"id":571,"value":"Plot.plot({\n x: {\n padding: 0\n },\n y: {\n grid: true\n },\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\", insetLeft: 0.5, insetRight: 0.5}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":662,"value":"Band scales round by default, which can leave extra space between the axes and the bars; set the corresponding scale’s align to zero or one, or disable rounding, if you don’t want a gap. The domain is sorted naturally (alphabetically) by default; set the domain explicitly to change the order. (See [Scales](/@observablehq/plot-scales?collection=@observablehq/plot) for more.) For example, descending frequency:","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"Plot.plot({\n x: {\n domain: d3.sort(alphabet, d => -d.frequency).map(d => d.letter)\n },\n y: {\n grid: true\n },\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"If you specify a single quantitative value, as above, the bar spans from zero to the given value; you can specify a [*min*, *max*] extent instead by specifying two values. For example, here is a historical timeline of civilizations, where each has a beginning and an end.","pinned":false,"hidden":false,"mode":"md"},{"id":145,"value":"civilizations = FileAttachment(\"civilizations.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"Plot.plot({\n height: civilizations.length * 16,\n marginLeft: 120,\n x: {\n axis: \"top\",\n grid: true,\n tickFormat: formatYear\n },\n y: {\n axis: null,\n domain: d3.sort(civilizations, d => d.start).map(d => d.civilization)\n },\n marks: [\n Plot.barX(civilizations, {\n x1: \"start\",\n x2: \"end\",\n y: \"civilization\"\n }),\n Plot.text(civilizations, {\n x: \"start\",\n y: \"civilization\",\n text: \"civilization\",\n textAnchor: \"end\",\n dx: -6\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"The above uses a text mark to label the bars directly instead of a *y*-axis. It also uses a custom tick format for the *x*-axis to show the calendar era.","pinned":false,"hidden":false,"mode":"md"},{"id":199,"value":"formatYear = year => year < 0 ? `${-year} BC` : `${year} AD`","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"For (horizontal) bar charts, consider setting the chart height based on the number of bars to allow the chart to expand or contract automatically to fit the dataset.","pinned":false,"hidden":false,"mode":"md"},{"id":1084,"value":"For a diverging bar chart, simply specify a negative length. The chart below shows change in population from 2010 to 2019. States whose population increased are blue, while states whose population decreased are red. (Puerto Rico’s population declined sharply after hurricanes Maria and Irma.)","pinned":false,"hidden":false,"mode":"md"},{"id":1070,"value":"popchange = FileAttachment(\"us-state-population-2010-2019.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1069,"value":"Plot.plot({\n height: 780,\n marginLeft: 100,\n grid: true,\n x: {\n axis: \"top\",\n round: true,\n label: \"← decrease · Change in population, 2010–2019 (%) · increase →\",\n labelAnchor: \"center\",\n tickFormat: \"+\",\n transform: d => d * 100\n },\n y: {\n label: null,\n domain: d3.sort(popchange, d => (d[2010] - d[2019]) / d[2010]).map(d => d.State)\n },\n color: {\n range: [\"#e15759\", \"#4e79a7\"]\n },\n marks: [\n Plot.barX(popchange, {\n y: \"State\",\n x: d => (d[2019] - d[2010]) / d[2010],\n fill: d => Math.sign(d[2019] - d[2010])\n }),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"For a one-dimensional dataset, such as an array of numbers, you can use the index of the datum as the ordinal dimension: channel functions are passed a second argument *i* representing the zero-based index.","pinned":false,"hidden":false,"mode":"md"},{"id":671,"value":"frequencies = alphabet.map(d => d.frequency)","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.barY(frequencies, {x: (d, i) => i}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"A bar’s ordinal dimension is optional; if missing, the bar spans the chart along this dimension. Such bars typically also have a color encoding. For example, here are [warming stripes](https://showyourstripes.info/) showing the increase in average temperature globally over the last 172 years.","pinned":false,"hidden":false,"mode":"md"},{"id":711,"value":"hadcrut = (await FileAttachment(\"hadcrut-annual.txt\").text())\n .trim().split(/\\n/g) // split into lines\n .map(line => line.split(/\\s+/g)) // split each line into fields \n .map(([year, anomaly]) => ({ // extract the year and median anomaly\n year: new Date(Date.UTC(year, 0, 1)), \n anomaly: +anomaly\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":714,"value":"Plot.plot({\n x: {\n round: true\n },\n color: {\n scheme: \"BuRd\"\n },\n marks: [\n Plot.barX(hadcrut, {\n x: \"year\",\n interval: \"year\", // yearly data\n inset: 0, // no gaps\n fill: \"anomaly\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"With the [stack transform](/@observablehq/plot-stack?collection=@observablehq/plot), a one-dimensional bar can show the proportions of each value relative to the whole, as a compact alternative to a pie or donut chart.","pinned":false,"hidden":false,"mode":"md"},{"id":862,"value":"Plot.plot({\n x: {\n label: \"Frequency (%)\",\n transform: d => d * 100\n },\n marks: [\n Plot.ruleX([0, 1]),\n Plot.barX(alphabet, Plot.stackX({order: \"letter\", x: \"frequency\", fill: \"#ccc\", insetLeft: 1})),\n Plot.textX(alphabet, Plot.stackX({order: \"letter\", x: \"frequency\", text: \"letter\", insetLeft: 1}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":718,"value":"One-dimensional bars can also be used to highlight regions of interest. Below, for example, the expected frequency if all English letters were equally likely (${tex`\\frac{1}{26}`}) is highlighted in orange.","pinned":false,"hidden":false,"mode":"md"},{"id":722,"value":"Plot.plot({\n x: {\n domain: d3.sort(alphabet, d => -d.frequency).map(d => d.letter)\n },\n y: {\n grid: true\n },\n marks: [\n Plot.barY([1 / 26], {fill: \"orange\", fillOpacity: 0.4}),\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1007,"value":"[Faceting](/@observablehq/plot-facets?collection=@observablehq/plot) can produce a grouped bar chart. The chart below shows the populations of the six most-populous states broken down by age group. The youngest age group (<10) is on the left in red, while the oldest age group (≥80) is on the right in blue.","pinned":false,"hidden":false,"mode":"md"},{"id":1009,"value":"stateage = {\n const data = await FileAttachment(\"us-population-state-age.csv\").csv({typed: true});\n const ages = data.columns.slice(1); // convert wide data to tidy data\n return Object.assign(ages.flatMap(age => data.map(d => ({state: d.name, age, population: d[age]}))), {ages});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1005,"value":"Plot.plot({\n x: {\n axis: null,\n domain: stateage.ages\n },\n y: {\n grid: true,\n tickFormat: \"s\"\n },\n color: {\n domain: stateage.ages,\n scheme: \"spectral\"\n },\n fx: {\n domain: d3.groupSort(stateage, v => d3.sum(v, d => -d.population), d => d.state).slice(0, 6),\n label: null,\n tickSize: 6\n },\n marks: [\n Plot.barY(stateage, {fx: \"state\", x: \"age\", y: \"population\", fill: \"age\", title: \"age\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"Bars are often used in conjunction with transforms: the [*group* transform](/@observablehq/plot-group?collection=@observablehq/plot) groups data by discrete value so that bar length can represent the size (frequency) of each group; the [*stack* transform](/@observablehq/plot-stack?collection=@observablehq/plot) can arrange bars into stacks, as in a stacked bar chart. The [*bin* transform](/@observablehq/plot-bin?collection=@observablehq/plot), which can be used to construct histograms of quantitative data, is typically paired with the [*rect* mark](/@observablehq/plot-rect?collection=@observablehq/plot) instead of bar.","pinned":false,"hidden":false,"mode":"md"},{"id":666,"value":"Bars support a *z* channel to control *z*-order. This is typically only needed to control occlusion when bars overlap. Bars also support the SVG *rx* and *ry* attributes for rounding, along with the standard SVG style attributes.","pinned":false,"hidden":false,"mode":"md"},{"id":1104,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}