I am using a D3.js scatterplot to show amount of works according to time periods. I would like to place points at the middle date between the beginning and ending dates for each period. The data I have looks like this:
period, amount, startDate, endDate
1, 5, 26/11/1982, 2/6/1989
2, 6, 2/6/1989,2/1/1990
3, 11, 2/01/1990,20/6/1999
I tried mapping points on the graph using:
.attr("cx", function(d) { return xScale(new Date(d.endDate)) - xScale(new Date(d.startDate)) * 0.5 })
But this doesn't work. What am I missing?
The middle point between two given points is:
middleX = (x1 + x2) / 2;
In your case:
d => {
const xFrom = xScale(new Date(d.startDate));
const xTo = xScale(new Date(d.endDate));
return (xFrom + xTo) / 2;
}