Difference in D3 Data Displays

Can somebody tell me why my code is displaying the data coordinates differently than here? There's an extra circle at the origin of the SVG, and the other circle only follows one line (the black line in the linked CodePen). Edit: There's a red line underneath the black one. Switch the "I" slider or hit the "New Exercise" button

I know the source I'm pulling from is parsing a CSV file, but I'm sure it can be done the way I'm trying to do it. I appreciate any help I can get!

EDIT: It works if I switch
var lines = document.getElementsByClassName("line"); to
var lines = document.getElementsByClassName("line")[0];
and adjust code accordingly, but then the text renders fuzzily.

EDIT: I WILL VENMO YOU $20 FOR A FIX BY TONIGHT.

Here's the data display function:

function visualize(datum) {
    datum = data;
    console.log("Datum", datum);
    var mouseG = svg.append("g")
        .attr("class", "mouse-over-effects");

    mouseG.append("path") // this is the black vertical line to follow mouse
        .attr("class", "mouse-line")
        .style("stroke", "black")
        .style("stroke-width", "1px")
        .style("opacity", "0");

    var lines = document.getElementsByClassName("line");

    var mousePerLine = mouseG.selectAll(".mouse-per-line")
        .data(datum)
        .enter()
        .append("g")
        .attr("class", "mouse-per-line");

    mousePerLine.append("circle")
        .attr("r", 7)
        .style("stroke", "red")
        .style("fill", "none")
        .style("stroke-width", "1px")
        .style("opacity", "0");

    mousePerLine.append("text")
        .attr("transform", "translate(10, 4)")
        .style("font-size", "13px");

    mouseG.append("svg:rect")
        .attr("width", xScale(datum[datum.length - 1].x) - xScale(datum[0].x))
        .attr("height", height)
        .attr("x", xScale(datum[0].x))
        .attr("fill", "none")
        .attr("pointer-events", "all")
        .on('mouseout', function() { // on mouseout hide line, circles, and text
            d3.select(".mouse-line")
                .style("opacity", "0");
            d3.selectAll(".mouse-per-line circle")
                .style("opacity", "0");
            d3.selectAll(".mouse-per-line text")
                .style("opacity", "0");
        })
        .on("mouseover", function() { // on mouse in show line, circles and text
            d3.select(".mouse-line")
                .style("opacity", "1");
            d3.selectAll(".mouse-per-line circle")
                .style("opacity", "1");
            d3.selectAll(".mouse-per-line text")
                .style("opacity", "1");
        })
        .on("mousemove", function() { // mouse moving over canvas
            var mouse = d3.mouse(this);
            d3.select(".mouse-line")
                .attr("d", function() {
                    var d = "M" + mouse[0] + "," + height;
                    d += " " + mouse[0] + "," + 0;
                    return d;
                });

            d3.selectAll(".mouse-per-line")
                .attr("transform", function(d, i) {
                    var beginning = 0,
                            end = lines[i].getTotalLength(),
                            target,
                            pos;

                    while (true){
                        target = Math.floor((beginning + end) / 2);
                        pos = lines[i].getPointAtLength(target);
                        if ((target === end || target === beginning) && pos.x !== mouse[0]) {
                                break;
                        }
                        if (pos.x > mouse[0]) {
                            end = target;
                        }
                        else if (pos.x < mouse[0]) {
                            beginning = target;
                        } else {
                            break; //position found
                        }
                    }

                    d3.select(this).select('text')
                        .text((xScale.invert(pos.x) - 2).toFixed(2) + ", " + yScale.invert(pos.y).toFixed(2));

                    return "translate(" + mouse[0] + "," + pos.y +")";
                });
        });
}