I am brand new to D3.js and am working on a school project. The task is for me to produce a line chart based on data with the following format:
[
{"date":"2023-12-01", "value":99.6},
{"date":"2023-12-04", "value":99.3},
{"date":"2023-12-05", "value":99.2},
{"date":"2023-12-06", "value":99.14},
...
]
Each data point consists of a single date and single value.
There are no dates present in the dataset that correspond to weekends because it is financial data.
The first thing I tried was doing a scaleTime(), but that resulted in weekends appearing on my X-axis.
The next thing I tried was a scaleBand() like so:
const x = d3.scaleBand().domain(data.map(d => d.date)).range([0, width])
const line = d3.line()
.x(d => x(d[0]) as number)
.y(d => y(d[1]))
However, this produced a weird result for me with vertical lines. No weekends showed on the X-axis but the actual line looked crazy!
I am desperate to figure this out. A newbie would appreciate any advice anyone has!