This post follows the previous basic area chart. It shows how to display the trend line on top, with the individual observations represented as circle as well. It is actually a mix between a scatterplot, a line chart and an area chart. This example works with d3.js v4 and v6
Adding the line: a first approach could be to add stroke to the area. But this highlights the whole border, not only the top.. The workaround is to plot a line chart on top using the d3.line() function.
Adding the dots: this is done appending circles like for a classic scatterplot. Note: do it only if the number of data point is not to high.