Observable Plot barY

Very impressed by Observable Plot. That will replace my vega-lite codes for sure.

I have tested this on a small notebook. Small details to set up to be perfect.

  1. Is there a way to control the ticks to be integers. The bar plot represents counts so I would like to have only interger values. If I force the format or use round, there are multiple identical ticks


  1. Is there a way to set the width of bars ?
    The number of bars displayed are various so the width bars are adapted to respect the width plot. I would like to have the same bar width each time.

to be compared to

  1. The vertical domain is set automatically. The highest bar reaches the top of the plot. Is there a way to let some space above from the axis domain displayed ?

My notebook is available from:

Let me know.
And once again, Observable Plot and Observable are becoming a dreaming plateform and environment to work and visualize data.

1 Like

1/ Several tricks are possible to ensure you only have integers on y, in your case I would recommend to create a mark that is at y=10, so that even if the maximum value is 1 or 2, the chart goes to 10.

Plot.ruleY([10], {stroke:[]}),

2/ You can do some arithmetic to compute the insetRight option for the x scale. It will probably be something like

  x: {insetRight: Math.max(0, 600 - 30 * countries.length)},

where 600 is the width of the frame (the width of the chart minus the left and right margins), and 30 the bandwidth. Reject negative values, since it’s better, if you have more bars than expected, to make them smaller rather than to bleed out to the right.

3/ To leave room at the top, you can specify an inset for the y scale:

y: {insetTop: 20},
1 Like

Many thanks @Fil.

For the 1), your solution is tricky. Very good.

For the 2), I have coded a solution by handling the width of the plot.
width: 100 + 30 * countries.length,

Another small question relative to comestic issues, is there a way to place title on the right ?