Bar chart axis is inverted

Community Help
1

Adding text marks inverts the axis of the chart. Wonder what’s causes the behavior.

Plot.plot({
  grid: false,
  legend: false,
  marginLeft: 80,
  x: {
    domain: d3.sort(data, d => -d["Size of holding"]).map(d=>d["Size of holding"])
  },
  marks: [
    Plot.barY(data, {
      x: "Size of holding",
      y: "No of households",
      title: "No of households",
      text: "No of households",
      fill: "hsl(348, 100%, 70%)"
    }),
        Plot.text(data, {
                 x: "Size of holding",
                 y: "No of households",
                 text: "No of households"
        }),
  ]
})

image

Complete notebook: Size of land owned by single households in Thailand / Arky / Observable

2

the :warning: icon gives you a hint in the console, that the domain is made of strings that look like numbers. As they are strings, they will be considered ordinal, where what you want is probably a linear scale.

Two solutions:

  1. type your data (“No of households” should be numbers), or:
  2. use an explicit definition {x: {type: "linear"}} for the x scale
2 Likes
3

Thank you @Fil

I have failed to notice warning icon gives you hint in the console. It is not mentioned anywhere in the docs. :smiley:

4

Warnings are a new feature, see: plot/CHANGELOG.md at main · observablehq/plot · GitHub

I’ve added an issue as a reminder to document them Issues · observablehq/plot · GitHub thank you!

2 Likes