Plot Date Tooltip Without Daylights Savings Time

Community Help
1

what_is_this
what_is_this1597×446 34.4 KB

I’m trying to plot a line chart with dates on the x-axis. Here is the code.

Plot.plot({
    color: {
      range: ["#193278", "#781932", "#197832", "#a96323"]
    },
    x: {
      type: "time"
    },
    y: {
      type: "linear",
      grid: true,
      domain: [0, 2100]
    },
    marks: [
        Plot.line(df, {
          x: "date", 
          y: "running_case_count",
          tip: true,
          stroke: "topic",
          title: d => `Category: ${d.topic}\nDate: ${d.date}\nCases: ${d.running_case_count}`
      })
    ]
  })
)}

The dates are in YMD format; however, for whatever reason, Observable Plot wants to account for timezone differences starting on Nov. 4th and lists the dates with hours, which completely breaks the readability of the tooltip. I have a near identical chart to this one, with nearly the same exact code and the same exact datatypes, but it does not do this for whatever reason.

Plot.plot({
    color: {
      range: ["#193278", "#781932", "#197832", "#a96323"]
    },
    x: {
      type: "time"
    },
    y: {
      type: "linear",
      grid: true,
      domain: [0, 2100]
    },
    marks: [
        Plot.line(df, {
          x: "date", 
          y: "running_credit_total",
          tip: true,
          stroke: "topic",
          title: d => `Category: ${d.topic}\nDate: ${d.date}\nCredits: ${d.running_credit_label}`
      })
    ]
  })
)}

This labels the dates in YMD format, unlike the other that attempts to convert to written months. Is there a way to disable timezones from appearing on dates, and is there a reason why it shows on one and not the other given the formats are identical (YYYY-MM-DD)

2

what_is_this2
what_is_this2757×360 27.3 KB

Here is how the second plot gets displayed

3

That seems unrelated to Plot, to be honest. In your title string you interpolate a Date object which converts it to a string by calling Date.toString().

If you want to format the date in a specific way you’ll either have to omit the title so that the channels get displayed instead, or format the date through one of the native methods (e.g. toLocaleDateString) or d3.timeFormat.

A common shorthand for UTC dates is

date.toISOString().slice(0, 10)

Can you share a sample of your data?

4

example_image

Here is a slice of the data I’m working with. I was able to get the dates formatted correctly by adding the fix you posted to the title.

title: d => `Category: ${d.sc1}\nDate: ${d.date.toISOString().slice(0, 10)}\nMaterial Cost: ${d.running_material_cost}`

This gets the data in YYYY-MM-DD format which is more-or-less what I want. I thought the fix would come from changing the x-variable type from time to something else, but the problem seems to be with how values are displayed on title if I’m understanding correctly. I’m still not sure why it displays fine for the second chart, though, because the formatting is identical and I didn’t have to format the date. Either way, thank you for the help.

5

I’m still not sure why it displays fine for the second chart

Is there a chance that some part of your code may mutate the objects between rendering of the first and second chart?

6

I’m only loading the data with FileAttachment before plotting it, so no mutating is happening on the Observable side.

const ncnrs_material_cost = FileAttachment("./data/.monthly-reports/.march-2024/Running NCNRs Costs by Topic.csv").csv({typed: true});

I am producing the data in R before plotting them in Observable, though, so that might have something to do with it. Checking the structure on both dataframes before saving to CSV gives the same exact Date type for both, though, and datatypes shouldn’t be preserved when saving to CSV. I’ll have to take a closer look and ensure the dataframes are being built the same exact way, not just the datatypes.