observable plot cell: how to order y axis by a specific field

Community Help
3

Oh, and to combine with your other question on date formats, here is some complete code:

calendario (1)
calendario (1)1280×1220 26.6 KB

calendario = Plot.plot({
  marginLeft: 120,
  marginBottom: 40,
  padding: 0,
  color: {
    domain: [0, 1, 2, 3],
    range: ["#5bd601", "#e8d203", "#ff7f02", "#c40001"]
  },
  label: null,
  x: {
    type: "band",
    tickFormat(x, i, X) {
      const format1 = (x) => x.toLocaleString("it", { day: "numeric" });
      const format2 = (x) => x.toLocaleString("it", { month: "short" });
      const f1 = format1(x);
      const f2 = format2(x);
      return i > 0 && f2 === format2(X[i - 1]) ? f1 : [f1, f2].join("\n");
    }
  },
  marks: [
    Plot.cell(diecigiorni, {
      x: "data",
      y: "citta",
      fill: "livello_n",
      inset: 0.5,
      sort: { y: "data", reduce: ([d]) => -d.latitude },
      tip: true,
      title: (d) =>
        `${d.citta}, livello ${d.livello_n}\n${d.data.toLocaleString("it", {
          day: "numeric",
          month: "long",
          year: "numeric"
        })}`
    })
  ]
})

I also used the tip option instead of a separate tip mark for simplicity. Let me know if you have another question there. :slight_smile:

2 Likes