javascriptd3.jsobservablehq

D3 - Can't create line chart with time data

This is my first time with D3 and I am trying to create a line chart. I forked from this example: https://observablehq.com/@d3/line-chart

My fork is here: https://observablehq.com/d/f98c480a077a03ac

My data looks as follows

[
  {
    "numAnnotations": 23,
    "date": "2021-04-26"
  },
  {
    "numAnnotations": 108,
    "date": "2021-04-28"
  },
  {
    "numAnnotations": 166,
    "date": "2021-04-29"
  },
...
  {
    "numAnnotations": 227414,
    "date": "2022-04-13"
  }
]

I just want to show the number of annotations increasing with date. But I can't get the graph to render and I don't understand what I am doing wrong.

I am assuming there is something wrong with my data format, but I can't see what's wrong. Can someone point out my mistake?

Solution

  • I figured it out. The error was that I was not converting date strings to JS data objects. I have now fixed the code.

    Here is the updated observable: https://observablehq.com/d/f98c480a077a03ac