https://i.sstatic.net/0AWgj.png
I have successfully created a basic line chart in d3. My goal now is to determine the last entry point of the data and draw a circle on it, along with a dotted line similar to the image provided above.
Below is my current d3 code:
const xScale = scaleTime()
.range([0, width])
.domain(
extent(data, (d: { week: any }) => {
return d.week;
})
);
const yScale = scaleLinear()
.range([height, 0])
.domain([
min(data, (d: { index: number }) => {
return d.index;
}) - 20,
max(data, (d: { index: number }) => {
return d.index;
}) + 20
]);
const xAxis = axisBottom(xScale)
.ticks(data.length);
const svg = select(svgRef.current);
svg
.select(".x-axis")
.style("transform", `translateY(${height}px)`)
.call(xAxis);
const yAxis = axisLeft(yScale);
svg
.select(".y-axis")
.call(yAxis);
const myLine = line()
.x((d: { week: any }) => xScale(d.week))
.y((d: { index: any }) => yScale(d.index))
.curve(curveCardinal);
svg
.selectAll(".line")
.data([data])
.join("path")
.attr("class", "data-circle")
.attr("d", myLine)
.attr("fill", "none")
.attr("stroke", "purple")
.attr("stroke-width", "5px");
// To do: draw circle here
svg
.selectAll(".data-circle")
.data([data])
.append("circle")
.attr("r", 7.5);
I have attempted to target the correct element that would allow me to identify the final entry in the array, but I keep encountering errors. It seems like there might be a simple adjustment needed.
The circle does not need to appear only on mouse hover; it should be drawn by default and adjust automatically if different data sets are loaded.