Plot. lines - days

[PaulaIzzo]

Hello, I am learning to use observablehq and when I make this graph, the dates on the x axis are out of phase. Thanks.

lin_cal = Plot.plot({
  title: "Línea de Tiempo de Calorías Diarias",
  x: {
    label: "Día",
    type: "time", 
    ticks: 5, 
    tickFormat: d3.timeFormat("%b %d"), 
  },
  y: { 
    label: "Calorías", 
    grid: true 
  },
  marks: [
    Plot.line(caloriasPorDia, { x: "Día", y: "Calorías", strokeWidth: 3 }),
    Plot.dot(caloriasPorDia, { x: "Día", y: "Calorías", tip: true }),
    Plot.ruleY([1200], { stroke: null })
  ],
  marginBottom: 70,
});

[Fil]

It's hard to tell without seeing the data, but maybe try type: "utc", instead of type: "time",? the "time" type works in local time, including time zone.

[PaulaIzzo]

When I indicate time:utc, the x-axis is aligned with the points on the line, but it starts and ends one day before the dataset. It starts on the 17th and ends on the 21st.

[mbostock]

How is your data defined? What is the definition of caloriasPorDia? If it’s backed by a data file, what does that data look like?

[PaulaIzzo]

I was able to do it with type: utc and not indicating tickFormat: d3.timeFormat("%b %d"), this is how the code would look. Thank you very much!

lin_cal = Plot.plot({
  title: "Línea de Tiempo de Calorías Diarias",
  x: {
    label: "Día",
    type: "utc", 
    ticks: 5, 
    //tickFormat: d3.timeFormat("%b %d"), 
  },
  y: { 
    label: "Calorías", 
    grid: true 
  },
  marks: [
    Plot.line(caloriasPorDia, { x: "Día", y: "Calorías", strokeWidth: 3 }),
    Plot.dot(caloriasPorDia, { x: "Día", y: "Calorías", tip: true }),
    Plot.ruleY([1200], { stroke: null })
  ],
  marginBottom: 70,
});

[mbostock]

Glad you got it working. Yep, you don’t want to use d3.timeFormat in conjunction with type: "utc" because d3.timeFormat uses local time. If you do find you want to specify a custom format for the ticks, you can say tickFormat: "%b %d" and Plot will automatically promote it to the correct implementation based on the scale type (which is d3.utcFormat for a UTC scale).