observable plot cell and date label

Community Help
1

Hi,
I’m building this heat map starting from this template.

I have a date field (the name is data, and it’s in YYYY-MM-DD format), and I use it to put labels in x axis.

Currently I put the day number:

image

But I would like to have labels both with month and day, as those I have by default in a standard line chart, based on the same data.

How to format the date, in the same way in a plot cell chart?

image

Thank you

2

Try the suggestions below. Not exactly the orientation you want but should set you in the right direction. This reference is also useful GitHub - d3/d3-time-format: Parse and format times, inspired by strptime and strftime.

Plot.plot({
  marginLeft: 120,
  padding: 0,
  color: {
    domain: [0, 1, 2, 3],
    range: ["#5bd601", "#e8d203", "#ff7f02", "#c40001"]
  },
  y: { label: null },
  x: {
    tickFormat: "%b %d",
    tickRotate: -90,
  },
  marks: [
    Plot.cell(
      citta,
      Plot.group(
        { fill: "max" },
        {
          x: (d) => d.data,
          y: "citta",
          fill: "livello_n",
          inset: 1,
          tip: false
        }
      )
    )
  ]
})```
1 Like
3

Extremely useful, thank you very much.

I would like to have the short month name in my language, Italian. How to add this setting?

4

You can set up a customer locale format and use it in the chat like so

dateformat = {
  const locale = await fetch(
    `https://unpkg.com/d3-time-format@2/locale/${"it-IT.json"}`
  );
  const localeJSON = await locale.json();
  const timeformat = d3.timeFormatDefaultLocale(localeJSON);
  return timeformat.format("%d %b");
}

And call the dateformat with the data

        tickFormat: (d) => dateformat(d),
5

Thank you very much @thehogfather , extremely useful

1 Like
6

These days I recommend using the browser’s built-in localized date formatting (date.toLocaleString) instead of using d3-time-format; the browser has a much richer API and all the locales are built-in so you don’t have to load another locale definition. Also using d3.timeFormatDefaultLocale in particular is tricky because it changes the default locale; therefore D3’s behavior depends on the order in which cells are evaluated.

You can also mimic the multi-line format that Plot now uses by default for time-series axes like so, which is nice because then you don’t need to rotate the labels, improving readability:

calendario
calendario1280×1260 26.8 KB

Plot.plot({
  x: {
    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");
    },
    label: null,
    type: "band"
  },
  marks: …
})
1 Like
7

A post was merged into an existing topic: observable plot cell: how to order y axis by a specific field

8

Sorry to jump on this bandwagon: an alternative is to use a continuous (utc) scale for x, and benefit from the new default time axes:

Plot.plot({
  marginLeft: 120,
  marginBottom: 60,
  padding: 0,
  color: {
    domain: [0, 1, 2, 3],
    range: ["#5bd601", "#e8d203", "#ff7f02", "#c40001"]
  },
  y: { label: "Città, da Nord a Sud" },
  marks: [
    Plot.barX(diecigiorni, {
      x: "data",
      interval: "day",
      y: "citta",
      fill: "livello_n",
      inset: 1,
      tip: true,
      sort: {
        y: "-data",
        reduce: ([d]) => d.latitude
      }
    }),
  ]
})

Here we use a barX mark, with the interval: day option that generates 1-day long bars. See also centered/aligned intervals? · Issue #1774 · observablehq/plot · GitHub

2 Likes
9

Wow, really useful!!

Thank you