Plotting bar chart with counts with specific interval and min/max values

New To Observable
3

You can add interval: 2 to the x scale definition to ensure that the missing values appear. E.g.,

untitled (1)
untitled (1)1280×820 9.3 KB 

Plot.plot({
  marginBottom: 40,
  x: {label: "Βαθμολογία", tickRotate: 90, interval: 2},
  y: {label: "# Μαθητών", grid: true},
  marks: [
    Plot.barY(
      filteredData.filter(d => d.year.toString() === "2023"),
      Plot.groupX({y: "count"}, {x: "score", fill: "result"})
    ),
    Plot.ruleY([0])
  ]
})

If you also want to ensure that the domain is consistent with the data changes, you can compute the domain explicitly using d3.range like so:

untitled (2)
untitled (2)1280×820 9.3 KB 

Plot.plot({
  caption: "2023",
  marginBottom: 40,
  x: {label: "Βαθμολογία", tickRotate: 90, interval: 2, domain: d3.range(0, 101, 2)},
  y: {label: "# Μαθητών", grid: true},
  marks: [
    Plot.barY(
      filteredData.filter(d => d.year.toString() === "2023"),
      Plot.groupX({y: "count"}, {x: "score", fill: "result"})
    ),
    Plot.ruleY([0])
  ]
})
1 Like