The issue you're seeing (or not seeing) is because you have defined a projection in this line:
var projection = d3.geo.mercator()
.center([0, 5 ])
.scale(900)
.rotate([-180,0]);
Which you use to transform your coordinates. Then, the projections for paths of the topojson data are set with this:
.attr("d", d3.geo.path().projection(d3.geo.mercator()));
So, the topojson renders using a mercator projection with no transforms where as your circle renders using a mercator projection that has been transformed.
I'm not entirely sure how you want you're final map to look, but assuming that it's a world map with a dot in Africa just comment out the centre, scale and rotate lines in the projection definition as in:
var projection = d3.geo.mercator();
//.center([0, 5 ])
//.scale(900)
//.rotate([-180,0]);
And replace the d3.geo.path in the svg.append block with path as in:
.attr("d", d3.geo.path().projection(d3.geo.mercator()));
to
.attr("d", path);
Oh, and if you haven't you'll need to give the circle some fill, so something like
.style("fill", "red")