[Solved]-How to set circle at the right end of the last bar / item using D3-d3.js

I've created a new demo here.

This is what it looks like:

The first change I made was just to create the circle right before the tick function is declared:

g.append("circle")
  .attr('class', 'last-circle')
  .style("fill", "red")
  .attr("r", 10)
  .attr("cy", 0)
  .attr("cx", 0);

Then, in the tick function, right below where you recompute the new axes-domains, I created a new variable that holds only the data that will be displayed in the current frame. It filters the data by everything that has a smaller x value than the maximum value in the timeWindow:

var newdata = data.filter(function(d) {
  return d.x < timeWindow[1];
});

Then I changed the part where you redraw the line to use the newdata value so that the line won't be drawn outside of the graph's boundaries/domain:

g.select('.line')
  .attr('d', line(newdata))

Then lastly, I got the last value from the newdata and updated the position of the circle to be at the y and x value of the last value in the graph:

var last = newdata[newdata.length - 1]

g.select('.last-circle')
  .transition()
  .duration(0)
  .attr("cy", y(last.y))
  .attr("cx", x(last.x));