I'm trying to customize a D3 chart and I'm running into a few issues.

I want to add a circle that navigates the chart and shows a tooltip with data but none of the methods I've tried so far have worked. I've tried appending a circle and a tooltip in my code but they won't show up. This is exactly what I'm trying to achieve, but in my own code, it just doesn't work: https://bl.ocks.org/alandunning/cfb7dcd7951826b9eacd54f0647f48d3

I think this piece of code is the issue in my case and I don't know how to change it up or what to do about it:

    var focus = svg.append("g")
        .attr("class", "focus")
        .style("display", "none");

    focus.append("circle")
        .attr("r", 4.5);

    var rect = focus.append("rect")
        .attr("x", 9)
        .attr("dy", ".35em")
        .attr("fill", "yellow");

    var text = focus.append("text")
        var text = rect.append("text")
        .attr("x", 10)
        .attr("y", 10);

Here's a fiddle of my code: https://jsfiddle.net/3Lje1f4w/